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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host5.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-host3-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host5-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 buildNestedDistributionTree(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 createDOM('input', {'id': 'input1'}),
25 attachShadow(
26 {'mode': 'open', 'delegatesFocus': delegatesFocus1},
27 createDOM('style', {},
28 document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
29 createDOM('input', {'id': 'input2'}),
30 createDOM('div', {'id': 'inner-shadow-host'},
31 createDOM('slot', {}), // #input1 goes here
32 attachShadow(
33 {'mode': 'open', 'delegatesFocus': delegatesFocus2},
34 createDOM('slot', {}), // #input1 redistributed her e, #input2 goes here.
35 createDOM('input', {'id': 'input3'})))))));
36
37 sandbox.offsetTop;
38 }
39
40 function testNestedDistribution() {
41 debug('testing nested distribution');
42
43 buildNestedDistributionTree(false, false);
44
45 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
46
47 var outerInput = getNodeInComposedTree('outer-input');
48 var input1 = getNodeInComposedTree('input1');
49 var input2 = getNodeInComposedTree('shadow-host/input2');
50 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');
51
52 debug('#input1, #input2 are (re)distributed in the same treescope as #input3 , but :focus on shadow host only matches when a focused element is under its sha dow tree.');
53
54 debug('(1/4) top and inner shadow do not delegate focus.');
55 outerInput.focus();
56 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
57 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
58
59 input1.focus();
60 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
61 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
62
63 input2.focus();
64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
65 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
66
67 input3.focus();
68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
70
71 debug('(2/4) top shadow delegates, but inner shadow does not.');
72 buildNestedDistributionTree(true, false);
73
74 var outerInput = getNodeInComposedTree('outer-input');
75 var input1 = getNodeInComposedTree('input1');
76 var input2 = getNodeInComposedTree('shadow-host/input2');
77 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');
78
79 outerInput.focus();
80 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
81 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
82
83 input1.focus();
84 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
85 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
86
87 input2.focus();
88 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
90
91 input3.focus();
92 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
93 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
94
95 debug('(3/4) top shadow does not delegate, but inner shadow does.');
96 buildNestedDistributionTree(false, true);
97
98 var outerInput = getNodeInComposedTree('outer-input');
99 var input1 = getNodeInComposedTree('input1');
100 var input2 = getNodeInComposedTree('shadow-host/input2');
101 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');
102
103 outerInput.focus();
104 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
105 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
106
107 input1.focus();
108 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
109 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
110
111 input2.focus();
112 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
113 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
114
115 input3.focus();
116 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
117 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
118
119 debug('(4/4) both shadow hosts delagate focus.');
120 buildNestedDistributionTree(true, true);
121
122 var outerInput = getNodeInComposedTree('outer-input');
123 var input1 = getNodeInComposedTree('input1');
124 var input2 = getNodeInComposedTree('shadow-host/input2');
125 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');
126
127 outerInput.focus();
128 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
129 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
130
131 input1.focus();
132 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
133 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
134
135 input2.focus();
136 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
137 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
138
139 input3.focus();
140 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
142 }
143
144 testNestedDistribution();
145 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host5-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698