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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1177673005: Implement ShadowRoot.delegatesFocus 4/4 (match CSS :focus for shadow host) (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: fix for comments Created 5 years, 6 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4-expected.txt ('k') | 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 backgroundColorOf(selector) {
18 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol or;
19 }
20
21 function backgroundColorShouldBe(selector, expected) {
22 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);
23 }
24
25 function buildNestedDistributionTree(delegatesFocus1, delegatesFocus2) {
26 var sandbox = document.querySelector('#sandbox');
27 sandbox.innerHTML = '';
28 sandbox.appendChild(
29 createDOM('div', {},
30 createDOM('input', {'id': 'outer-input'}),
31 createDOM('div', {'id': 'shadow-host'},
32 createDOM('input', {'id': 'input1'}),
33 createShadowRoot(
34 {'delegatesFocus': delegatesFocus1},
35 createDOM('style', {},
36 document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
37 createDOM('input', {'id': 'input2'}),
38 createDOM('div', {'id': 'inner-shadow-host'},
39 createDOM('content', {}), // #input1 goes here
40 createShadowRoot(
41 {'delegatesFocus': delegatesFocus2},
42 createDOM('content', {}), // #input1 redistributed here, #input2 goes here.
43 createDOM('input', {'id': 'input3'})))))));
44
45 sandbox.offsetTop;
46 }
47
48 function testNestedDistribution() {
49 debug('testing nested distribution');
50
51 buildNestedDistributionTree(false, false);
52
53 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
54
55 var outerInput = getNodeInTreeOfTrees('outer-input');
56 var input1 = getNodeInTreeOfTrees('input1');
57 var input2 = getNodeInTreeOfTrees('shadow-host/input2');
58 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3');
59
60 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.');
61
62 debug('(1/4) top and inner shadow do not delegate focus.');
63 outerInput.focus();
64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
65 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
66
67 input1.focus();
68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
70
71 input2.focus();
72 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
73 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
74
75 input3.focus();
76 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
77 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
78
79 debug('(2/4) top shadow delegates, but inner shadow does not.');
80 buildNestedDistributionTree(true, false);
81
82 var outerInput = getNodeInTreeOfTrees('outer-input');
83 var input1 = getNodeInTreeOfTrees('input1');
84 var input2 = getNodeInTreeOfTrees('shadow-host/input2');
85 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3');
86
87 outerInput.focus();
88 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
90
91 input1.focus();
92 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
93 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
94
95 input2.focus();
96 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
97 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
98
99 input3.focus();
100 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
101 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
102
103 debug('(3/4) top shadow does not delegate, but inner shadow does.');
104 buildNestedDistributionTree(false, true);
105
106 var outerInput = getNodeInTreeOfTrees('outer-input');
107 var input1 = getNodeInTreeOfTrees('input1');
108 var input2 = getNodeInTreeOfTrees('shadow-host/input2');
109 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3');
110
111 outerInput.focus();
112 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
113 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
114
115 input1.focus();
116 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
117 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
118
119 input2.focus();
120 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
121 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
122
123 input3.focus();
124 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
125 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
126
127 debug('(4/4) both shadow hosts delagate focus.');
128 buildNestedDistributionTree(true, true);
129
130 var outerInput = getNodeInTreeOfTrees('outer-input');
131 var input1 = getNodeInTreeOfTrees('input1');
132 var input2 = getNodeInTreeOfTrees('shadow-host/input2');
133 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3');
134
135 outerInput.focus();
136 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
137 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
138
139 input1.focus();
140 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
142
143 input2.focus();
144 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
145 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
146
147 input3.focus();
148 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
149 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
150 }
151
152 testNestedDistribution();
153 </script>
OLDNEW
« no previous file with comments | « LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4-expected.txt ('k') | 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