Bug 1569133 [wpt PR 17929] - html: Update tests for an autofocus algo…

…rithm update, a=testonly Automatic update from web-platform-tests html: Update tests for an autofocus algorithm update (#17929) whatwg/html#4763 -- wpt-commits: 08e6411a9cb36e4e7987d24ddb31e1d62690e1cb wpt-pr: 17929
xeonchen · Sep 9, 2019 · f79b0bd · f79b0bd
1 parent 8b4cbec
commit f79b0bd
Show file tree

Hide file tree

Showing 20 changed files with 315 additions and 36 deletions.
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/autofocus-on-stable-document.html b/testing/web-platform/tests/html/semantics/forms/autofocus/autofocus-on-stable-document.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<body>
+<script>
+'use strict';
+
+promise_test(async t => {
+  await waitForLoad(window);
+  await timeOut(t, 1000);
+  let element = document.createElement('input');
+  element.autofocus = true;
+  document.body.appendChild(element);
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, element);
+}, 'Autofocus should work if an element with autofocus is inserted into a ' +
+    'document which was loaded some time ago.');
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/first-reconnected.html b/testing/web-platform/tests/html/semantics/forms/autofocus/first-reconnected.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<input autofocus id="i1">
+<input autofocus id="i2">
+<script>
+"use strict";
+
+promise_test(async () => {
+  const input1 = document.querySelector("#i1");
+  const input2 = document.querySelector("#i2");
+  input1.remove();
+  input2.parentNode.insertBefore(input1, input2);
+
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, input2);
+}, 'The second autofocus element wins if the first autofocus element was ' +
+   'disconnected and reconnected before flushing the autofocus candidates.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/first-when-later-but-before.html b/testing/web-platform/tests/html/semantics/forms/autofocus/first-when-later-but-before.html
@@ -6,22 +6,21 @@
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
 
 <input autofocus>
 
 <script>
 "use strict";
 
-const input1 = document.querySelector("input");
+promise_test(async () => {
+  const input1 = document.querySelector("input");
+  const input2 = document.createElement("input");
+  input2.autofocus = true;
+  document.body.prepend(input2);
 
-const input2 = document.createElement("input");
-input2.autofocus = true;
-document.body.prepend(input2);
-
-step_timeout(() => {
-    assert_equals(document.activeElement, input1);
-    assert_not_equals(document.activeElement, input2);
-
-    done();
-}, 100);
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, input1);
+  assert_not_equals(document.activeElement, input2);
+}, 'The temporally first autofocus in the document wins, even if an element is inserted later that is previous in the document tree.');
 </script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/first-when-later.html b/testing/web-platform/tests/html/semantics/forms/autofocus/first-when-later.html
@@ -6,22 +6,21 @@
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
 
 <input autofocus>
 
 <script>
 "use strict";
 
-const input1 = document.querySelector("input");
+promise_test(async () => {
+  const input1 = document.querySelector("input");
+  const input2 = document.createElement("input");
+  input2.autofocus = true;
+  document.body.appendChild(input2);
 
-const input2 = document.createElement("input");
-input2.autofocus = true;
-document.body.appendChild(input2);
-
-step_timeout(() => {
-    assert_equals(document.activeElement, input1);
-    assert_not_equals(document.activeElement, input2);
-
-    done();
-}, 100);
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, input1);
+  assert_not_equals(document.activeElement, input2);
+}, 'The first autofocus in the document wins, even if elements are inserted later.');
 </script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/first.html b/testing/web-platform/tests/html/semantics/forms/autofocus/first.html
@@ -6,19 +6,19 @@
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
 
 <input autofocus>
 <input autofocus>
 
 <script>
 "use strict";
 
-const [input1, input2] = document.querySelectorAll("input");
+promise_test(async () => {
+  const [input1, input2] = document.querySelectorAll("input");
 
-step_timeout(() => {
+  await waitUntilStableAutofocusState();
   assert_equals(document.activeElement, input1);
   assert_not_equals(document.activeElement, input2);
-
-  done();
-}, 100);
+}, 'The first autofocus element in the document should win.');
 </script>
