OLD | NEW |
1 <!DOCTYPE html> | 1 <!doctype html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../../js/resources/js-test-pre.js"></script> | 4 <script src="../../js/resources/js-test-pre.js"></script> |
| 5 <script src="../../dom/shadow/resources/shadow-dom.js"></script> |
5 <script> | 6 <script> |
6 if (window.testRunner) | |
7 testRunner.dumpAsText(); | |
8 | |
9 shouldBeDefined("window.internals"); | 7 shouldBeDefined("window.internals"); |
10 | 8 |
11 function dumpComputedStyle(node) | 9 var borderColor; |
| 10 |
| 11 function borderColorShouldBe(node, color) |
12 { | 12 { |
13 debug(node.id + ": " + document.defaultView.getComputedStyle(node, null).get
PropertyValue('border-color')); | 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 = ''; |
14 } | 20 } |
15 | 21 |
16 function testBasic() | 22 function testBasic() |
17 { | 23 { |
18 debug('test a scoped style in document is applied to a node in shadow dom su
btree when apply-author-styles is true.'); | 24 debug('test a scoped style in document is applied to a node in shadow dom su
btree when apply-author-styles is true.'); |
19 var div = document.createElement('div'); | 25 document.getElementById('sandbox').appendChild( |
20 div.innerHTML = '<div><style scoped>div { border: 1px solid red; }</style><d
iv id="host"></div></div>'; | 26 createDOM('div', {}, |
21 document.body.appendChild(div); | 27 createDOM('style', {'scoped': 'scoped'}, |
22 | 28 document.createTextNode('div { border: 1px solid red; }')), |
23 var shadow = document.getElementById("host").webkitCreateShadowRoot(); | 29 createDOM('div', {'id': 'host'}, |
24 shadow.innerHTML = '<div id="target">target</div>'; | 30 createShadowRoot( |
25 document.body.appendChild(div); | 31 createDOM('div', {'id': 'target'}))))); |
26 | 32 |
27 // before | 33 // before |
28 shadow.applyAuthorStyles = false; | 34 getNodeInShadowTreeStack('host/').applyAuthorStyles = false; |
29 dumpComputedStyle(shadow.getElementById("target")); | 35 borderColorShouldBe(getNodeInShadowTreeStack('host/target'), 'rgb(0, 0, 0)')
; |
30 | 36 |
31 // after | 37 // after |
32 shadow.applyAuthorStyles = true; | 38 getNodeInShadowTreeStack('host/').applyAuthorStyles = true; |
33 dumpComputedStyle(shadow.getElementById("target")); | 39 borderColorShouldBe(getNodeInShadowTreeStack('host/target'), 'rgb(255, 0, 0)
'); |
34 | 40 |
35 document.body.removeChild(div); | 41 cleanUp(); |
36 } | 42 } |
37 | 43 |
38 function testEnclosingShadow() | 44 function testEnclosingShadow() |
39 { | 45 { |
40 debug('test a style in an enclosing shadow dom tree is applied to a node in
shadow subtree when apply-author-styles is true.'); | 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.'); |
41 | 47 document.getElementById('sandbox').appendChild( |
42 var div = document.createElement('div'); | 48 createDOM('div', {'id': 'host'}, |
43 document.body.appendChild(div); | 49 createShadowRoot( |
44 | 50 createDOM('style', {}, |
45 var outerShadow = div.webkitCreateShadowRoot(); | 51 document.createTextNode('div { border: 1px solid red; }')), |
46 outerShadow.innerHTML = '<style>div { border: 1px solid red; }</style><div i
d="outer">outer</div>'; | 52 createDOM('div', {'id': 'enclosed'}, |
47 var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot(); | 53 createShadowRoot( |
48 shadow.innerHTML = '<div id="target">target</div>'; | 54 createDOM('div', {'id': 'target'})))))); |
49 | 55 |
50 // before | 56 // before |
51 shadow.applyAuthorStyles = false; | 57 getNodeInShadowTreeStack('host/enclosed/').applyAuthorStyles = false; |
52 dumpComputedStyle(shadow.getElementById("target")); | 58 borderColorShouldBe(getNodeInShadowTreeStack('host/enclosed/target'), 'rgb(0
, 0, 0)'); |
53 | 59 |
54 // after | 60 // after |
55 shadow.applyAuthorStyles = true; | 61 getNodeInShadowTreeStack('host/enclosed/').applyAuthorStyles = true; |
56 dumpComputedStyle(shadow.getElementById("target")); | 62 borderColorShouldBe(getNodeInShadowTreeStack('host/enclosed/target'), 'rgb(2
55, 0, 0)'); |
57 document.body.removeChild(div); | 63 |
| 64 cleanUp(); |
58 } | 65 } |
59 | 66 |
60 function testEnclosingShadowWithScoped() | 67 function testEnclosingShadowWithScoped() |
61 { | 68 { |
62 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.'); | 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'})))))); |
63 | 82 |
64 var div = document.createElement('div'); | |
65 document.body.appendChild(div); | |
66 | |
67 var outerShadow = div.webkitCreateShadowRoot(); | |
68 outerShadow.innerHTML = '<div><style scoped>div { border: 1px solid red; }</
style><div id="outerInScope">outerInScope</div></div><div id="outerOutOfScope">o
uterOutOfScope</div>'; | |
69 | |
70 var shadow1 = outerShadow.getElementById("outerInScope").webkitCreateShadowR
oot(); | |
71 shadow1.innerHTML = '<div id="targetInScope">targetInScope</div>'; | |
72 var shadow2 = outerShadow.getElementById("outerOutOfScope").webkitCreateShad
owRoot(); | |
73 shadow2.innerHTML = '<div id="targetOutOfScope">targetOutOfScope</div>'; | |
74 | 83 |
75 // before | 84 // before |
76 shadow1.applyAuthorStyles = false; | 85 getNodeInShadowTreeStack('host/outerInScope/').applyAuthorStyles = false; |
77 shadow2.applyAuthorStyles = false; | 86 getNodeInShadowTreeStack('host/outerOutOfScope/').applyAuthorStyles = false; |
78 dumpComputedStyle(shadow1.getElementById("targetInScope")); | 87 |
79 dumpComputedStyle(shadow2.getElementById("targetOutOfScope")); | 88 borderColorShouldBe(getNodeInShadowTreeStack('host/outerInScope/targetInScop
e'), 'rgb(0, 0, 0)'); |
| 89 borderColorShouldBe(getNodeInShadowTreeStack('host/outerOutOfScope/targetOut
OfScope'), 'rgb(0, 0, 0)'); |
80 | 90 |
81 // after | 91 // after |
82 shadow1.applyAuthorStyles = true; | 92 getNodeInShadowTreeStack('host/outerInScope/').applyAuthorStyles = true; |
83 shadow2.applyAuthorStyles = true; | 93 getNodeInShadowTreeStack('host/outerOutOfScope/').applyAuthorStyles = true; |
84 dumpComputedStyle(shadow1.getElementById("targetInScope")); | 94 borderColorShouldBe(getNodeInShadowTreeStack('host/outerInScope/targetInScop
e'), 'rgb(255, 0, 0)'); |
85 dumpComputedStyle(shadow2.getElementById("targetOutOfScope")); | 95 borderColorShouldBe(getNodeInShadowTreeStack('host/outerOutOfScope/targetOut
OfScope'), 'rgb(0, 0, 0)'); |
86 | 96 |
87 document.body.removeChild(div); | 97 cleanUp(); |
88 } | 98 } |
89 | 99 |
90 function testNestedShadow() | 100 function testNestedShadow() |
91 { | 101 { |
92 debug('test a style in a shadow subtree is applied to a node in its descenda
nt shadow subtree when all apply-author-styles in shadow subtrees between the sh
adow subtree and the descendant are true.'); | 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'}))))))))); |
93 | 116 |
94 var div = document.createElement('div'); | 117 getNodeInShadowTreeStack('host/').applyAuthorStyles = false; |
95 div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div id=
"host"></div>'; | 118 getNodeInShadowTreeStack('host/outerMost/').applyAuthorStyles = false; |
96 document.body.appendChild(div); | 119 getNodeInShadowTreeStack('host/outerMost/outer/').applyAuthorStyles = false; |
97 | |
98 var outerMostShadow = document.getElementById("host").webkitCreateShadowRoot
(); | |
99 outerMostShadow.innerHTML = '<style>div { border: 1px solid blue; }</style><
div id="outerMost">outerMost</div>'; | |
100 outerMostShadow.applyAuthorStyles = false; | |
101 | |
102 var outerShadow = outerMostShadow.getElementById("outerMost").webkitCreateSh
adowRoot(); | |
103 outerShadow.innerHTML = '<div id="outer">outer</div>'; | |
104 outerShadow.applyAuthorStyles = false; | |
105 | |
106 var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot(); | |
107 shadow.innerHTML = '<div id="target">target</div>'; | |
108 shadow.applyAuthorStyles = false; | |
109 | 120 |
110 // No styles should be applied. | 121 // No styles should be applied. |
111 dumpComputedStyle(shadow.getElementById("target")); | 122 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'),
'rgb(0, 0, 0)'); |
112 | 123 |
113 shadow.applyAuthorStyles = true; | 124 getNodeInShadowTreeStack('host/outerMost/outer/').applyAuthorStyles = true; |
114 // A style in document should be applied. | 125 // A style in document should be applied. |
115 dumpComputedStyle(shadow.getElementById("target")); | 126 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'),
'rgb(0, 0, 255)'); |
116 | 127 |
117 outerShadow.applyAuthorStyles = true | 128 getNodeInShadowTreeStack('host/outerMost/').applyAuthorStyles = true; |
118 // A style in 'outerMost' shadow should be applied. | 129 // Not depend on apply-author-styles flags of parent shadow trees. |
119 dumpComputedStyle(shadow.getElementById("target")); | 130 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'),
'rgb(0, 0, 255)'); |
120 | 131 |
121 document.body.removeChild(div); | 132 cleanUp(); |
122 } | 133 } |
123 | 134 |
124 function testMultipleShadow() | 135 function testMultipleShadow() |
125 { | 136 { |
126 debug('test a style in document is applied to nodes in multiple shadow subtr
ees when apply-author-styles is true.'); | 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'})), |
127 | 151 |
128 var div = document.createElement('div'); | 152 createDOM('style', {'scoped': 'scoped'}, |
129 div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div>tes
t</div>'; | 153 document.createTextNode('div { border: 1px solid red; }')), |
130 document.body.appendChild(div); | 154 createDOM('div', {}))); |
131 | 155 |
132 var oldestShadow = div.webkitCreateShadowRoot(); | 156 getNodeInShadowTreeStack('host/').applyAuthorStyles = false; |
133 oldestShadow.innerHTML = '<shadow></shadow><div id="oldestShadow">oldestShad
ow</div>'; | 157 getNodeInShadowTreeStack('host//').applyAuthorStyles = false; |
134 oldestShadow.applyAuthorStyles = false; | 158 getNodeInShadowTreeStack('host///').applyAuthorStyles = false; |
135 | |
136 var olderShadow = div.webkitCreateShadowRoot(); | |
137 olderShadow.innerHTML = '<style scoped>div { border: 1px solid blue }</style
><shadow></shadow><div id="olderShadow">olderShadow</div>'; | |
138 olderShadow.applyAuthorStyles = false; | |
139 | |
140 var shadow = div.webkitCreateShadowRoot(); | |
141 shadow.innerHTML = '<shadow></shadow><div id="target">shadow</div>'; | |
142 shadow.applyAuthorStyles = false; | |
143 | 159 |
144 // before | 160 // before |
145 dumpComputedStyle(oldestShadow.getElementById("oldestShadow")); | 161 borderColorShouldBe(getNodeInShadowTreeStack('host/oldestShadow'), 'rgb(0, 0
, 0)'); |
146 dumpComputedStyle(olderShadow.getElementById("olderShadow")); | 162 borderColorShouldBe(getNodeInShadowTreeStack('host//olderShadow'), 'rgb(0, 0
, 255)'); |
147 dumpComputedStyle(shadow.getElementById("target")); | 163 borderColorShouldBe(getNodeInShadowTreeStack('host///target'), 'rgb(0, 0, 0)
'); |
148 | 164 |
149 // document ---+--- oldestShadow | 165 // document ---+--- oldestShadow |
150 // | | 166 // | |
151 // +--- olderShadow | 167 // +--- olderShadow |
152 // | | 168 // | |
153 // +--- shadow | 169 // +--- shadow |
154 | 170 |
155 // apply-author-styles affects between shadow and document. | 171 // apply-author-styles affects between shadow and document. |
156 shadow.applyAuthorStyles = true; | 172 getNodeInShadowTreeStack('host///').applyAuthorStyles = true; |
157 dumpComputedStyle(oldestShadow.getElementById("oldestShadow")); | 173 borderColorShouldBe(getNodeInShadowTreeStack('host/oldestShadow'), 'rgb(0, 0
, 0)'); |
158 dumpComputedStyle(olderShadow.getElementById("olderShadow")); | 174 borderColorShouldBe(getNodeInShadowTreeStack('host//olderShadow'), 'rgb(0, 0
, 255)'); |
159 dumpComputedStyle(shadow.getElementById("target")); | 175 borderColorShouldBe(getNodeInShadowTreeStack('host///target'), 'rgb(255, 0,
0)'); |
160 | 176 |
161 // apply-author-styles affects between older shadow and document. | 177 // apply-author-styles affects between older shadow and document. |
162 shadow.applyAuthorStyles = false; | 178 getNodeInShadowTreeStack('host///').applyAuthorStyles = false; |
163 olderShadow.applyAuthorStyles = true; | 179 getNodeInShadowTreeStack('host//').applyAuthorStyles = true; |
164 dumpComputedStyle(oldestShadow.getElementById("oldestShadow")); | 180 borderColorShouldBe(getNodeInShadowTreeStack('host/oldestShadow'), 'rgb(0, 0
, 0)'); |
165 dumpComputedStyle(olderShadow.getElementById("olderShadow")); | 181 borderColorShouldBe(getNodeInShadowTreeStack('host//olderShadow'), 'rgb(0, 0
, 255)'); |
166 dumpComputedStyle(shadow.getElementById("target")); | 182 borderColorShouldBe(getNodeInShadowTreeStack('host///target'), 'rgb(0, 0, 0)
'); |
167 | 183 |
168 // apply-author-styles affects between oldest shadow and document. | 184 // apply-author-styles affects between oldest shadow and document. |
169 olderShadow.applyAuthorStyles = false; | 185 getNodeInShadowTreeStack('host//').applyAuthorStyles = false; |
170 oldestShadow.applyAuthorStyles = true; | 186 getNodeInShadowTreeStack('host/').applyAuthorStyles = true; |
171 dumpComputedStyle(oldestShadow.getElementById("oldestShadow")); | 187 borderColorShouldBe(getNodeInShadowTreeStack('host/oldestShadow'), 'rgb(255,
0, 0)'); |
172 dumpComputedStyle(olderShadow.getElementById("olderShadow")); | 188 borderColorShouldBe(getNodeInShadowTreeStack('host//olderShadow'), 'rgb(0, 0
, 255)'); |
173 dumpComputedStyle(shadow.getElementById("target")); | 189 borderColorShouldBe(getNodeInShadowTreeStack('host///target'), 'rgb(0, 0, 0)
'); |
174 | 190 |
175 document.body.removeChild(div); | 191 cleanUp(); |
176 } | 192 } |
177 | 193 |
178 function testOrderOfApplyStyle() | 194 function testOrderOfApplyStyle() |
179 { | 195 { |
180 debug('test a style is applied in document order.'); | 196 debug('test a style is applied in document order.'); |
181 | 197 |
182 var div = document.createElement('div'); | 198 document.getElementById('sandbox').appendChild( |
183 div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div id=
"host"></div>'; | 199 createDOM('div', {}, |
184 document.body.appendChild(div); | 200 createDOM('style', {'scoped': 'scoped'}, |
185 | 201 document.createTextNode('div { border: 1px solid red }')), |
186 var outerMostShadow = document.getElementById("host").webkitCreateShadowRoot
(); | 202 createDOM('div', {'id': 'host'}, |
187 outerMostShadow.innerHTML = '<style>div { border: 1px solid blue; }</style><
div id="outerMost">outerMost</div>'; | 203 createShadowRoot( |
188 outerMostShadow.applyAuthorStyles = true; | 204 createDOM('style', {}, |
189 | 205 document.createTextNode('div { border: 1px solid blue; }
')), |
190 var outerShadow = outerMostShadow.getElementById("outerMost").webkitCreateSh
adowRoot(); | 206 createDOM('div', {'id': 'outerMost'}, |
191 outerShadow.innerHTML = '<style>div { border: 1px solid green; }</style><div
id="outer">outer</div>'; | 207 createShadowRoot( |
192 outerShadow.applyAuthorStyles = true; | 208 createDOM('style', {}, |
193 | 209 document.createTextNode('div { border: 1px solid
green; }')), |
194 var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot(); | 210 createDOM('div', {'id': 'outer'}, |
195 shadow.innerHTML = '<style>div { border: 1px solid yellow; }</style><div id=
"target">target</div>'; | 211 createShadowRoot( |
196 shadow.applyAuthorStyles = true; | 212 createDOM('style', {}, |
| 213 document.createTextNode('div { border: 1
px solid yellow; }')), |
| 214 createDOM('div', {'id': 'target'}))))))))); |
| 215 |
| 216 getNodeInShadowTreeStack('host/').applyAuthorStyles = true; |
| 217 getNodeInShadowTreeStack('host/outerMost/').applyAuthorStyles = true; |
| 218 getNodeInShadowTreeStack('host/outerMost/outer/').applyAuthorStyles = true; |
197 | 219 |
198 // The last scoped style should be applied. | 220 // The last scoped style should be applied. |
199 dumpComputedStyle(shadow.getElementById("target")); | 221 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'),
'rgb(255, 255, 0)'); |
200 | 222 |
201 shadow.innerHTML = '<div id="target">target</div>'; | 223 getNodeInShadowTreeStack('host/outerMost/outer/').innerHTML = '<div id="targ
et">target</div>'; |
202 // The outer's scoped style should be applied. | 224 // The outer's scoped style should be applied. |
203 dumpComputedStyle(shadow.getElementById("target")); | 225 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'),
'rgb(0, 128, 0)'); |
204 | 226 |
205 document.body.removeChild(div); | 227 cleanUp(); |
206 } | 228 } |
207 | 229 |
208 function runTests() { | 230 function runTests() { |
209 testBasic(); | 231 testBasic(); |
210 testEnclosingShadow(); | 232 testEnclosingShadow(); |
211 testEnclosingShadowWithScoped(); | 233 testEnclosingShadowWithScoped(); |
212 testNestedShadow(); | 234 testNestedShadow(); |
213 testMultipleShadow(); | 235 testMultipleShadow(); |
214 testOrderOfApplyStyle(); | 236 testOrderOfApplyStyle(); |
215 } | 237 } |
216 | |
217 </script> | 238 </script> |
218 </head> | 239 </head> |
219 <body onload="runTests()"> | 240 <body onload="runTests()"> |
220 <script src="../../js/resources/js-test-post.js"></script> | 241 <div id='sandbox'></div> |
221 </body> | 242 </body> |
| 243 <script src="../../js/resources/js-test-post.js"></script> |
222 </html> | 244 </html> |
OLD | NEW |