| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <script src="resources/shadow-dom.js"></script> | |
| 3 <script src="../../../resources/js-test.js"></script> | |
| 4 <body> | |
| 5 <div id='sandbox'></div> | |
| 6 </body> | |
| 7 <script> | |
| 8 function colorOf(node) | |
| 9 { | |
| 10 return document.defaultView.getComputedStyle(node, null).getPropertyValue('c
olor'); | |
| 11 } | |
| 12 | |
| 13 function colorShouldBe(selector, color) | |
| 14 { | |
| 15 var text = 'colorOf(getNodeInComposedTree("' + selector + '"))'; | |
| 16 shouldBeEqualToString(text, color); | |
| 17 } | |
| 18 | |
| 19 function colorShouldNotBe(selector, color) | |
| 20 { | |
| 21 var text = 'colorOf(getNodeInComposedTree("' + selector + '"))'; | |
| 22 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"")
+ '"'; | |
| 23 shouldNotBe(text, unevaledString); | |
| 24 } | |
| 25 | |
| 26 function cleanUp() | |
| 27 { | |
| 28 document.getElementById('sandbox').innerHTML = ''; | |
| 29 } | |
| 30 | |
| 31 description('Test for ::shadow pseudo element, http://crbug.com/367266.'); | |
| 32 | |
| 33 sandbox.appendChild( | |
| 34 createDOM('div', {}, | |
| 35 createDOM('style', {'id': 'style-with-shadow'}, | |
| 36 document.createTextNode('div::shadow { color: red; }')), | |
| 37 createDOM('div', {'id': 'host'}, | |
| 38 createShadowRoot( | |
| 39 createDOM('div', {'id': 'target'}, | |
| 40 document.createTextNode('not red color.')))))); | |
| 41 | |
| 42 colorShouldNotBe('host/target', 'rgb(255, 0, 0)'); | |
| 43 | |
| 44 var styleWithShadow = document.getElementById('style-with-shadow'); | |
| 45 styleWithShadow.innerHTML = ':not(div::shadow) { color: red; }'; | |
| 46 | |
| 47 colorShouldNotBe('host/target', 'rgb(255, 0, 0)'); | |
| 48 | |
| 49 styleWithShadow.innerHTML = ':-webkit-any(div::shadow, div::shadow div) { color:
red; }'; | |
| 50 | |
| 51 colorShouldNotBe('host/target', 'rgb(255, 0, 0)'); | |
| 52 | |
| 53 cleanUp(); | |
| 54 | |
| 55 sandbox.appendChild( | |
| 56 createDOM('div', {}, | |
| 57 createDOM('style', {}, | |
| 58 document.createTextNode('div::shadow + div { color: red; }')), | |
| 59 createDOM('div', {'id': 'host'}, | |
| 60 createShadowRoot( | |
| 61 createDOM('div', {'id': 'first-direct-child'}, | |
| 62 document.createTextNode('not red color.')), | |
| 63 createDOM('div', {'id': 'second-direct-child'}, | |
| 64 document.createTextNode('not red color.')))), | |
| 65 createDOM('div', {'id': 'host-sibling'}, | |
| 66 document.createTextNode('not red color.')))); | |
| 67 | |
| 68 colorShouldNotBe('host/first-direct-child', 'rgb(255, 0, 0)'); | |
| 69 colorShouldNotBe('host/second-direct-child', 'rgb(255, 0, 0)'); | |
| 70 colorShouldNotBe('host-sibling', 'rgb(255, 0, 0)'); | |
| 71 | |
| 72 cleanUp(); | |
| 73 | |
| 74 sandbox.appendChild( | |
| 75 createDOM('div', {}, | |
| 76 createDOM('style', {}, | |
| 77 document.createTextNode('div::shadow ~ div { color: red; }')), | |
| 78 createDOM('div', {'id': 'host'}, | |
| 79 createShadowRoot( | |
| 80 createDOM('div', {'id': 'first-direct-child'}, | |
| 81 document.createTextNode('not red color.')), | |
| 82 createDOM('div', {'id': 'second-direct-child'}, | |
| 83 document.createTextNode('not red color.')))), | |
| 84 createDOM('div', {'id': 'host-sibling'}, | |
| 85 document.createTextNode('not red color.')))); | |
| 86 | |
| 87 colorShouldNotBe('host/first-direct-child', 'rgb(255, 0, 0)'); | |
| 88 colorShouldNotBe('host/second-direct-child', 'rgb(255, 0, 0)'); | |
| 89 colorShouldNotBe('host-sibling', 'rgb(255, 0, 0)'); | |
| 90 | |
| 91 cleanUp(); | |
| 92 | |
| 93 sandbox.appendChild( | |
| 94 createDOM('div', {}, | |
| 95 createDOM('style', {}, | |
| 96 document.createTextNode('div::shadow > div { color: green; }')), | |
| 97 createDOM('div', {'id': 'host'}, | |
| 98 createShadowRoot( | |
| 99 createDOM('div', {'id': 'direct-child'}, | |
| 100 document.createTextNode('green color.')), | |
| 101 createDOM('p', {}, | |
| 102 createDOM('div', {'id': 'not-direct-child'}, | |
| 103 document.createTextNode('not green color.'))))), | |
| 104 createDOM('div', {'id': 'host-child'}, | |
| 105 document.createTextNode('not green color.')))); | |
| 106 | |
| 107 colorShouldBe('host/direct-child', 'rgb(0, 128, 0)'); | |
| 108 colorShouldNotBe('host/not-direct-child', 'rgb(0, 128, 0)'); | |
| 109 colorShouldNotBe('host-child', 'rgb(0, 128, 0)'); | |
| 110 | |
| 111 cleanUp(); | |
| 112 | |
| 113 </script> | |
| 114 | |
| 115 | |
| OLD | NEW |