css-scoping-shadow-slotted-rule.html (1953B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Scoping Module Level 1 - :slotted pseudo element must allow selecting 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), ::slotted(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; } </style><slot></slot>'; 49 } catch (exception) { 50 document.body.appendChild(document.createTextNode(exception)); 51 } 52 53 </script> 54 </body> 55 </html>