OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="resources/shadow-dom.js"></script> |
| 5 <script src="../../../resources/js-test.js"></script> |
| 6 </head> |
| 7 <body> |
| 8 <div id="sandbox"></div> |
| 9 <pre id="console"></pre> |
| 10 <script> |
| 11 |
| 12 function colorOf(selector) |
| 13 { |
| 14 return document.defaultView.getComputedStyle(document.querySelector(selector
), null).getPropertyValue('color'); |
| 15 } |
| 16 |
| 17 function colorOfNodeInTreeOfTrees(selector) |
| 18 { |
| 19 return document.defaultView.getComputedStyle(getNodeInTreeOfTrees(selector),
null).getPropertyValue('color'); |
| 20 } |
| 21 |
| 22 function cleanUp() |
| 23 { |
| 24 document.getElementById('sandbox').innerHTML = ''; |
| 25 } |
| 26 |
| 27 var sandbox = document.getElementById('sandbox'); |
| 28 |
| 29 // From content-pseudo-element.html |
| 30 sandbox.appendChild( |
| 31 createDOM('div', {'id': 'host'}, |
| 32 createShadowRoot( |
| 33 createDOM('style', {}, |
| 34 document.createTextNode('content /content/ div { color: green; }
')), |
| 35 createDOM('content')), |
| 36 createDOM('div', {}, |
| 37 document.createTextNode('green')))); |
| 38 |
| 39 shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"'); |
| 40 |
| 41 cleanUp(); |
| 42 |
| 43 // From content-pseudo-element-used-in-selector-list.html |
| 44 sandbox.appendChild( |
| 45 createDOM('div', {'id': 'host'}, |
| 46 createShadowRoot( |
| 47 createDOM('style', {}, |
| 48 document.createTextNode('content /content/ div, p { color: green
; }')), |
| 49 createDOM('content'), |
| 50 createDOM('p', {'id': 'p-in-shadow'}, |
| 51 document.createTextNode('green'))), |
| 52 createDOM('div', {}, |
| 53 document.createTextNode('green')), |
| 54 createDOM('p', {'class': 'hello'}, |
| 55 document.createTextNode('normal')))); |
| 56 |
| 57 shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"'); |
| 58 shouldBe('colorOfNodeInTreeOfTrees("host/p-in-shadow")', '"rgb(0, 128, 0)"'); |
| 59 shouldNotBe('colorOf("#host > p")', '"rgb(0, 128, 0)"'); |
| 60 |
| 61 cleanUp(); |
| 62 |
| 63 // From content-pseudo-element-support-selector.html |
| 64 sandbox.appendChild( |
| 65 createDOM('div', {'id': 'host'}, |
| 66 createShadowRoot( |
| 67 createDOM('style', {}, |
| 68 document.createTextNode('content /content/ div.hello div { color
: green; }')), |
| 69 createDOM('content')), |
| 70 createDOM('div', {'class': 'hello'}, |
| 71 document.createTextNode('normal'), |
| 72 createDOM('div', {}, |
| 73 document.createTextNode('green'))), |
| 74 createDOM('div', {}, |
| 75 document.createTextNode('normal'), |
| 76 createDOM('div', {}, |
| 77 document.createTextNode('normal'))))); |
| 78 |
| 79 shouldBe('colorOf("#host > div.hello > div")', '"rgb(0, 128, 0)"'); |
| 80 shouldNotBe('colorOf("#host > div:not(.hello) > div")', '"rgb(0, 128, 0)"'); |
| 81 cleanUp(); |
| 82 |
| 83 // From content-pseudo-element-reprojection.html |
| 84 sandbox.appendChild( |
| 85 createDOM('div', {'id': 'host'}, |
| 86 createShadowRoot( |
| 87 createDOM('div', {'id': 'host2'}, |
| 88 createShadowRoot( |
| 89 createDOM('style', {}, |
| 90 document.createTextNode('content /content/ .foo { color:
green; }')), |
| 91 createDOM('content', {'select': '.foo'})), |
| 92 createDOM('content'))), |
| 93 createDOM('div', {'class': 'foo'}, |
| 94 document.createTextNode('green')))); |
| 95 |
| 96 shouldBe('colorOf("#host > div.foo")', '"rgb(0, 128, 0)"'); |
| 97 cleanUp(); |
| 98 |
| 99 // From content-pseudo-element-match-all.html |
| 100 sandbox.appendChild( |
| 101 createDOM('div', {'id': 'host'}, |
| 102 createShadowRoot( |
| 103 createDOM('style', {}, |
| 104 document.createTextNode('content /content/ .hello { color: green
; }')), |
| 105 createDOM('content')), |
| 106 createDOM('div', {'class': 'hello', 'id': 'first-child'}, |
| 107 document.createTextNode('green')), |
| 108 createDOM('div', {'class': 'hello', 'id': 'last-child'}, |
| 109 document.createTextNode('green')))); |
| 110 |
| 111 shouldBe('colorOf("#host > div.hello#first-child")', '"rgb(0, 128, 0)"'); |
| 112 shouldBe('colorOf("#host > div.hello#last-child")', '"rgb(0, 128, 0)"'); |
| 113 |
| 114 cleanUp(); |
| 115 |
| 116 // From content-pseudo-element-match-descendant.html |
| 117 sandbox.appendChild( |
| 118 createDOM('div', {'id': 'host'}, |
| 119 createShadowRoot( |
| 120 createDOM('style', |
| 121 document.createTextNode('content /content/ div { color: red; }')
), |
| 122 createDOM('content')), |
| 123 createDOM('p', {}, |
| 124 createDOM('div', {}, |
| 125 document.createTextNode('not red'))))); |
| 126 |
| 127 shouldNotBe('colorOf("#host > p > div")', '"rgb(255, 0, 0)"'); |
| 128 cleanUp(); |
| 129 |
| 130 // From content-pseudo-element-for-shadow-element.html |
| 131 sandbox.appendChild( |
| 132 createDOM('div', {'id': 'host'}, |
| 133 createShadowRoot( |
| 134 createDOM('div', {'id': 'target'}, |
| 135 document.createTextNode('green'))), |
| 136 createShadowRoot( |
| 137 createDOM('style', {}, |
| 138 document.createTextNode('shadow /content/ div { color: green; }'
)), |
| 139 createDOM('shadow')))); |
| 140 |
| 141 shouldBe('colorOfNodeInTreeOfTrees("host/target")', '"rgb(0, 128, 0)"'); |
| 142 cleanUp(); |
| 143 |
| 144 // From content-pseudo-element-with-any.html |
| 145 sandbox.appendChild( |
| 146 createDOM('div', {'id': 'host'}, |
| 147 createShadowRoot( |
| 148 createDOM('style', {}, |
| 149 document.createTextNode('* /content/ div { color: green; }')), |
| 150 createDOM('div', {'id': 'div-in-shadow'}, |
| 151 document.createTextNode('normal')), |
| 152 createDOM('content')), |
| 153 createDOM('div', {}, |
| 154 document.createTextNode('green')))); |
| 155 |
| 156 shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"'); |
| 157 shouldNotBe('colorOfNodeInTreeOfTrees("host/div-in-shadow")', '"rgb(0, 128, 0)"'
); |
| 158 cleanUp(); |
| 159 |
| 160 sandbox.appendChild( |
| 161 createDOM('div', {'id': 'host'}, |
| 162 createShadowRoot( |
| 163 createDOM('style', {}, |
| 164 document.createTextNode('content /content/ * { color: green; }')
), |
| 165 createDOM('div', {'id': 'div-in-shadow'}, |
| 166 document.createTextNode('normal')), |
| 167 createDOM('content')), |
| 168 createDOM('div', {}, |
| 169 document.createTextNode('green')))); |
| 170 |
| 171 shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"'); |
| 172 shouldNotBe('colorOfNodeInTreeOfTrees("host/div-in-shadow")', '"rgb(0, 128, 0)"'
); |
| 173 cleanUp(); |
| 174 |
| 175 sandbox.appendChild( |
| 176 createDOM('div', {'id': 'host'}, |
| 177 createShadowRoot( |
| 178 createDOM('style', {}, |
| 179 document.createTextNode('* /content/ * { color: green; }')), |
| 180 createDOM('div', {'id': 'div-in-shadow'}, |
| 181 document.createTextNode('normal')), |
| 182 createDOM('content')), |
| 183 createDOM('div', {}, |
| 184 document.createTextNode('green')))); |
| 185 |
| 186 shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"'); |
| 187 shouldNotBe('colorOfNodeInTreeOfTrees("host/div-in-shadow")', '"rgb(0, 128, 0)"'
); |
| 188 cleanUp(); |
| 189 |
| 190 // from content-pseudo-element-overriden-2.html / crbug.com/274059 |
| 191 // Compare rules from a style in a shadow tree with ::content in a different sha
dow tree.'); |
| 192 sandbox.appendChild( |
| 193 createDOM('div', {'id': 'host'}, |
| 194 createShadowRoot( |
| 195 createDOM('style', {}, |
| 196 document.createTextNode('content /content/ * { color: green; }')
), |
| 197 createDOM('content', {})), |
| 198 createDOM('div', {'id': 'hostChild', 'class': 'contentClass'}, |
| 199 createShadowRoot( |
| 200 createDOM('style', {}, |
| 201 document.createTextNode(':host { color: red; }')), |
| 202 createDOM('span', {}, |
| 203 document.createTextNode('Hello')))))); |
| 204 shouldBe('colorOfNodeInTreeOfTrees("hostChild")', '"rgb(0, 128, 0)"'); |
| 205 cleanUp(); |
| 206 |
| 207 // from content-pseudo-element-overriden.html |
| 208 // crbug.com/274059. |
| 209 // Should be able to override ::content styles in shadow root style sheet from t
he document. |
| 210 sandbox.appendChild( |
| 211 createDOM('div', {}, |
| 212 createDOM('style', {}, |
| 213 document.createTextNode('.contentClass { color: green; }')), |
| 214 createDOM('div', {'id': 'host', 'class': 'hostClass'}, |
| 215 createShadowRoot( |
| 216 createDOM('style', {}, |
| 217 document.createTextNode('content /content/ * { color: red; }
')), |
| 218 createDOM('content')), |
| 219 createDOM('div', {'class': 'contentClass'}, |
| 220 document.createTextNode('content'))))); |
| 221 shouldBe('colorOf(".contentClass")', '"rgb(0, 128, 0)"'); |
| 222 cleanUp(); |
| 223 </script> |
| 224 </body> |
| 225 </html> |
OLD | NEW |