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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3.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-host2-expected.txt ('k') | 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 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 buildShadowTreeOfTrees(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 createShadowRoot(
33 {'delegatesFocus': delegatesFocus1},
34 createDOM('style', {},
35 document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
36 createDOM('div', {'id': 'inner-div'},
37 document.createTextNode('Blink')),
38 createDOM('input', {'id': 'inner-input'}),
39 createDOM('div', {'id': 'inner-shadow-host'},
40 createShadowRoot(
41 {'delegatesFocus': delegatesFocus2},
42 createDOM('div', {'id': 'inner-div2'},
43 document.createTextNode('Blink')),
44 createDOM('input', {'id': 'inner-input2'})))))));
45 sandbox.offsetTop;
46 }
47
48 function testShadowTreeOfTrees() {
49 debug('testing shadow tree of trees');
50
51 debug('(1/4) both shadow hosts\' delegateFocus are false');
52 buildShadowTreeOfTrees(false, false);
53
54 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
55 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
56
57 var host = getNodeInTreeOfTrees('shadow-host');
58 var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host');
59 var input = getNodeInTreeOfTrees('shadow-host/inner-input');
60 var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input 2');
61 var outerInput = document.querySelector('#outer-input');
62
63 input.focus()
64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
65 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
66 input2.focus();
67 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
68 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
69 outerInput.focus();
70 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
71 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
72 host.focus(); // this isn't focusable.
73 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
74 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
75 innerHost.focus(); // this isn't focusable.
76 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
77 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
78
79
80 debug('(2/4) top-level shadow host\'s delegateFocus is true');
81 buildShadowTreeOfTrees(true, false);
82
83 var host = getNodeInTreeOfTrees('shadow-host');
84 var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host');
85 var input = getNodeInTreeOfTrees('shadow-host/inner-input');
86 var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input 2');
87 var outerInput = document.querySelector('#outer-input');
88
89 input.focus()
90 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
91 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
92 input2.focus();
93 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
94 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
95 outerInput.focus();
96 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
97 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
98 host.focus();
99 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
100 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
101 innerHost.focus(); // this isn't focusable.
102 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
103 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
104
105
106 debug('(3/4) lower-level shadow host\'s delegateFocus is true');
107 buildShadowTreeOfTrees(false, true);
108
109 var host = getNodeInTreeOfTrees('shadow-host');
110 var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host');
111 var input = getNodeInTreeOfTrees('shadow-host/inner-input');
112 var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input 2');
113 var outerInput = document.querySelector('#outer-input');
114
115 input.focus()
116 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
117 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
118 input2.focus();
119 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
120 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
121 outerInput.focus();
122 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
123 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
124 host.focus(); // this isn't focusable.
125 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
126 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
127 innerHost.focus();
128 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
129 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
130
131
132 debug('(4/4) both shadow hosts\' delegateFocus are true');
133 buildShadowTreeOfTrees(true, true);
134
135 var host = getNodeInTreeOfTrees('shadow-host');
136 var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host');
137 var input = getNodeInTreeOfTrees('shadow-host/inner-input');
138 var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input 2');
139 var outerInput = document.querySelector('#outer-input');
140
141 input.focus()
142 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
143 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
144 input2.focus();
145 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
146 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
147 outerInput.focus();
148 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
149 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
150 host.focus();
151 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
152 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
153 innerHost.focus();
154 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
155 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
156 }
157
158 testShadowTreeOfTrees();
159 </script>
OLDNEW
« no previous file with comments | « LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2-expected.txt ('k') | 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