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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html

Issue 216543002: Revert of Remove applyAuthorStyles flag from ShadowRoot. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 8 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/TestExpectations ('k') | LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles-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 <html>
3 <head>
4 <script src="../../../resources/js-test.js"></script>
5 <script src="../../dom/shadow/resources/shadow-dom.js"></script>
6 <script>
7 shouldBeDefined("window.internals");
8
9 var borderColor;
10
11 function borderColorShouldBe(node, color)
12 {
13 borderColor = document.defaultView.getComputedStyle(node, null).getPropertyV alue('border-color');
14 shouldBeEqualToString('borderColor', color);
15 }
16
17 function cleanUp()
18 {
19 document.getElementById('sandbox').innerHTML = '';
20 }
21
22 function testBasic()
23 {
24 debug('test a scoped style in document is applied to a node in shadow dom su btree when apply-author-styles is true.');
25 document.getElementById('sandbox').appendChild(
26 createDOM('div', {},
27 createDOM('style', {'scoped': 'scoped'},
28 document.createTextNode('div { border: 1px solid red; }')),
29 createDOM('div', {'id': 'host'},
30 createShadowRoot(
31 createDOM('div', {'id': 'target'})))));
32
33 // before
34 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
35 borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(0, 0, 0)');
36
37 // after
38 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
39 borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(255, 0, 0)');
40
41 cleanUp();
42 }
43
44 function testEnclosingShadow()
45 {
46 debug('test a style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true.');
47 document.getElementById('sandbox').appendChild(
48 createDOM('div', {'id': 'host'},
49 createShadowRoot(
50 createDOM('style', {},
51 document.createTextNode('div { border: 1px solid red; }')),
52 createDOM('div', {'id': 'enclosed'},
53 createShadowRoot(
54 createDOM('div', {'id': 'target'}))))));
55
56 // before
57 getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = false;
58 borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(0, 0, 0)');
59
60 // after
61 getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = true;
62 borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(255, 0, 0)');
63
64 cleanUp();
65 }
66
67 function testEnclosingShadowWithScoped()
68 {
69 debug('test a scoped style in an enclosing shadow dom tree is applied to a n ode in shadow subtree when apply-author-styles is true and the node is in the sc ope.');
70 document.getElementById('sandbox').appendChild(
71 createDOM('div', {'id': 'host'},
72 createShadowRoot(
73 createDOM('div', {},
74 createDOM('style', {'scoped': 'scoped'},
75 document.createTextNode('div { border: 1px solid red; }' )),
76 createDOM('div', {'id': 'outerInScope'},
77 createShadowRoot(
78 createDOM('div', {'id': 'targetInScope'})))),
79 createDOM('div', {'id': 'outerOutOfScope'},
80 createShadowRoot(
81 createDOM('div', {'id': 'targetOutOfScope'}))))));
82
83
84 // before
85 getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = false;
86 getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = false;
87
88 borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(0, 0, 0)');
89 borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfSc ope'), 'rgb(0, 0, 0)');
90
91 // after
92 getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = true;
93 getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = true;
94 borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(255, 0, 0)');
95 borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfSc ope'), 'rgb(0, 0, 0)');
96
97 cleanUp();
98 }
99
100 function testNestedShadow()
101 {
102 debug('test styles declared in enclosing shadow trees should be applied to a n enclosed shadow tree whose apply-atur-styles is true.');
103 document.getElementById('sandbox').appendChild(
104 createDOM('div',
105 createDOM('style', {'scoped': 'scoped'},
106 document.createTextNode('div { border: 1px solid red; }')),
107 createDOM('div', {'id': 'host'},
108 createShadowRoot(
109 createDOM('style', {},
110 document.createTextNode('div { border: 1px solid blue; } ')),
111 createDOM('div', {'id': 'outerMost'},
112 createShadowRoot(
113 createDOM('div', {'id': 'outer'},
114 createShadowRoot(
115 createDOM('div', {'id': 'target'})))))))));
116
117 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
118 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = false;
119 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = false;
120
121 // No styles should be applied.
122 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(0, 0, 0)');
123
124 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;
125 // A style in document should be applied.
126 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(0, 0, 255)');
127
128 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;
129 // Not depend on apply-author-styles flags of parent shadow trees.
130 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(0, 0, 255)');
131
132 cleanUp();
133 }
134
135 function testMultipleShadow()
136 {
137 debug('test a style in document is applied to nodes in multiple shadow subtr ees when apply-author-styles is true.');
138 document.getElementById('sandbox').appendChild(
139 createDOM('div', {'id': 'host'},
140 createShadowRoot(
141 createDOM('shadow', {}),
142 createDOM('div', {'id': 'oldestShadow'})),
143 createShadowRoot(
144 createDOM('style', {'scoped': 'scoped'},
145 document.createTextNode('div { border: 1px solid blue }')),
146 createDOM('shadow', {}),
147 createDOM('div', {'id': 'olderShadow'})),
148 createShadowRoot(
149 createDOM('shadow', {}),
150 createDOM('div', {'id': 'target'})),
151
152 createDOM('style', {'scoped': 'scoped'},
153 document.createTextNode('div { border: 1px solid red; }')),
154 createDOM('div', {})));
155
156 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
157 getNodeInTreeOfTrees('host//').applyAuthorStyles = false;
158 getNodeInTreeOfTrees('host///').applyAuthorStyles = false;
159
160 // before
161 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0) ');
162 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 25 5)');
163 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
164
165 // document ---+--- oldestShadow
166 // |
167 // +--- olderShadow
168 // |
169 // +--- shadow
170
171 // apply-author-styles affects between shadow and document.
172 getNodeInTreeOfTrees('host///').applyAuthorStyles = true;
173 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0) ');
174 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 25 5)');
175 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(255, 0, 0)') ;
176
177 // apply-author-styles affects between older shadow and document.
178 getNodeInTreeOfTrees('host///').applyAuthorStyles = false;
179 getNodeInTreeOfTrees('host//').applyAuthorStyles = true;
180 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0) ');
181 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 25 5)');
182 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
183
184 // apply-author-styles affects between oldest shadow and document.
185 getNodeInTreeOfTrees('host//').applyAuthorStyles = false;
186 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
187 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(255, 0, 0)');
188 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 25 5)');
189 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
190
191 cleanUp();
192 }
193
194 function testOrderOfApplyStyle()
195 {
196 debug('test a style is applied in document order.');
197
198 document.getElementById('sandbox').appendChild(
199 createDOM('div', {},
200 createDOM('style', {'scoped': 'scoped'},
201 document.createTextNode('div { border: 1px solid red }')),
202 createDOM('div', {'id': 'host'},
203 createShadowRoot(
204 createDOM('style', {},
205 document.createTextNode('div { border: 1px solid blue; } ')),
206 createDOM('div', {'id': 'outerMost'},
207 createShadowRoot(
208 createDOM('style', {},
209 document.createTextNode('div { border: 1px solid green; }')),
210 createDOM('div', {'id': 'outer'},
211 createShadowRoot(
212 createDOM('style', {},
213 document.createTextNode('div { border: 1 px solid yellow; }')),
214 createDOM('div', {'id': 'target'})))))))));
215
216 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
217 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;
218 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;
219
220 // The last scoped style should be applied.
221 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(255, 255, 0)');
222
223 getNodeInTreeOfTrees('host/outerMost/outer/').innerHTML = '<div id="target"> target</div>';
224 // The outer's scoped style should be applied.
225 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(0, 128, 0)');
226
227 cleanUp();
228 }
229
230 function runTests() {
231 testBasic();
232 testEnclosingShadow();
233 testEnclosingShadowWithScoped();
234 testNestedShadow();
235 testMultipleShadow();
236 testOrderOfApplyStyle();
237 }
238 </script>
239 </head>
240 <body onload="runTests()">
241 <div id='sandbox'></div>
242 </body>
243 </html>
OLDNEW
« no previous file with comments | « LayoutTests/TestExpectations ('k') | LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698