css-scoping-shadow-host-rule.html (2273B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Scoping Module Level 1 - :host rules must apply to the shadow host.</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/#host-selector"> 7 <link rel="match" href="reference/green-box.html"/> 8 </head> 9 <body> 10 <style> 11 my-host, my-host2, my-host3, my-host4 { 12 display: block; 13 width: 100px; 14 height: 25px; 15 } 16 my-host2 { 17 background: green; 18 } 19 my-host3 { 20 background: red; 21 color: green; 22 } 23 my-host4 { 24 background: green; 25 color: green; 26 } 27 </style> 28 <p>Test passes if you see a single 100px by 100px green box below.</p> 29 <my-host> 30 <div>FAIL</div> 31 </my-host> 32 <my-host2> 33 <div>FAIL</div> 34 </my-host2> 35 <my-host3> 36 <div>FAIL</div> 37 </my-host3> 38 <div class="container"> 39 <my-host4> 40 <div>FAIL</div> 41 </my-host4> 42 </div> 43 <script> 44 45 try { 46 var shadowHost = document.querySelector('my-host'); 47 var shadowRoot = shadowHost.attachShadow({mode: 'open'}); 48 shadowRoot.innerHTML = '<style> :host { color: green; background: green; } </style><div>FAIL</div>'; 49 50 shadowHost = document.querySelector('my-host2'); 51 shadowRoot = shadowHost.attachShadow({mode: 'open'}); 52 shadowRoot.innerHTML = '<style> :host { color: red; background: red; } div { color: green }</style><div>FAIL</div>'; 53 54 shadowHost = document.querySelector('my-host3'); 55 shadowRoot = shadowHost.attachShadow({mode: 'open'}); 56 shadowRoot.innerHTML = '<style> :host { background: green !important; color: green !important; } </style><div>FAIL</div>'; 57 58 shadowHost = document.querySelector('my-host4'); 59 shadowRoot = shadowHost.attachShadow({mode: 'open'}); 60 shadowRoot.innerHTML = '<style> .container :host { background: red !important; } </style><div>FAIL</div>'; 61 } catch (exception) { 62 document.body.appendChild(document.createTextNode(exception)); 63 } 64 65 </script> 66 </body> 67 </html>