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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3.html

Issue 1774113002: Move Shadow DOM V1 tests from fast/dom/shadow to shadow-dom (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: . 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3-expected.txt » ('j') | no next file with comments »
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/js-test.js"></script>
3 <script src="resources/shadow-dom.js"></script>
4 <style>
5 div {
6 background-color: white;
7 }
8
9 div#shadow-host:focus {
10 background-color: green;
11 }
12 </style>
13 <body>
14 <div id="sandbox"></div>
15 </body>
16 <script>
17 function buildShadowComposedTree(delegatesFocus1, delegatesFocus2) {
18 var sandbox = document.querySelector('#sandbox');
19 sandbox.innerHTML = '';
20 sandbox.appendChild(
21 createDOM('div', {},
22 createDOM('input', {'id': 'outer-input'}),
23 createDOM('div', {'id': 'shadow-host'},
24 attachShadow(
25 {'mode': 'open', 'delegatesFocus': delegatesFocus1},
26 createDOM('style', {},
27 document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
28 createDOM('div', {'id': 'inner-div'},
29 document.createTextNode('Blink')),
30 createDOM('input', {'id': 'inner-input'}),
31 createDOM('div', {'id': 'inner-shadow-host'},
32 attachShadow(
33 {'mode': 'open', 'delegatesFocus': delegatesFocus2},
34 createDOM('div', {'id': 'inner-div2'},
35 document.createTextNode('Blink')),
36 createDOM('input', {'id': 'inner-input2'})))))));
37 sandbox.offsetTop;
38 }
39
40 function testShadowComposedTree() {
41 debug('testing shadow composed tree');
42
43 debug('(1/4) both shadow hosts\' delegateFocus are false');
44 buildShadowComposedTree(false, false);
45
46 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
47 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
48
49 var host = getNodeInComposedTree('shadow-host');
50 var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
51 var input = getNodeInComposedTree('shadow-host/inner-input');
52 var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-inpu t2');
53 var outerInput = document.querySelector('#outer-input');
54
55 input.focus()
56 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
57 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
58 input2.focus();
59 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
60 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
61 outerInput.focus();
62 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
63 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
64 host.focus(); // this isn't focusable.
65 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
66 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
67 innerHost.focus(); // this isn't focusable.
68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
70
71
72 debug('(2/4) top-level shadow host\'s delegateFocus is true');
73 buildShadowComposedTree(true, false);
74
75 var host = getNodeInComposedTree('shadow-host');
76 var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
77 var input = getNodeInComposedTree('shadow-host/inner-input');
78 var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-inpu t2');
79 var outerInput = document.querySelector('#outer-input');
80
81 input.focus()
82 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
83 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
84 input2.focus();
85 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
86 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
87 outerInput.focus();
88 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
90 host.focus();
91 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
92 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
93 innerHost.focus(); // this isn't focusable.
94 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
95 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
96
97
98 debug('(3/4) lower-level shadow host\'s delegateFocus is true');
99 buildShadowComposedTree(false, true);
100
101 var host = getNodeInComposedTree('shadow-host');
102 var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
103 var input = getNodeInComposedTree('shadow-host/inner-input');
104 var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-inpu t2');
105 var outerInput = document.querySelector('#outer-input');
106
107 input.focus()
108 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
109 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
110 input2.focus();
111 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
112 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
113 outerInput.focus();
114 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
115 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
116 host.focus(); // this isn't focusable.
117 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
118 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
119 innerHost.focus();
120 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
121 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
122
123
124 debug('(4/4) both shadow hosts\' delegateFocus are true');
125 buildShadowComposedTree(true, true);
126
127 var host = getNodeInComposedTree('shadow-host');
128 var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
129 var input = getNodeInComposedTree('shadow-host/inner-input');
130 var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-inpu t2');
131 var outerInput = document.querySelector('#outer-input');
132
133 input.focus()
134 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
135 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
136 input2.focus();
137 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
138 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
139 outerInput.focus();
140 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
142 host.focus();
143 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
144 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
145 innerHost.focus();
146 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
147 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
148 }
149
150 testShadowComposedTree();
151 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698