Move focus-navigation tests to WPT

The current state of test_driver.send_keys and content_shell doesn't allow sequential focus navigation [1]. The current plan is to copy the existing focus-navigation tests to WPT at web_tests/external/wpt/shadow-dom/focus-navigation/ and keep the content_shell tests at web_tests/shadow-dom/focus-navigation/ for test coverage. In the future, once [2] is resolved and we can run WPT test in chrome, we can remove the duplicated tests that depends on the content_shell in web_tests/shadow-dom/focus-navigation/ and enable the web_tests/external/wpt/shadow-dom/focus-navigation/ tests. [1] whatwg/html#4151 [2] crbug.com/893480 Change-Id: Ib4232494162e19110dfb785034712d56d3ff9491 Bug: 769673, 893480
web-platform-tests · Aug 10, 2022 · 3ebded7 · 3ebded7
1 parent 1ddd7a3
commit 3ebded7
Show file tree

Hide file tree

Showing 24 changed files with 2,074 additions and 0 deletions.
diff --git a/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html b/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<script src="resources/focus-utils.js"></script>
+<!-- Adapted from http://jsbin.com/dexinu/6/edit for layout test -->
+
+<template id='XMenuTemplate'>
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      background-color: #aaa;
+    }
+    :host(:focus) {
+      background-color: #ccc;
+    }
+    li {
+      display: inline-block;
+      position: relative;
+      background-color: #eee;
+    }
+    li:focus {
+      background-color: #fff;
+    }
+  </style>
+  <li tabindex='0'>Item One</li>
+  <li tabindex='0'>Item Two</li>
+  <li tabindex='0'>Item Three</li>
+</template>
+
+<section>
+  <x-menu id='XMenu1' tabindex='0'></x-menu>
+</section>
+<section>
+  <x-menu id='XMenu2' tabindex='0' delegatesFocus></x-menu>
+  <x-menu id='XMenu3' tabindex='0' delegatesFocus></x-menu>
+</section>
+<section>
+  <x-menu id='XMenu4' tabindex='0' delegatesFocus></x-menu>
+</section>
+
+<script>
+'use strict';
+
+const template = document.querySelector('#XMenuTemplate');
+
+customElements.define('x-menu', class extends HTMLElement {
+    connectedCallback() {
+        const delegatesFocus = this.hasAttribute('delegatesFocus');
+        this.attachShadow({mode: 'open', delegatesFocus: delegatesFocus})
+            .appendChild(document.importNode(template.content, true));
+    }
+});
+
+promise_test(async () => {
+    let xmenu1 = document.getElementById('XMenu1');
+
+    xmenu1.focus();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, 'XMenu1');
+    assert_background_color('XMenu1', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusForward();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, 'XMenu2');
+    await assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    await assert_background_color('XMenu2', 'rgb(204, 204, 204)');
+    await assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    await assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusForward();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, 'XMenu3');
+    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusForward();
+    await navigateFocusForward();
+    await navigateFocusForward();
+    assert_equals(document.activeElement.id, 'XMenu4');
+    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu4', 'rgb(204, 204, 204)');
+
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    assert_equals(document.activeElement.id, 'XMenu3');
+    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    assert_equals(document.activeElement.id, 'XMenu2');
+    assert_background_color('XMenu1', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu2', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    await navigateFocusBackward();
+    assert_equals(document.activeElement.id, 'XMenu1');
+    assert_background_color('XMenu1', 'rgb(204, 204, 204)');
+    assert_background_color('XMenu2', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu3', 'rgb(170, 170, 170)');
+    assert_background_color('XMenu4', 'rgb(170, 170, 170)');
+}, 'crbug/474687 :focus style should properly be applied to shadow hosts.');
+</script>
diff --git a/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex.html b/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<script src="resources/focus-utils.js"></script>
+<p>Tests for moving focus by pressing tab key across shadow boundaries.<br>
+To manually test, press tab key six times then shift+tab seven times.<br>
+It should traverse focusable elements in the increasing numerical order and then in the reverse order.</p>
+
+<div id='host'>
+  <div slot='slot5' id='i2' tabindex=4>2. Assigned to slot5 whose tabindex is 2.</div>
+  <template data-mode='open'>
+    <slot name='slot1'>
+      x. The default tabindex for a slot node is set to 0.
+      <div id='i5' tabindex=0>5. The parent slot node's tabindex is 0. Second.</div>
+      <div id='i4' tabindex=2>4. The parent slot node's tabindex is 0. First.</div>
+    </slot>
+
+    <slot name='slot2' id='x1' tabindex=3>
+      x. The tabindex is 3. The slot node should be ignored.
+      <div id='i3' tabindex=10>3. The parent slot node's tabindex is 3. The slot node's tabindex matters. This element's tabindex comes after.</div>
+    </slot>
+
+    <slot name='slot3' id='x2' tabindex=0>
+      x. The tabindex is 0. The slot node should be ignored. If there is another slot node in same tabindex, the younger child comes first.
+      <div id='i6' tabindex=1>6. The parent slot node's tabindex is 0. First.</div>
+      <div id='i7' tabindex=1>7. The parent slot node's tabindex is 0. Second.</div>
+    </slot>
+
+    <slot name='slot4' id='x3' tabindex=1>
+      x. The tabindex is 1. The slot node should be ignored.
+      <div id='i1' tabindex=5>1. The slot node tabindex is 1.</div>
+    </slot>
+
+    <slot name='slot5' id='x5' tabindex=2>
+      x. The tabindex is 2. The slot node should be ignored. The host child is assigned to this slot node.
+      <div id='-' tabindex=1>-. The host child is assigned to the parent slot node. This text shouldn't apeare.</div>
+    </slot>
+
+    <slot name='slot6' id='x6' tabindex=5>
+      x. The tabindex is 5. The slot node should be ignored.
+      <div id='x6' tabindex=-1>x. tabindex is -1. Should be skipped.</div>
+    </slot>
+
+    <slot name='slot7' id='x7' tabindex=-1>
+      x. tabindex is -1. Should be skipped.
+      <div id='x8' tabindex=1>x. The parent slot node is skipped.</div>
+    </slot>
+  </template>
+</div>
+<script>
+
+promise_test(async () => {
+  convertTemplatesToShadowRootsWithin(host);
+
+  let elements = [
+    'host/i1',
+    'i2',
+    'host/i3',
+    'host/i4',
+    'host/i5',
+    'host/i6',
+    'host/i7'
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Default tabindex for a slot node should be 0.');
+
+</script>
diff --git a/shadow-dom/focus-navigation/focus-navigation-slot-fallback.html b/shadow-dom/focus-navigation/focus-navigation-slot-fallback.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<script src="resources/focus-utils.js"></script>
+<div id='log'></div>
+<p>
+  document tree: [i0 -> [x-foo]]<br>
+  x-foo's shadow tree: [j1 -> j2 -> [s1]]<br>
+  <b>slot #s1: [k1 -> [x-bar] -> k0 -> [s2] -> [s3]]</b><br>
+  x-bar's shadow tree: [m1 -> m2]<br>
+  slot #s2: [i1 -> i2]<br>
+  <b>slot #s3: [l1]<b><br><br>
+  <b>v1 ideal nav forward:  [i0 -> j1 -> j2 -> k1 -> x-bar -> m1 -> m2 -> k0 -> i1 -> i2 -> l1]</b><br>
+</p>
+
+<input id='i0' tabindex=0 value='i0'>
+<div id='x-foo'>
+  <input id='i2' slot='s2' tabindex=2 value='i2'>
+  <input id='i1' slot='s2' tabindex=1 value='i1'>
+  <template data-mode='open'>
+    <input id='j1' tabindex=1 value='j1'>
+    <slot id='s1' name='s1'> <!-- This slot does not have any assigned elements -->
+      <input id='k0' tabindex=0 value='k0'>
+      <input id='k1' tabindex=1 value='k1'>
+      <slot id='s2' name='s2'>
+        <input id='should-be-ignored'>
+      </slot>
+      <slot id='s3' name='s3'> <!-- This slot does not have any assigned elements -->
+        <input id='l1' value='l1'>
+      </slot>
+      <div id='x-bar' tabindex=2>
+        <template data-mode='open'>
+          <input id='m2' value='m2' tabindex=2>
+          <input id='m1' value='m1' tabindex=1>
+        </template>
+      </div>
+    </slot>
+    <input id='j2' tabindex=2 value='j2'>
+  </template>
+</div>
+
+<script>
+'use strict';
+
+promise_test(async () => {
+  let xfoo = document.getElementById('x-foo');
+  convertTemplatesToShadowRootsWithin(xfoo);
+
+  let elements = [
+      'i0',
+      'x-foo/j1',
+      'x-foo/j2',
+      'x-foo/k1',
+      'x-foo/x-bar',
+      'x-foo/x-bar/m1',
+      'x-foo/x-bar/m2',
+      'x-foo/k0',
+      'i1',
+      'i2',
+      'x-foo/l1'
+    ];
+
+    await assert_focus_navigation_forward(elements);
+    elements.reverse();
+    await assert_focus_navigation_backward(elements);
+}, 'Focus should jump to fallback elements when a slot does not have any assigned nodes.');
+</script>
diff --git a/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html b/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<script src="resources/focus-utils.js"></script>
+<div id="log"></div>
+
+<input id='i0'>
+<div id='outer'>
+  <template data-mode='open'>
+    <input id='outer-before'>
+    <slot></slot>
+    <input id='outer-after'>
+  </template>
+  <div id='dummy1'></div>
+  <div id='nested1'>
+    <template data-mode='open'>
+      <input id='inner-before'>
+      <button id='button'><slot></slot></button>
+      <input id='inner-after'>
+    </template>
+    <div id='dummy2'></div>
+    <div id='nested2'>
+      <template data-mode='open'>
+        <input id='innermost-before'>
+        <slot></slot>
+        <input id='innermost-after'>
+      </template>
+      <input id='innermost1'>
+      <input id='innermost2'>
+    </div>
+    <span>button</span>
+  </div>
+</div>
+<input id='i1'>
+
+<script>
+promise_test(async () => {
+  var outer = document.querySelector('#outer');
+  convertTemplatesToShadowRootsWithin(outer);
+
+  var elements = [
+    'i0',
+    'outer/outer-before',
+    'nested1/inner-before',
+    'nested1/button',
+    'nested2/innermost-before',
+    'innermost1',
+    'innermost2',
+    'nested2/innermost-after',
+    'nested1/inner-after',
+    'outer/outer-after',
+    'i1'
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Focus controller should treat each slot as a focus scope.');
+</script>
diff --git a/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus.html b/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<script src="resources/focus-utils.js"></script>
+<div id="log"></div>
+<!--
+This test case is based on the crbug.com/618587 reproduction case:
+http://jsbin.com/bonudiwagu/1/edit?html,output
+-->
+<input id='i0'>
+<div id='x-foo'>
+  <template data-mode='open' data-delegatesFocus>
+    <input id='inner-before'>
+    <slot></slot>
+    <input id='inner-after'>
+  </template>
+  <div id='nested'>
+    <template data-mode='open' data-delegatesFocus>
+      <input id='nested-x'>
+      <slot></slot>
+      <input id='nested-y'>
+    </template>
+    <input id='light'>
+  </div>
+</div>
+<input id='i1'>
+
+<script>
+promise_test(async () => {
+  var xFoo = document.querySelector('#x-foo');
+  convertTemplatesToShadowRootsWithin(xFoo);
+
+  var elements = [
+    'i0',
+    'x-foo/inner-before',
+    'nested/nested-x',
+    'light',
+    'nested/nested-y',
+    'x-foo/inner-after',
+    'i1'
+  ];
+
+  await assert_focus_navigation_forward(elements);
+  elements.reverse();
+  await assert_focus_navigation_backward(elements);
+}, 'Focus controller should treat each slot as a focus scope.');
+</script>