OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>CSS Scoping Module Level 1 - :slotted pseudo element must allow selec
ting elements assigned to a slot element</title> |
| 5 <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/> |
| 6 <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo"> |
| 7 <link rel="match" href="reference/green-box.html"/> |
| 8 </head> |
| 9 <body> |
| 10 <style> |
| 11 my-host { |
| 12 display: block; |
| 13 width: 100px; |
| 14 height: 100px; |
| 15 color: red; |
| 16 background: green; |
| 17 } |
| 18 my-host > div, nested-host { |
| 19 display: block; |
| 20 width: 100px; |
| 21 height: 25px; |
| 22 } |
| 23 </style> |
| 24 <p>Test passes if you see a single 100px by 100px green box below.</p> |
| 25 <my-host> |
| 26 <div class="green">FAIL1</div> |
| 27 <myelem><span>FAIL2</span></myelem> |
| 28 <nested-host> |
| 29 <span>FAIL3</span> |
| 30 </nested-host> |
| 31 <another-host> |
| 32 <b>FAIL4</b> |
| 33 </another-host> |
| 34 </my-host> |
| 35 <script> |
| 36 |
| 37 try { |
| 38 var shadowHost = document.querySelector('my-host'); |
| 39 shadowRoot = shadowHost.attachShadow({mode: 'open'}); |
| 40 shadowRoot.innerHTML = '<slot></slot><style> ::slotted(.green), ::sl
otted(myelem) { color:green; } </style>'; |
| 41 |
| 42 shadowHost = document.querySelector('nested-host'); |
| 43 shadowRoot = shadowHost.attachShadow({mode: 'open'}); |
| 44 shadowRoot.innerHTML = '<style> .mydiv ::slotted(*) { color:green; }
</style><div class=mydiv><slot></slot></div>'; |
| 45 |
| 46 shadowHost = document.querySelector('another-host'); |
| 47 shadowRoot = shadowHost.attachShadow({mode: 'open'}); |
| 48 shadowRoot.innerHTML = '<style> ::slotted(*) { color:green; } </styl
e><slot></slot>'; |
| 49 } catch (exception) { |
| 50 document.body.appendChild(document.createTextNode(exception)); |
| 51 } |
| 52 |
| 53 </script> |
| 54 </body> |
| 55 </html> |
OLD | NEW |