| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="resources/shadow-dom.js"></script> | 4 <script src="resources/shadow-dom.js"></script> |
| 5 <script src="../../../resources/js-test.js"></script> | 5 <script src="../../../resources/js-test.js"></script> |
| 6 </head> | 6 </head> |
| 7 <body> | 7 <body> |
| 8 <div id='sandbox'> | 8 <div id='sandbox'> |
| 9 </div> | 9 </div> |
| 10 </body> | 10 </body> |
| 11 <script> | 11 <script> |
| 12 var borderColor; | 12 var borderColor; |
| 13 | 13 |
| 14 function colorOf(node) | 14 function colorOf(node) |
| 15 { | 15 { |
| 16 return document.defaultView.getComputedStyle(node, null).getPropertyValue('c
olor'); | 16 return document.defaultView.getComputedStyle(node, null).getPropertyValue('c
olor'); |
| 17 } | 17 } |
| 18 | 18 |
| 19 function colorShouldBe(selector, color) | 19 function colorShouldBe(selector, color) |
| 20 { | 20 { |
| 21 var text = 'colorOf(getNodeInTreeOfTrees("' + selector + '"))'; | 21 var text = 'colorOf(getNodeInComposedTree("' + selector + '"))'; |
| 22 shouldBeEqualToString(text, color); | 22 shouldBeEqualToString(text, color); |
| 23 } | 23 } |
| 24 | 24 |
| 25 function colorShouldNotBe(selector, color) | 25 function colorShouldNotBe(selector, color) |
| 26 { | 26 { |
| 27 var text = 'colorOf(getNodeInTreeOfTrees("' + selector + '"))'; | 27 var text = 'colorOf(getNodeInComposedTree("' + selector + '"))'; |
| 28 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"")
+ '"'; | 28 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"")
+ '"'; |
| 29 shouldNotBe(text, unevaledString); | 29 shouldNotBe(text, unevaledString); |
| 30 } | 30 } |
| 31 | 31 |
| 32 function cleanUp() | 32 function cleanUp() |
| 33 { | 33 { |
| 34 document.getElementById('sandbox').innerHTML = ''; | 34 document.getElementById('sandbox').innerHTML = ''; |
| 35 } | 35 } |
| 36 | 36 |
| 37 description('crbug.com/337573: Test direct/indirect adjucent and positinal rules
under shadow root.'); | 37 description('crbug.com/337573: Test direct/indirect adjucent and positinal rules
under shadow root.'); |
| 38 | 38 |
| 39 sandbox.appendChild( | 39 sandbox.appendChild( |
| 40 createDOM('div', {'id': 'host'}, | 40 createDOM('div', {'id': 'host'}, |
| 41 createShadowRoot( | 41 createShadowRoot( |
| 42 createDOM('style', {}, | 42 createDOM('style', {}, |
| 43 document.createTextNode('#child1.target + #child2 { color: green
}')), | 43 document.createTextNode('#child1.target + #child2 { color: green
}')), |
| 44 createDOM('div', {'id': 'child1'}, | 44 createDOM('div', {'id': 'child1'}, |
| 45 document.createTextNode('first div')), | 45 document.createTextNode('first div')), |
| 46 createDOM('div', {'id': 'child2'}, | 46 createDOM('div', {'id': 'child2'}, |
| 47 document.createTextNode('second div'))))); | 47 document.createTextNode('second div'))))); |
| 48 document.body.offsetLeft; | 48 document.body.offsetLeft; |
| 49 getNodeInTreeOfTrees('host/child1').className = 'target'; | 49 getNodeInComposedTree('host/child1').className = 'target'; |
| 50 colorShouldBe('host/child2', 'rgb(0, 128, 0)'); | 50 colorShouldBe('host/child2', 'rgb(0, 128, 0)'); |
| 51 | 51 |
| 52 cleanUp(); | 52 cleanUp(); |
| 53 | 53 |
| 54 sandbox.appendChild( | 54 sandbox.appendChild( |
| 55 createDOM('div', {'id': 'host'}, | 55 createDOM('div', {'id': 'host'}, |
| 56 createShadowRoot( | 56 createShadowRoot( |
| 57 createDOM('style', {}, | 57 createDOM('style', {}, |
| 58 document.createTextNode('#child1.target ~ div { color: green }')
), | 58 document.createTextNode('#child1.target ~ div { color: green }')
), |
| 59 createDOM('div', {'id': 'child1'}, | 59 createDOM('div', {'id': 'child1'}, |
| 60 document.createTextNode('first div')), | 60 document.createTextNode('first div')), |
| 61 createDOM('div', {'id': 'child2'}, | 61 createDOM('div', {'id': 'child2'}, |
| 62 document.createTextNode('second div')), | 62 document.createTextNode('second div')), |
| 63 createDOM('div', {'id': 'child3'}, | 63 createDOM('div', {'id': 'child3'}, |
| 64 document.createTextNode('third div'))))); | 64 document.createTextNode('third div'))))); |
| 65 document.body.offsetLeft; | 65 document.body.offsetLeft; |
| 66 getNodeInTreeOfTrees('host/child1').className = 'target'; | 66 getNodeInComposedTree('host/child1').className = 'target'; |
| 67 colorShouldBe('host/child2', 'rgb(0, 128, 0)'); | 67 colorShouldBe('host/child2', 'rgb(0, 128, 0)'); |
| 68 colorShouldBe('host/child3', 'rgb(0, 128, 0)'); | 68 colorShouldBe('host/child3', 'rgb(0, 128, 0)'); |
| 69 | 69 |
| 70 cleanUp(); | 70 cleanUp(); |
| 71 | 71 |
| 72 // Test div:first-child under shadow-root. | 72 // Test div:first-child under shadow-root. |
| 73 sandbox.appendChild( | 73 sandbox.appendChild( |
| 74 createDOM('div', {'id': 'host'}, | 74 createDOM('div', {'id': 'host'}, |
| 75 createShadowRoot( | 75 createShadowRoot( |
| 76 createDOM('div', {'id': 'child1'}, | 76 createDOM('div', {'id': 'child1'}, |
| (...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 191 document.createTextNode('last span'))))); | 191 document.createTextNode('last span'))))); |
| 192 | 192 |
| 193 colorShouldNotBe('host/child1', 'rgb(0, 128, 0)'); | 193 colorShouldNotBe('host/child1', 'rgb(0, 128, 0)'); |
| 194 colorShouldBe('host/child2', 'rgb(0, 128, 0)'); | 194 colorShouldBe('host/child2', 'rgb(0, 128, 0)'); |
| 195 colorShouldNotBe('host/child3', 'rgb(0, 128, 0)'); | 195 colorShouldNotBe('host/child3', 'rgb(0, 128, 0)'); |
| 196 | 196 |
| 197 cleanUp(); | 197 cleanUp(); |
| 198 | 198 |
| 199 </script> | 199 </script> |
| 200 </html> | 200 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1684533002:
Rename "tree of trees" to "composed tree". (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master