diff --git a/...ing/web-platform/tests/html/semantics/forms/autofocus/focusable-area-in-top-document.html b/...ing/web-platform/tests/html/semantics/forms/autofocus/focusable-area-in-top-document.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<iframe srcdoc="<input><script>document.querySelector('input').focus();</script>"></iframe>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  await waitForLoad(window);
+  let iframe = document.querySelector('iframe');
+  assert_equals(document.activeElement, iframe, 'Prereq: IFRAME should be focused');
+
+  let input = document.createElement('input');
+  input.autofocus = true;
+  document.body.appendChild(input);
+
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, iframe, 'activeElement should not be changed');
+  assert_not_equals(document.activeElement, input);
+}, 'If topDocument\'s focused area is not topDocument, autofocus is not processed.');
+</script>
diff --git a/...ng/web-platform/tests/html/semantics/forms/autofocus/no-sandboxed-automatic-features.html b/...ng/web-platform/tests/html/semantics/forms/autofocus/no-sandboxed-automatic-features.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<iframe sandbox srcdoc="<input autofocus>"></iframe>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  await waitForLoad(window);
+  await waitUntilStableAutofocusState();
+  assert_not_equals(document.activeElement, document.querySelector('iframe'));
+}, 'If the sandboxed automatic features browsing context flag is set, ' +
+    'autofocus in the browsing context should not be handled.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/queue-non-focusable.html b/testing/web-platform/tests/html/semantics/forms/autofocus/queue-non-focusable.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<textarea autofocus disabled></textarea>
+<select autofocus></select>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  const [textarea, select] = document.querySelectorAll('[autofocus]');
+  textarea.disabled = false;
+
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, textarea);
+  assert_not_equals(document.activeElement, select);
+}, 'If the first autofocus element is not focusable, but becomes focusable before a frame, it should be focused.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/resources/erase-first.css b/testing/web-platform/tests/html/semantics/forms/autofocus/resources/erase-first.css
@@ -0,0 +1,3 @@
+#first {
+  display: none;
+}
diff --git a/...platform/tests/html/semantics/forms/autofocus/resources/frame-with-autofocus-element.html b/...platform/tests/html/semantics/forms/autofocus/resources/frame-with-autofocus-element.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<body>
+<div id="anchor1"></div>
+<input autofocus>
+</body>
diff --git a/...b-platform/tests/html/semantics/forms/autofocus/resources/moving-autofocus-to-parent.html b/...b-platform/tests/html/semantics/forms/autofocus/resources/moving-autofocus-to-parent.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+<script>
+const input = document.createElement('input');
+input.autofocus = true;
+document.body.appendChild(input);
+input.autofocus = false;
+window.opener.document.body.appendChild(input);
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/resources/utils.js b/testing/web-platform/tests/html/semantics/forms/autofocus/resources/utils.js
@@ -6,6 +6,19 @@ function waitForEvent(target, type, options) {
   });
 }
 
+function waitForAnimationFrame(w) {
+  let targetWindow = w || window;
+  return new Promise((resolve, reject) => {
+    targetWindow.requestAnimationFrame(resolve);
+  });
+}
+
+function waitForEvent(target, type, options) {
+  return new Promise((resolve, reject) => {
+    target.addEventListener(type, resolve, options);
+  });
+}
+
 function waitForLoad(target) {
   return waitForEvent(target, 'load');
 }
