ff5b25c2fce17a24d453f3d9660d262b86bd7ea0
[WebKit-https.git] / LayoutTests / fast / shadow-dom / css-scoping-shadow-assigned-node-with-rules.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Scoping - only rules outside a shadow tree must apply to nodes assigned to a slot in the shadow tree.</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/#selectors-data-model">
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         overflow: hidden;
16         background: green;
17     }
18     div {
19         width: 100%;
20         height: 50%;
21     }
22     .green {
23         color: green;
24     }
25     .red {
26         color: red;
27     }
28     </style>
29     <p>Test passes if you see a single 100px by 100px green box below.</p> 
30     <my-host>
31         <div class="red">FAIL</div>
32         <div class="green" slot="green">FAIL</div>
33         <div class="red" slot="invalid">FAIL</div>
34         <div class="green" slot="green">FAIL</div>
35     </my-host>
36     <script>
37
38     try {
39         var shadowHost = document.querySelector('my-host');
40         shadowRoot = shadowHost.attachShadow({mode: 'open'});
41         shadowRoot.innerHTML = '<style> div { color: yellow; } </style><slot name="green"></slot>';
42     } catch (exception) {
43         document.body.appendChild(document.createTextNode(exception));
44     }
45
46     </script>
47 </body>
48 </html>