Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(66)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/shadow/tabindex-slot.html

Issue 1707443003: Consider slots as a focus scope (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Refactoring in response to review comments Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« third_party/WebKit/LayoutTests/fast/dom/shadow/focus-navigation-with-multiple-shadow-roots.html ('K') | « third_party/WebKit/LayoutTests/fast/dom/shadow/focus-navigation-with-multiple-shadow-roots-expected.txt ('k') | third_party/WebKit/Source/core/core.gypi » ('j') | third_party/WebKit/Source/core/core.gypi » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <script src='../../../resources/testharness.js'></script>
3 <script src='../../../resources/testharnessreport.js'></script>
4 <script src='resources/shadow-dom.js'></script>
5 <div id="log"></div>
6 <p>
7 <pre> &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<spa n class="pl-s">i0</span> <span class="pl-e">tabindex</span>=<span class="pl-s">0 </span>&gt;&lt;/<span class="pl-ent">input</span>&gt;
8 &lt;<span class="pl-ent">x</span><span class="pl-e">-foo</span>&gt;
9 &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span c lass="pl-s">i2</span> <span class="pl-e">slot</span>=<span class="pl-s">s1</span > <span class="pl-e">tabindex</span>=<span class="pl-s">2</span>&gt;&lt;/<span c lass="pl-ent">input</span>&gt;
10 &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span c lass="pl-s">i1</span> <span class="pl-e">slot</span>=<span class="pl-s">s1</span > <span class="pl-e">tabindex</span>=<span class="pl-s">1</span>&gt;&lt;/<span c lass="pl-ent">input</span>&gt;
11 &lt;/<span class="pl-ent">x</span><span class="pl-e">-foo</span>&gt;</pre>
12 x-foo's shadow tree:
13 <pre> &lt;<span class="pl-ent">x</span><span class="pl-e">-bar</span> <span class="pl-e">tabindex</span>=<span class="pl-s">4</span>&gt;
14 &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span c lass="pl-s">j1</span> <span class="pl-e">slot</span>=<span class="pl-s">s2</span > <span class="pl-e">tabindex</span>=<span class="pl-s">1</span>&gt;&lt;/<span c lass="pl-ent">input</span>&gt;
15 &lt;<span class="pl-ent">slot</span> <span class="pl-e">id</span>=<span cl ass="pl-s">s1</span> <span class="pl-e">name</span>=<span class="pl-s">s1</span> <span class="pl-e">slot</span>=<span class="pl-s">s2</span>&gt;&lt;/<span class ="pl-ent">slot</span>&gt;
16 &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span c lass="pl-s">j0</span> <span class="pl-e">slot</span>=<span class="pl-s">s2</span > <span class="pl-e">tabindex</span>=<span class="pl-s">0</span>&gt;&lt;/<span c lass="pl-ent">input</span>&gt;
17 &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span c lass="pl-s">j2</span> <span class="pl-e">slot</span>=<span class="pl-s">s2</span > <span class="pl-e">tabindex</span>=<span class="pl-s">2</span>&gt;&lt;/<span c lass="pl-ent">input</span>&gt;
18 &lt;/<span class="pl-ent">x</span><span class="pl-e">-bar</span>&gt;
19 &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span cla ss="pl-s">j4</span> <span class="pl-e">tabindex</span>=<span class="pl-s">4</spa n>&gt;&lt;/<span class="pl-ent">input</span>&gt;
20 &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span cla ss="pl-s">j3</span> <span class="pl-e">tabindex</span>=<span class="pl-s">3</spa n>&gt;&lt;/<span class="pl-ent">input</span>&gt;</pre>
21 x-bar's shadow tree:
22 <pre> &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<s pan class="pl-s">k0</span> <span class="pl-e">tabindex</span>=<span class="pl-s" >0</span>&gt;&lt;/<span class="pl-ent">input</span>&gt;
23 &lt;<span class="pl-ent">slot</span> <span class="pl-e">id</span>=<span clas s="pl-s">s2</span> <span class="pl-e">name</span>=<span class="pl-s">s2</span>&g t;&lt;/<span class="pl-ent">slot</span>&gt;
24 &lt;<span class="pl-ent">input</span> <span class="pl-e">id</span>=<span cla ss="pl-s">k1</span> <span class="pl-e">tabindex</span>=<span class="pl-s">1</spa n>&gt;&lt;/<span class="pl-ent">input</span>&gt;</pre>
25 document tree: [i0 -> [x-foo]]<br>
26 x-foo's shadow tree: [j3 -> [x-bar] -> j4]<br>
27 slot #s1: [i1 -> i2]<br>
28 x-bar's shadow tree: [k1 -> k0 -> [s2]]<br>
29 slot #s2: [j1 -> j2 -> [s1] -> j0]<br><br>
30 <em>old nav forward: [i1 -> i2 -> i0 -> j1 -> j2 -> j3 -> k1 -> k0 -> j4 -> j 0]</em><br>
31 <b>v1 ideal nav forward: [i0 -> j3 -> xbar -> k1 -> k0 -> j1 -> j2 -> i1 -> i 2 -> j0 -> j4]</b><br>
32 </p>
33
34 <input id="i0" tabindex=0 value="i0">
35 <div id="x-foo">
36 <div id="test"></div>
37 <input id="i2" slot="s1" tabindex=2 value="i2">
38 <input id="i1" slot="s1" tabindex=1 value="i1">
39 <template data-mode="open">
40 <div id="x-bar" tabindex=4>
41 <input id="j1" slot="s2" tabindex=1 value="j1">
42 <slot id="s1" name="s1" slot="s2"></slot>
43 <input id="j0" slot="s2" tabindex=0 value="j0">
44 <input id="j2" slot="s2" tabindex=2 value="j2">
45 <template data-mode="open">
46 <input id="k0" tabindex=0 value="k0">
47 <slot id="s2" name="s2"></slot>
48 <input id="k1" tabindex=1 value="k1">
49 </template>
50 </div>
51 <input id="j4" tabindex=4 value="j4">
52 <input id="j3" tabindex=3 value="j3">
53 </template>
54 </div>
55 </div>
56
57 <script>
58
59 function shouldCustomNavigateFocus(from, to, direction)
60 {
61 var fromElement = getNodeInComposedTree(from);
62 if (!fromElement) {
63 return;
64 }
65 fromElement.focus();
66 if (!isInnermostActiveElement(from)) {
67 return;
68 }
69 if (direction == 'forward')
70 navigateFocusForward();
71 else
72 navigateFocusBackward();
73 return isInnermostActiveElement(to);
74 }
75
76 test(function() {
77 var xfoo = document.getElementById('x-foo');
78 var i0 = document.getElementById('i0');
79 convertTemplatesToShadowRootsWithin(xfoo);
80 var sr = xfoo.shadowRoot;
81 var xbar = sr.querySelector('div');
82 convertTemplatesToShadowRootsWithin(xbar);
83
84 var elements = [
85 'i0',
86 'x-foo/j3',
87 'x-foo/x-bar',
88 'x-foo/x-bar/k1',
89 'x-foo/x-bar/k0',
90 'x-foo/j1',
91 'x-foo/j2',
92 'i1',
93 'i2',
94 'x-foo/j0',
95 'x-foo/j4'
96 ];
97
98 for (var i = 0; i + 1 < elements.length; ++i)
99 assert_true(shouldCustomNavigateFocus(elements[i], elements[i + 1], 'forwa rd'), "yo");
100 elements.reverse();
101 for (var i = 0; i + 1 < elements.length; ++i)
102 assert_true(shouldCustomNavigateFocus(elements[i], elements[i + 1], 'backw ard'), "yoooo");
103 }, 'Focus controller should treat slots as a focus scope.');
104
105 </script>
OLDNEW
« third_party/WebKit/LayoutTests/fast/dom/shadow/focus-navigation-with-multiple-shadow-roots.html ('K') | « third_party/WebKit/LayoutTests/fast/dom/shadow/focus-navigation-with-multiple-shadow-roots-expected.txt ('k') | third_party/WebKit/Source/core/core.gypi » ('j') | third_party/WebKit/Source/core/core.gypi » ('J')

Powered by Google App Engine
This is Rietveld 408576698