| Index: third_party/WebKit/LayoutTests/fast/dom/shadow/tabindex-slot.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/dom/shadow/tabindex-slot.html b/third_party/WebKit/LayoutTests/fast/dom/shadow/tabindex-slot.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..d5f73ce1691ac4f854143238b1ce5149cc213efb
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/dom/shadow/tabindex-slot.html
|
| @@ -0,0 +1,89 @@
|
| +<!DOCTYPE html>
|
| +<script src='../../../resources/testharness.js'></script>
|
| +<script src='../../../resources/testharnessreport.js'></script>
|
| +<script src='resources/shadow-dom.js'></script>
|
| +<div id="log"></div>
|
| +<p>
|
| + document tree: [i0 -> [x-foo]]<br>
|
| + x-foo's shadow tree: [j5 -> [x-bar] -> j6]<br>
|
| + x-bar's shadow tree: [k1 -> k0 -> [s2]]<br>
|
| + slot #s2: [j1 -> j2 -> j3 -> j4 -> [s1] -> j0]<br><br>
|
| + slot #s1: [i1 -> i2]<br>
|
| + <b>v1 ideal nav forward: [i0 -> j5 -> xbar -> k1 -> k0 -> j1 -> j2 -> j3 -> j4 -> i1 -> i2 -> j0 -> j6]</b><br>
|
| +</p>
|
| +
|
| + <input id="i0" tabindex=0 value="i0">
|
| + <div id="x-foo">
|
| + <input id="i2" slot="s1" tabindex=2 value="i2">
|
| + <input id="i1" slot="s1" tabindex=1 value="i1">
|
| + <template data-mode="open">
|
| + <div id="x-bar" tabindex=4>
|
| + <input id="j1" slot="s2" tabindex=1 value="j1">
|
| + <slot id="s1" name="s1" slot="s2"></slot>
|
| + <input id="j0" slot="s2" tabindex=0 value="j0">
|
| + <input id="j3" slot="s2" tabindex=2 value="j3">
|
| + <div id="j4" slot="s2" tabindex=3>
|
| + <input id="j2" tabindex=1 value="j2">
|
| + </div>
|
| + <template data-mode="open">
|
| + <input id="k0" tabindex=0 value="k0">
|
| + <slot id="s2" name="s2"></slot>
|
| + <input id="k1" tabindex=1 value="k1">
|
| + </template>
|
| + </div>
|
| + <input id="j6" tabindex=4 value="j6">
|
| + <input id="j5" tabindex=3 value="j5">
|
| + </template>
|
| + </div>
|
| +</div>
|
| +
|
| +<script>
|
| +
|
| +function shouldCustomNavigateFocus(from, to, direction)
|
| +{
|
| + var fromElement = getNodeInComposedTree(from);
|
| + if (!fromElement) {
|
| + return;
|
| + }
|
| + fromElement.focus();
|
| + if (!isInnermostActiveElement(from)) {
|
| + return;
|
| + }
|
| + if (direction == 'forward')
|
| + navigateFocusForward();
|
| + else
|
| + navigateFocusBackward();
|
| + return isInnermostActiveElement(to);
|
| +}
|
| +
|
| +test(function() {
|
| + var xfoo = document.getElementById('x-foo');
|
| + convertTemplatesToShadowRootsWithin(xfoo);
|
| + var sr = xfoo.shadowRoot;
|
| + var xbar = sr.querySelector('div');
|
| + convertTemplatesToShadowRootsWithin(xbar);
|
| +
|
| + var elements = [
|
| + 'i0',
|
| + 'x-foo/j5',
|
| + 'x-foo/x-bar',
|
| + 'x-foo/x-bar/k1',
|
| + 'x-foo/x-bar/k0',
|
| + 'x-foo/j1',
|
| + 'x-foo/j2',
|
| + 'x-foo/j3',
|
| + 'x-foo/j4',
|
| + 'i1',
|
| + 'i2',
|
| + 'x-foo/j0',
|
| + 'x-foo/j6'
|
| + ];
|
| +
|
| + for (var i = 0; i + 1 < elements.length; ++i)
|
| + assert_true(shouldCustomNavigateFocus(elements[i], elements[i + 1], 'forward'), elements[i]+" to "+ elements[i+1]);
|
| + elements.reverse();
|
| + for (var i = 0; i + 1 < elements.length; ++i)
|
| + assert_true(shouldCustomNavigateFocus(elements[i], elements[i + 1], 'backward'), elements[i]+" to "+ elements[i+1]);
|
| +}, 'Focus controller should treat slots as a focus scope.');
|
| +
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 1707443003:
Consider slots as a focus scope (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master