css-scoping-shadow-host-functional-rule.html (2359B)
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 host-1, host-2, host-3, host-4, host-5 { 12 display: block; 13 width: 100px; 14 height: 20px; 15 background: red; 16 } 17 host-3, host-4, host-5 { 18 background: green; 19 } 20 </style> 21 <p>Test passes if you see a single 100px by 100px green box below.</p> 22 <host-1> 23 <div>FAIL1</div> 24 </host-1> 25 <host-2 id="bar" class="foo" name="baz"> 26 <div>FAIL2</div> 27 </host-2> 28 <div> 29 <host-3> 30 FAIL3 31 </host-3> 32 </div> 33 <host-4> 34 <div class="child">FAIL4</div> 35 </host-4> 36 <host-5> 37 <div>FAIL5</div> 38 </host-5> 39 <script> 40 41 try { 42 var shadowHost = document.querySelector('host-1'); 43 shadowRoot = shadowHost.attachShadow({mode: 'open'}); 44 shadowRoot.innerHTML = '<style> :host(host-1) { background: green !important; } </style>'; 45 46 shadowHost = document.querySelector('host-2'); 47 shadowRoot = shadowHost.attachShadow({mode: 'open'}); 48 shadowRoot.innerHTML = '<style> :host(host-2.foo#bar[name=baz]) { background: green !important; } </style>'; 49 50 shadowHost = document.querySelector('host-3'); 51 shadowRoot = shadowHost.attachShadow({mode: 'open'}); 52 shadowRoot.innerHTML = '<style> :host(div host-3) { background: red !important; } </style>'; 53 54 shadowHost = document.querySelector('host-4'); 55 shadowRoot = shadowHost.attachShadow({mode: 'open'}); 56 shadowRoot.innerHTML = '<style> :host(.child) { background: red !important; } </style>'; 57 58 shadowHost = document.querySelector('host-5'); 59 shadowRoot = shadowHost.attachShadow({mode: 'open'}); 60 shadowRoot.innerHTML = '<style> :host(host-1) { background: red !important; } </style>'; 61 } catch (exception) { 62 document.body.appendChild(document.createTextNode(exception)); 63 } 64 65 </script> 66 </body> 67 </html>