navigating-across-documents: revisions and explanations for 010-*, 01…

…1, 012-*, 013, 014 & 015
rwaldron · Jan 19, 2018 · 2826fc1 · 2826fc1
1 parent cd052aa
commit 2826fc1
Show file tree

Hide file tree

Showing 13 changed files with 398 additions and 86 deletions.
diff --git a/...web/navigating-across-documents/010-form-action-javascript-url-aborted-by-navigation.html b/...web/navigating-across-documents/010-form-action-javascript-url-aborted-by-navigation.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigating-across-documents">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#javascript-protocol">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-form-submit">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#submit-get-action">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plan-to-navigate">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#planned-navigation">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source">
+<title>Link with onclick form submit to navigate "javascript: url" in nested browsing context, is aborted by href navigation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe id="test" name="test"></iframe>
+<!-- Everything seen in the action="" is necessary to prevent a blank page in Chrome -->
+<form target="test" action="javascript:parent.postMessage(location.href, '*');"></form>
+<a target="test" onclick="document.forms[0].submit();reports.push('onclick');" href="href.html">Test</a>
+<script>
+var test = async_test();
+var reports = [];
+
+window.onmessage = test.step_func(function(e) {
+  reports.push(e.data);
+  // "href" is expected last, if this is not received last or
+  // not received at all, the test must fail.
+  if (e.data === "href") {
+    assert_equals(reports[0], "click");
+    assert_equals(reports[1], "onclick");
+    assert_equals(reports[2], "href");
+    assert_equals(reports.length, 3);
+  } else {
+
+
+  }
+  test.done();
+});
+
+test.step(function() {
+  reports.push("click");
+  document.querySelector("a").click();
+});
+</script>
+
+<!--
+1. This test creates an iframe, a form with `action="javascript:...", and
+    an anchor with both an `onclick` and `href`.
+2. The test "clicks" the anchor, triggering the `onclick` handler operation,
+    which will attempt to submit the form, which targets the iframe.
+3. The form action "javascript: url" navigation is queued in a task.
+4. Navigating the iframe to the anchor's `href` must abort the iframe
+    "javascript: url" navigation.
+5. If the semantics are implemented correctly, reports will be
+    ["click", "onclick", "href"].
+    (There will be no report from the "javascript: url" code, because it
+    is aborted by the navigation to "href.html")
+-->
diff --git a/html/browsers/browsing-the-web/navigating-across-documents/010.html b/html/browsers/browsing-the-web/navigating-across-documents/010.html
diff --git a/html/browsers/browsing-the-web/navigating-across-documents/011.html b/html/browsers/browsing-the-web/navigating-across-documents/011.html
@@ -1,21 +1,39 @@
 <!doctype html>
-<title>Link with onclick navigation to javascript url with document.write and href navigation </title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigating-across-documents">
+<title>Link with onclick that does not attempt to navigate and href navigation</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <div id="log"></div>
 <iframe id="test" name="test"></iframe>
-<a target="test" onclick="javascript:(function() {document.write('<script>parent.postMessage(&quot;write&quot;, &quot;*&quot;)</script>'); return '<script>parent.postMessage(&quot;click&quot;, &quot;*&quot;)</script>'})()" href="href.html">Test</a>
+<a target="test" onclick="reports.push('onclick');" href="href.html">Test</a>
 <script>
-var t = async_test();
-var events = [];
-t.step(function() {
-  document.getElementsByTagName("a")[0].click()});
-onmessage = t.step_func(
-  function(e) {
-    events.push(e.data);
-    if (events.length === 2) {
-      assert_array_equals(events, ["write", "href"]);
-      t.done();
-    }
-  });
+var test = async_test();
+var reports = [];
+test.step(function() {
+  reports.push("click");
+  document.querySelector("a").click();
+});
+window.onmessage = test.step_func(function(e) {
+  reports.push(e.data);
+
+  // "href" is expected last, if this is not received last or
+  // not received at all, the test must fail.
+  if (e.data === "href") {
+    assert_equals(reports[0], "click");
+    assert_equals(reports[1], "onclick");
+    assert_equals(reports[2], "href");
+    assert_equals(reports.length, 3);
+    test.done();
+  }
+});
 </script>
+
+<!--
+1. This test creates an iframe and an anchor with both an `onclick` and `href`.
+2. The test "clicks" the anchor, triggering the `onclick` handler operation,
+    which adds a message to the reports array.
+3. Navigate the iframe to the anchor's `href`.
+4. If the semantics are implemented correctly, reports will be
+    ["click", "onclick", "href"].
+
+-->
diff --git a/html/browsers/browsing-the-web/navigating-across-documents/012-async-timeout.html b/html/browsers/browsing-the-web/navigating-across-documents/012-async-timeout.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigating-across-documents">
+<title>Link with onclick, which executes a handler containing a timeout, that then navigates the iframe, and returns true.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe id="test" name="test"></iframe>
+<a target="test" onclick="(function(){setTimeout(()=>document.querySelector('iframe').src='call-parent-postmessage.html', 500);reports.push('onclick');})()" href="href.html">Test</a>
+<script>
+var test = async_test();
+var reports = [];
+
+window.onmessage = test.step_func(function(e) {
+  reports.push(e.data);
+
+  // "call-parent-postmessage" is expected last, if this is not received last or
+  // not received at all, the test must fail.
+  if (e.data === "call-parent-postmessage") {
+    assert_equals(reports[0], "click", reports);
+    assert_equals(reports[1], "onclick", reports);
+    assert_equals(reports[2], "href", reports);
+    assert_equals(reports[3], "call-parent-postmessage");
+    assert_equals(reports.length, 4);
+    test.done();
+  }
+});
+
+test.step(function() {
+  reports.push("click");
+  document.querySelector("a").click();
+});
+</script>
+
+<!--
+1. This test creates an iframe and an anchor with both an `onclick` and `href`.
+2. The test "clicks" the anchor, triggering the `onclick` handler operation,
+    which will attempt to navigate the iframe after an async timeout.
+3. Navigating the iframe to the anchor's `href` will complete successfully,
+    then the queued timeout will execute and the next navigation will occur
+    and also complete successfully.
+4. If the semantics are implemented correctly, reports will be
+    ["click", "onclick", "href", "call-parent-postmessage"].
+
+-->
diff --git a/...ers/browsing-the-web/navigating-across-documents/012-blocking-then-async-postmessage.html b/...ers/browsing-the-web/navigating-across-documents/012-blocking-then-async-postmessage.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigating-across-documents">
+<title>Link with onclick, which executes a handler containing a 100ms blocking operation, then iframe document.write, then returns true.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<iframe id="test" name="test"></iframe>
+ <a target="test" onclick="(function() {((e,n)=>{var a=e();while(e()<a+n);})(Date.now,100); document.querySelector('iframe').contentDocument.write('<script>parent.postMessage(&quot;write-post-message&quot;, &quot;*&quot;)</script>');reports.push('onclick');return true;})()" href="href.html">Test</a>
+
+<script>
+var test = async_test();
+var reports = [];
+var iframe = document.querySelector('iframe');
+
+window.onmessage = test.step_func(function(e) {
+  reports.push(e.data);
+
+  // "href" is expected last, if this is not received last or
+  // not received at all, the test must fail.
+  if (e.data === "href") {
+    assert_equals(reports[0], "click");
+    assert_equals(reports[1], "onclick");
+    // This comes after "onclick" because it's
+    // sent via postMessage
+    assert_equals(reports[2], "write-post-message");
+    assert_equals(reports[3], "href");
+    assert_equals(reports.length, 4);
+    test.done();
+  }
+});
+
+test.step(function() {
+  reports.push("click");
+  document.querySelector("a").click();
+});
+</script>
+
+<!--
+1. This test creates an iframe and an anchor with both an `onclick` and `href`.
+2. The test "clicks" the anchor, triggering the `onclick` handler operation,
+    which will document.write a script to the iframe which sends a message "write".
+3. Navigate the iframe to the anchor's `href`
+4. If the semantics are implemented correctly, reports will be
+    ["click", "onclick", "write-post-message", "href"]
+
+-->
diff --git a/html/browsers/browsing-the-web/navigating-across-documents/012.html b/html/browsers/browsing-the-web/navigating-across-documents/012.html
diff --git a/html/browsers/browsing-the-web/navigating-across-documents/013.html b/html/browsers/browsing-the-web/navigating-across-documents/013.html
@@ -1,20 +1,46 @@
 <!doctype html>
-<title>Link with onclick navigation to javascript url with delayed document.write and href navigation </title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigating-across-documents">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#javascript-protocol">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element:about:blank">
+<title>Link with href navigation to "javascript: url", order of execution</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <div id="log"></div>
 <iframe id="test" name="test"></iframe>
-<a target="test" href="javascript:parent.events.push('javascript');">Test</a>
+<a target="test" href="javascript:parent.postMessage(location.href, '*');">Test</a>
 <script>
-var t = async_test(undefined, {timeout:4000});
-var events = [];
-t.step(function() {
-  document.getElementsByTagName("a")[0].click();
-  events.push('after script');
+var test = async_test();
+var reports = [];
+
+window.onmessage = test.step_func(function(e) {
+  reports.push(e.data);
+  // "about:blank" is expected last, if this is not received last or
+  // not received at all, the test must fail.
+  if (e.data === "about:blank") {
+    assert_equals(reports[0], "click");
+    assert_equals(reports[1], "about:blank");
+    assert_equals(reports.length, 2);
+  } else {
+    throw new Error("'javascript: url' code is expected to run asynchronously and in the target nested browsing context");
+  }
+  test.done();
 });
-onload = t.step_func(function() {
-  // javascript: executions are async.
-  assert_array_equals(events, ['after script', 'javascript']);
-  t.done();
+
+test.step(function() {
+  reports.push("click");
+  document.querySelector("a").click();
 });
 </script>
+
+<!--
+1. This test creates an anchor with an href containing a "javascript: url".
+2. The test "clicks" the anchor, triggering the "javascript: url" href navigation,
+    which must be evaluated and executed asynchronously.
+3. location.href is used to prove that the "javascript: url"'s contents
+    are executed in the iframe.
+4. If the semantics are implemented correctly, reports will be
+    ["click", "about:blank"]
+
+-->
diff --git a/html/browsers/browsing-the-web/navigating-across-documents/014.html b/html/browsers/browsing-the-web/navigating-across-documents/014.html
@@ -1,21 +1,55 @@
 <!doctype html>
-<title> Link with javascript onclick form submission script order </title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigating-across-documents">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#javascript-protocol">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-form-submit">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#submit-get-action">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plan-to-navigate">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#planned-navigation">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element:about:blank">
+<title>Link with onclick form submit to "javascript: url", order of execution</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <div id="log"></div>
 <iframe id="test" name="test"></iframe>
-<form target="test" action="javascript:parent.events.push('submit');"></form>
-<a target="test" onclick="document.forms[0].submit()">Test</a>
+<form target="test" action="javascript:parent.postMessage(location.href, '*');"></form>
+<a target="test" onclick="reports.push('onclick');document.forms[0].submit();">Test</a>
 <script>
-var t = async_test(undefined, {timeout:4000});
-var events = [];
-t.step(function() {
-  document.getElementsByTagName("a")[0].click();
-  events.push('after script');
+var test = async_test();
+var reports = [];
+
+window.onmessage = test.step_func(function(e) {
+  reports.push(e.data);
+
+  // "about:blank" is expected last, if this is not received last or
+  // not received at all, the test must fail.
+  if (e.data === "about:blank") {
+    assert_equals(reports[0], "click");
+    assert_equals(reports[1], "onclick");
+    assert_equals(reports[2], "about:blank");
+    assert_equals(reports.length, 3);
+  } else {
+    throw new Error("'javascript: url' code is expected to run asynchronously and in the target nested browsing context");
+  }
+  test.done();
 });
-onload = t.step_func(function() {
-  // javascript: executions are async.
-  assert_array_equals(events, ['after script', 'submit']);
-  t.done();
+
+test.step(function() {
+  reports.push("click");
+  document.querySelector("a").click();
 });
 </script>
+
+<!--
+1. This test creates a form with `target="test" and an anchor with both an
+    onclick and href.
+2. The test clicks the anchor, which will trigger the onclick handler
+    operation, which will attempt to submit the form. The form's `action` is
+    a "javscript: url", which must be evaluated and executed asynchronously.
+3. location.href is used to prove that the "javscript: url"'s contents are
+    executed in the iframe.
+4. If the semantics are implemented correctly, reports will be
+    ["click", "onclick", "about:blank"]
+
+-->