Import W3C CSS WG tests for shadow DOM
[WebKit-https.git] / LayoutTests / imported / w3c / csswg-test / css-scoping-1 / css-scoping-shadow-slotted-nested.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Scoping Module Level 1 - ::slotted pseudo element rule must apply to an element that got slotted via another slot</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         outer-host {
12             display: block;
13             width: 100px;
14             height: 100px;
15             background: red;
16         }
17         outer-host > * {
18             display: block;
19             width: 100px;
20             height: 25px;
21         }
22     </style>
23     <p>Test passes if you see a single 100px by 100px green box below.</p> 
24     <outer-host>
25         <span slot="outer">FAIL1</span>
26         <span slot="inner">FAIL2</span>
27         <span slot="both">FAIL3</span>
28     </outer-host>
29     <template id="outer-host-template">
30         <inner-host>
31             <style>
32                 ::slotted([slot=outer]) { background: green; color: green; }
33                 ::slotted([slot=both]) { background: green; }
34                 span { display: block; width: 100px; height: 25px; }
35             </style>
36             <slot name="outer"></slot>
37             <slot name="inner"></slot>
38             <slot name="both"></slot>
39             <span slot="inner">FAIL4</span>
40         </inner-host>
41     </template>
42     <template id="inner-host-template">
43         <style>
44             ::slotted([slot=inner]) { background: green; color: green; }
45             ::slotted([slot=both]) { color: green; }
46         </style>
47         <slot></slot>
48         <slot name="inner"></slot>
49     </template>
50     <script>
51
52         try {
53             var outerHost = document.querySelector('outer-host');
54             outerShadow = outerHost.attachShadow({mode: 'closed'});
55             outerShadow.appendChild(document.getElementById('outer-host-template').content.cloneNode(true));
56
57             var innerHost = outerShadow.querySelector('inner-host');
58             innerShadow = innerHost.attachShadow({mode: 'closed'});
59             innerShadow.appendChild(document.getElementById('inner-host-template').content.cloneNode(true));
60         } catch (exception) {
61             document.body.appendChild(document.createTextNode(exception));
62         }
63
64     </script>
65 </body>
66 </html>