| OLD | NEW |
|---|
| (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 textColor; |
| 10 |
| 11 function shouldHaveTextColor(node, col) |
| 12 { |
| 13 textColor = document.defaultView.getComputedStyle(node, null).getPropertyVal
ue('color'); |
| 14 shouldBeEqualToString('textColor', col); |
| 15 } |
| 16 |
| 17 function cleanUp() |
| 18 { |
| 19 document.getElementById('sandbox').innerHTML = ''; |
| 20 } |
| 21 |
| 22 function testScopedStyle() |
| 23 { |
| 24 debug('test a scoped style in shadow tree.'); |
| 25 document.getElementById('sandbox').appendChild( |
| 26 createDOM('div', {'id': 'host'}, |
| 27 createShadowRoot( |
| 28 createDOM('div', {}, |
| 29 createDOM('style', {'scoped': 'scoped'}, |
| 30 document.createTextNode('div { color: red; }')), |
| 31 createDOM('div', {'id': 'E'})), |
| 32 createDOM('div', {'id': 'F'})))); |
| 33 |
| 34 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 35 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 36 cleanUp(); |
| 37 } |
| 38 |
| 39 function testStyle() |
| 40 { |
| 41 debug('test a style in shadow tree.'); |
| 42 document.getElementById('sandbox').appendChild( |
| 43 createDOM('div', {'id': 'host'}, |
| 44 createShadowRoot( |
| 45 createDOM('div', {}, |
| 46 createDOM('div', {'id': 'E'}, |
| 47 createDOM('style', {}, |
| 48 document.createTextNode('div { color: red; }')))), |
| 49 createDOM('div', {'id': 'F'})))); |
| 50 |
| 51 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 52 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)'); |
| 53 cleanUp(); |
| 54 } |
| 55 |
| 56 function testStyleWithMultipleShadowRoots() |
| 57 { |
| 58 debug('test styles in multiple shadow trees.'); |
| 59 |
| 60 document.getElementById('sandbox').appendChild( |
| 61 createDOM('div', {'id': 'host'}, |
| 62 createShadowRoot( |
| 63 createDOM('div', {}, |
| 64 createDOM('style', {}, |
| 65 document.createTextNode('div { color: red; }')), |
| 66 createDOM('div', {'id': 'E'})), |
| 67 createDOM('div', {'id': 'F'})), |
| 68 |
| 69 createShadowRoot( |
| 70 createDOM('div', {}, |
| 71 createDOM('style', {'scoped': 'scoped'}, |
| 72 document.createTextNode('div { color: blue; }')), |
| 73 createDOM('shadow', {}), |
| 74 createDOM('div', {'id': 'G'}))))); |
| 75 |
| 76 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 77 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)'); |
| 78 shouldHaveTextColor(getNodeInTreeOfTrees('host//G'), 'rgb(0, 0, 255)'); |
| 79 cleanUp(); |
| 80 } |
| 81 |
| 82 function testScopedStyleWithNestedShadowRoots() |
| 83 { |
| 84 debug('test a scoped style in nested shadow tree.'); |
| 85 document.getElementById('sandbox').appendChild( |
| 86 createDOM('div', {'id': 'host'}, |
| 87 createShadowRoot( |
| 88 createDOM('div', {}, |
| 89 createDOM('style', {'scoped': 'scoped'}, |
| 90 document.createTextNode('div { color: red; }')), |
| 91 createDOM('div', {'id': 'E'}, |
| 92 createShadowRoot( |
| 93 createDOM('div', {}, |
| 94 createDOM('style', {'scoped': 'scoped'}, |
| 95 document.createTextNode('div { color: blue;
}')), |
| 96 createDOM('div', {'id': 'G'})), |
| 97 createDOM('div', {'id': 'H'})))), |
| 98 createDOM('div', {'id': 'F'})))); |
| 99 |
| 100 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 101 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 102 shouldHaveTextColor(getNodeInTreeOfTrees('host/E/G'), 'rgb(0, 0, 255)'); |
| 103 shouldHaveTextColor(getNodeInTreeOfTrees('host/E/H'), 'rgb(255, 0, 0)'); |
| 104 cleanUp(); |
| 105 } |
| 106 |
| 107 function testStyleWithNestedShadowRoots() |
| 108 { |
| 109 debug('test a style in nested shadow tree.'); |
| 110 document.getElementById('sandbox').appendChild( |
| 111 createDOM('div', {'id': 'host'}, |
| 112 createShadowRoot( |
| 113 createDOM('div', {}, |
| 114 createDOM('style', {}, |
| 115 document.createTextNode('div { color: red; }')), |
| 116 createDOM('div', {'id': 'E'}, |
| 117 createShadowRoot( |
| 118 createDOM('div', {}, |
| 119 createDOM('style', {}, |
| 120 document.createTextNode('div { color: blue;
}')), |
| 121 createDOM('div', {'id': 'G'})), |
| 122 createDOM('div', {'id': 'H'})))), |
| 123 createDOM('div', {'id': 'F'})))); |
| 124 |
| 125 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 126 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)'); |
| 127 shouldHaveTextColor(getNodeInTreeOfTrees('host/E/G'), 'rgb(0, 0, 255)'); |
| 128 shouldHaveTextColor(getNodeInTreeOfTrees('host/E/H'), 'rgb(0, 0, 255)'); |
| 129 cleanUp(); |
| 130 } |
| 131 |
| 132 function testChangeScopedAttributeOnline() |
| 133 { |
| 134 debug('test changing scoped attribute online.'); |
| 135 document.getElementById('sandbox').appendChild( |
| 136 createDOM('div', {'id': 'host'}, |
| 137 createShadowRoot( |
| 138 createDOM('div', {}, |
| 139 createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scop
ed'}, |
| 140 document.createTextNode('div { color: red; }')), |
| 141 createDOM('div', {'id': 'E'})), |
| 142 createDOM('div', {'id': 'F'})))); |
| 143 |
| 144 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 145 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 146 document.body.offsetLeft; |
| 147 |
| 148 // changing from scoped to scoped. |
| 149 getNodeInTreeOfTrees('host/style-in-shadow').setAttribute('scoped', 'scoped'
); |
| 150 |
| 151 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 152 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 153 |
| 154 // removing scoped. |
| 155 getNodeInTreeOfTrees('host/style-in-shadow').removeAttribute('scoped'); |
| 156 |
| 157 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 158 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)'); |
| 159 |
| 160 // changing from not scoped to scoped. |
| 161 getNodeInTreeOfTrees('host/style-in-shadow').setAttribute('scoped', 'scoped'
); |
| 162 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 163 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 164 cleanUp(); |
| 165 } |
| 166 |
| 167 function testRemoveScopedStyle() |
| 168 { |
| 169 debug('test removing a scoped style from shadow tree.'); |
| 170 document.getElementById('sandbox').appendChild( |
| 171 createDOM('div', {'id': 'host'}, |
| 172 createShadowRoot( |
| 173 createDOM('div', {}, |
| 174 createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scop
ed'}, |
| 175 document.createTextNode('div { color: red; }')), |
| 176 createDOM('div', {'id': 'E'})), |
| 177 createDOM('div', {'id': 'F'})))); |
| 178 |
| 179 // before |
| 180 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 181 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 182 |
| 183 var styleInShadow = getNodeInTreeOfTrees('host/style-in-shadow'); |
| 184 styleInShadow.parentNode.removeChild(styleInShadow); |
| 185 |
| 186 // after |
| 187 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(0, 0, 0)'); |
| 188 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 189 cleanUp(); |
| 190 } |
| 191 |
| 192 function testRemoveStyle() |
| 193 { |
| 194 debug('test removing a style from shadow tree.'); |
| 195 document.getElementById('sandbox').appendChild( |
| 196 createDOM('div', {'id': 'host'}, |
| 197 createShadowRoot( |
| 198 createDOM('div', {}, |
| 199 createDOM('style', {'id': 'style-in-shadow'}, |
| 200 document.createTextNode('div { color: red; }')), |
| 201 createDOM('div', {'id': 'E'})), |
| 202 createDOM('div', {'id': 'F'})))); |
| 203 |
| 204 // before |
| 205 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 206 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)'); |
| 207 |
| 208 var styleInShadow = getNodeInTreeOfTrees('host/style-in-shadow'); |
| 209 styleInShadow.parentNode.removeChild(styleInShadow); |
| 210 |
| 211 // after |
| 212 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(0, 0, 0)'); |
| 213 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 214 cleanUp(); |
| 215 } |
| 216 |
| 217 function testInsertScopedStyle() |
| 218 { |
| 219 debug('test inserting a scoped style into shadow tree.'); |
| 220 document.getElementById('sandbox').appendChild( |
| 221 createDOM('div', {'id': 'host'}, |
| 222 createShadowRoot( |
| 223 createDOM('div', {'id': 'D'}, |
| 224 createDOM('div', {'id': 'E'})), |
| 225 createDOM('div', {'id': 'F'})))); |
| 226 |
| 227 var style = document.createElement('style'); |
| 228 style.innerHTML = 'div { color: red; }'; |
| 229 style.setAttribute('scoped', 'scoped'); |
| 230 getNodeInTreeOfTrees('host/D').appendChild(style); |
| 231 |
| 232 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 233 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 234 cleanUp(); |
| 235 } |
| 236 |
| 237 function testInsertStyle() |
| 238 { |
| 239 debug('test inserting a style into shadow tree.'); |
| 240 document.getElementById('sandbox').appendChild( |
| 241 createDOM('div', {'id': 'host'}, |
| 242 createShadowRoot( |
| 243 createDOM('div', {'id': 'D'}, |
| 244 createDOM('div', {'id': 'E'})), |
| 245 createDOM('div', {'id': 'F'})))); |
| 246 |
| 247 var style = document.createElement('style'); |
| 248 style.innerHTML = 'div { color: red; }'; |
| 249 getNodeInTreeOfTrees('host/D').appendChild(style); |
| 250 |
| 251 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 252 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)'); |
| 253 cleanUp(); |
| 254 } |
| 255 |
| 256 function testChangeScopedAttributeOffline() |
| 257 { |
| 258 debug('test re-inserting a style after changing scoped attribute offline.'); |
| 259 document.getElementById('sandbox').appendChild( |
| 260 createDOM('div', {'id': 'host'}, |
| 261 createShadowRoot( |
| 262 createDOM('div', {'id': 'D'}, |
| 263 createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scop
ed'}, |
| 264 document.createTextNode('div { color: red; }')), |
| 265 createDOM('div', {'id': 'E'})), |
| 266 createDOM('div', {'id': 'F'})))); |
| 267 |
| 268 var style = getNodeInTreeOfTrees('host/style-in-shadow'); |
| 269 style.parentNode.removeChild(style); |
| 270 style.removeAttribute('scoped'); |
| 271 getNodeInTreeOfTrees('host/D').appendChild(style); |
| 272 |
| 273 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 274 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)'); |
| 275 |
| 276 style.parentNode.removeChild(style); |
| 277 style.setAttribute('scoped', 'scoped'); |
| 278 getNodeInTreeOfTrees('host/D').appendChild(style); |
| 279 |
| 280 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)'); |
| 281 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)'); |
| 282 cleanUp(); |
| 283 } |
| 284 |
| 285 function runTests() |
| 286 { |
| 287 testScopedStyle(); |
| 288 testStyle(); |
| 289 testStyleWithMultipleShadowRoots(); |
| 290 testScopedStyleWithNestedShadowRoots(); |
| 291 testStyleWithNestedShadowRoots(); |
| 292 testChangeScopedAttributeOnline(); |
| 293 testRemoveScopedStyle(); |
| 294 testRemoveStyle(); |
| 295 testInsertScopedStyle(); |
| 296 testInsertStyle(); |
| 297 testChangeScopedAttributeOffline(); |
| 298 } |
| 299 </script> |
| 300 </head> |
| 301 <body onload="runTests()"> |
| 302 <div id='sandbox'></div> |
| 303 </body> |
| 304 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 317143002:
Revert of Remove scoped styles. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk