Skip to content

Commit

Permalink
Bug 1783746 [wpt PR 35387] - Move focus-navigation tests to WPT, a=te…
Browse files Browse the repository at this point in the history 
…stonly

Automatic update from web-platform-tests
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
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3817589
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Di Zhang <dizhangg@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1035097}

--

wpt-commits: eba8286502b4f9c0ea7ee6b6f3666ee630da0785
wpt-pr: 35387
  • Loading branch information
@dizhang168 @moz-wptsync-bot
dizhang168 authored and moz-wptsync-bot committed Sep 4, 2022
1 parent 805f82f commit 92d32c2
Show file tree
Hide file tree
Showing 23 changed files with 1,980 additions and 0 deletions.
126 changes: 126 additions & 0 deletions testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html
View file
Original file line number Diff line number Diff line change
@@ -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>
74 changes: 74 additions & 0 deletions ...rm/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback-default-tabindex.html
View file
Original file line number Diff line number Diff line change
@@ -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>
71 changes: 71 additions & 0 deletions testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-fallback.html
View file
Original file line number Diff line number Diff line change
@@ -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>
63 changes: 63 additions & 0 deletions .../web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html
View file
Original file line number Diff line number Diff line change
@@ -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>
51 changes: 51 additions & 0 deletions ...atform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-delegatesFocus.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 92d32c2

Please sign in to comment.