f35361c3656292f12e69ee09035ef18dcb2b8e86
[WebKit-https.git] / LayoutTests / fast / shadow-dom / css-scoping-shadow-slot-fallback.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Scoping - slot element without distributed nodes must render its fallback content</title>
5     <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
6     <link rel="match" href="reference/green-box.html"/>
7 </head>
8 <body>
9     <style>
10     my-host {
11         display: block;
12         background-color: red;
13         width: 100px;
14         height: 50px;
15     }
16     .red {
17         background-color: red;
18     }
19     .green {
20         background-color: green;
21     }
22     div {
23         width: 100px;
24         height: 50px;
25     }
26     slot {
27         border: solid 10px red;
28     }
29     </style>
30     <p>Test passes if you see a single 100px by 100px green box below.</p>
31     <my-host></my-host>
32     <div class="red"><slot><div class="green"></div></slot></div>
33     <script>
34
35     try {
36         var shadowHost = document.querySelector('my-host');
37         shadowRoot = shadowHost.attachShadow({mode: 'open'});
38         shadowRoot.innerHTML = '<slot style="border: solid 10px red;">'
39             + '<div style="width: 100%; height: 100%; background-color: green;"></div></slot>';
40     } catch (exception) {
41         document.body.appendChild(document.createTextNode(exception));
42     }
43
44     </script>
45 </body>
46 </html>