| 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'></div> | 8 <div id='sandbox'></div> |
| 9 <pre id='console'></pre> | 9 <pre id='console'></pre> |
| 10 </body> | 10 </body> |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 81 | 81 |
| 82 cleanUp(); | 82 cleanUp(); |
| 83 | 83 |
| 84 sandbox.appendChild( | 84 sandbox.appendChild( |
| 85 createDOM('div', {}, | 85 createDOM('div', {}, |
| 86 createDOM('style', {}, | 86 createDOM('style', {}, |
| 87 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 87 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
| 88 createDOM('div', {'id': 'host'}, | 88 createDOM('div', {'id': 'host'}, |
| 89 createShadowRoot( | 89 createShadowRoot( |
| 90 createDOM('span', {'id': 'target'}, | 90 createDOM('span', {'id': 'target'}, |
| 91 document.createTextNode('green border, because of hat.')))))
); | 91 document.createTextNode('green border, because of ::shadow.'
)))))); |
| 92 | 92 |
| 93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 94 | 94 |
| 95 cleanUp(); | 95 cleanUp(); |
| 96 | 96 |
| 97 // Cascade order | 97 // Cascade order |
| 98 sandbox.appendChild( | 98 sandbox.appendChild( |
| 99 createDOM('div', {}, | 99 createDOM('div', {}, |
| 100 createDOM('style', {}, | 100 createDOM('style', {}, |
| 101 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 101 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
| 102 createDOM('div', {'id': 'host'}, | 102 createDOM('div', {'id': 'host'}, |
| 103 createShadowRoot( | 103 createShadowRoot( |
| 104 createDOM('style', {}, | 104 createDOM('style', {}, |
| 105 document.createTextNode('span { border: 1px solid red; }')), | 105 document.createTextNode('span { border: 1px solid red; }')), |
| 106 createDOM('span', {'id': 'target'}, | 106 createDOM('span', {'id': 'target'}, |
| 107 document.createTextNode('green border, because of hat.')))))
); | 107 document.createTextNode('green border, because of ::shadow.'
)))))); |
| 108 | 108 |
| 109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 110 | 110 |
| 111 cleanUp(); | 111 cleanUp(); |
| 112 | 112 |
| 113 sandbox.appendChild( | 113 sandbox.appendChild( |
| 114 createDOM('div', {}, | 114 createDOM('div', {}, |
| 115 createDOM('style', {}, | 115 createDOM('style', {}, |
| 116 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 116 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
| 117 createDOM('div', {'id': 'host'}, | 117 createDOM('div', {'id': 'host'}, |
| 118 createShadowRoot( | 118 createShadowRoot( |
| 119 createDOM('style', {}, | 119 createDOM('style', {}, |
| 120 document.createTextNode('span#target { border: 1px solid red
; }')), | 120 document.createTextNode('span#target { border: 1px solid red
; }')), |
| 121 createDOM('span', {'id': 'target'}, | 121 createDOM('span', {'id': 'target'}, |
| 122 document.createTextNode('green border, because of hat.')))))
); | 122 document.createTextNode('green border, because of ::shadow.'
)))))); |
| 123 | 123 |
| 124 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0). | 124 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 125 borderColorShouldBe('host/target', 'rgb(255, 0, 0)'); | |
| 126 | 125 |
| 127 cleanUp(); | 126 cleanUp(); |
| 128 | 127 |
| 129 sandbox.appendChild( | 128 sandbox.appendChild( |
| 130 createDOM('div', {}, | 129 createDOM('div', {}, |
| 131 createDOM('style', {}, | 130 createDOM('style', {}, |
| 132 document.createTextNode('div#sandbox > div > div::shadow span { bord
er: 1px solid green; }')), | 131 document.createTextNode('div#sandbox > div > div::shadow span { bord
er: 1px solid green; }')), |
| 133 createDOM('div', {'id': 'host'}, | 132 createDOM('div', {'id': 'host'}, |
| 134 createShadowRoot( | 133 createShadowRoot( |
| 135 createDOM('span', {'id': 'target'}, | 134 createDOM('span', {'id': 'target'}, |
| 136 document.createTextNode('green border, because of hat.')))))
); | 135 document.createTextNode('green border, because of ::shadow.'
)))))); |
| 137 | 136 |
| 138 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 137 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 139 | 138 |
| 140 cleanUp(); | 139 cleanUp(); |
| 141 | 140 |
| 142 sandbox.appendChild( | 141 sandbox.appendChild( |
| 143 createDOM('div', {}, | 142 createDOM('div', {}, |
| 144 createDOM('style', {}, | 143 createDOM('style', {}, |
| 145 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 144 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
| 146 createDOM('div', {'id': 'host'}, | 145 createDOM('div', {'id': 'host'}, |
| 147 createShadowRoot( | 146 createShadowRoot( |
| 148 createDOM('style', {}, | 147 createDOM('style', {}, |
| 149 document.createTextNode('div > span { border: 1px solid red;
}')), | 148 document.createTextNode('div > span { border: 1px solid red;
}')), |
| 150 createDOM('div', {}, | 149 createDOM('div', {}, |
| 151 createDOM('span', {'id': 'target'}, | 150 createDOM('span', {'id': 'target'}, |
| 152 document.createTextNode('green border, because parent ha
t wins.'))))))); | 151 document.createTextNode('green border, because parent ::
shadow wins.'))))))); |
| 153 | 152 |
| 154 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 153 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 155 | 154 |
| 156 cleanUp(); | 155 cleanUp(); |
| 157 | 156 |
| 158 sandbox.appendChild( | 157 sandbox.appendChild( |
| 159 createDOM('div', {}, | 158 createDOM('div', {}, |
| 160 createDOM('style', {}, | 159 createDOM('style', {}, |
| 161 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 160 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
| 162 createDOM('div', {'id': 'host'}, | 161 createDOM('div', {'id': 'host'}, |
| (...skipping 137 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 300 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, | 299 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, |
| 301 createShadowRoot( | 300 createShadowRoot( |
| 302 createDOM('div', {'id': 'x-zot-target'}, | 301 createDOM('div', {'id': 'x-zot-target'}, |
| 303 document.createTextNode('x-zot'))))))))); | 302 document.createTextNode('x-zot'))))))))); |
| 304 | 303 |
| 305 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0
)'); | 304 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0
)'); |
| 306 cleanUp(); | 305 cleanUp(); |
| 307 | 306 |
| 308 </script> | 307 </script> |
| 309 </html> | 308 </html> |
| OLD | NEW |