@@ -21,7 +34,9 @@ function timeOut(test, ms) {
 // function.
 // Exception: If the document has script-blocking style sheets, this function
 // doesn't work well.
-async function waitUntilStableAutofocusState(test) {
-  // TODO: Update this for https://github.com/web-platform-tests/wpt/pull/17929
-  await timeOut(test, 100);
+async function waitUntilStableAutofocusState(w) {
+  let targetWindow = w || window;
+  // Awaiting two animation frames is an easy way to determine autofocus state.
+  await waitForAnimationFrame(targetWindow);
+  await waitForAnimationFrame(targetWindow);
 }
diff --git a/...latform/tests/html/semantics/forms/autofocus/skip-another-top-level-browsing-context.html b/...latform/tests/html/semantics/forms/autofocus/skip-another-top-level-browsing-context.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+<script>
+'use strict';
+
+promise_test(async () => {
+  let w = window.open('resources/moving-autofocus-to-parent.html');
+  await waitForLoad(w);
+  await waitUntilStableAutofocusState(w);
+  assert_equals(w.document.activeElement, w.document.body);
+  assert_equals(document.activeElement, document.body);
+  w.close();
+}, 'Autofocus elements queued in another top-level browsing context\'s ' +
+   'documents should be skipped.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/skip-document-with-fragment.html b/testing/web-platform/tests/html/semantics/forms/autofocus/skip-document-with-fragment.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<iframe src="resources/frame-with-autofocus-element.html#anchor1"></iframe>
+<iframe src="resources/frame-with-autofocus-element.html#non-existent-anchor"></iframe>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  await waitForLoad(window);
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, document.body,
+      'Autofocus elements in iframes should not be focused.');
+
+  let input = document.createElement('input');
+  input.autofocus = true;
+  document.body.appendChild(input);
+  await waitUntilStableAutofocusState();
+  assert_equals(document.activeElement, input);
+}, 'Autofocus elements in iframed documents with URL fragments should be skipped.');
+
+promise_test(async () => {
+  let w = window.open('resources/frame-with-autofocus-element.html#xpointer(//body)');
+  await waitForLoad(w);
+  await waitUntilStableAutofocusState(w);
+  assert_equals(w.document.activeElement, w.document.body);
+  w.close();
+}, 'Autofocus elements in top-level browsing context\'s documents with URI fragments should be skipped.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/skip-non-focusable.html b/testing/web-platform/tests/html/semantics/forms/autofocus/skip-non-focusable.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<textarea autofocus disabled></textarea>
+<select autofocus></select>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  const [textarea, select] = document.querySelectorAll('[autofocus]');
+
+  await waitUntilStableAutofocusState();
+  assert_not_equals(document.activeElement, textarea);
+  assert_equals(document.activeElement, select);
+}, 'Non-focusable autofocus element is skipped.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/skip-not-fully-active.html b/testing/web-platform/tests/html/semantics/forms/autofocus/skip-not-fully-active.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<iframe srcdoc="<input autofocus><script>window.frameElement.remove();</script>"></iframe>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  let iframe = document.querySelector('iframe');
+  let iframeDocument = iframe.contentDocument;
+  await waitForLoad(window);
+  assert_not_equals(document.activeElement, iframe);
+  assert_equals(iframeDocument.activeElement, iframeDocument.body);
+}, 'Autofocus element in not-fully-active document should be skipped.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/spin-by-blocking-style-sheet.html b/testing/web-platform/tests/html/semantics/forms/autofocus/spin-by-blocking-style-sheet.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+<link rel="stylesheet" href="resources/erase-first.css?pipe=trickle(d1)">
+
+<input id="first" autofocus>
+<input id="second" autofocus>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  await waitForEvent(document.body, 'focus', {capture:true});
+  assert_equals(document.activeElement.id, 'second');
+}, 'Script-blocking style sheet should pause flushing autofocus candidates.');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/autofocus/supported-elements.html b/testing/web-platform/tests/html/semantics/forms/autofocus/supported-elements.html
@@ -11,7 +11,7 @@
   await waitForLoad(w);
   t.add_cleanup(() => { w.close(); });
   w.document.body.innerHTML = '<div contenteditable=true autofocus></div>';
-  await waitUntilStableAutofocusState(t);
+  await waitUntilStableAutofocusState(w);
   assert_equals(w.document.activeElement.tagName, 'DIV');
 }, 'Contenteditable element should support autofocus');
 
@@ -20,7 +20,7 @@
   await waitForLoad(w);
   t.add_cleanup(() => { w.close(); });
   w.document.body.innerHTML = '<span tabindex=0></span>';
-  await waitUntilStableAutofocusState(t);
+  await waitUntilStableAutofocusState(w);
   assert_equals(w.document.activeElement.tagName, 'SPAN');
 }, 'Element with tabindex should support autofocus');
 
@@ -31,7 +31,7 @@
   let element = w.document.createElementNS('uri1', 'prefix:local');
   element.setAttribute('autofocus', '');
   w.document.body.appendChild(element);
-  await waitUntilStableAutofocusState(t);
+  await waitUntilStableAutofocusState(w);
   assert_equals(w.document.activeElement.tagName, 'BODY');
 }, 'Non-HTMLElement should not support autofocus');
 </script>