Slot elements should support fallback contents
[WebKit-https.git] / LayoutTests / fast / shadow-dom / shadow-layout-after-slot-fallback-changes.html
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <p>Test passes if you see a single 100px by 100px green box below.</p> 
5 <my-host id="host1"><div style="background: red;">FAIL</div></my-host>
6 <my-host id="host2"><div slot="foo" style="background: red;">FAIL</div></my-host>
7 <my-host id="host3"></my-host>
8 <my-host id="host4" style="background: red;"><slot></slot></my-host>
9 <my-host id="host5" style="background: green;"><slot><div style="background: red;"></div></slot></my-host>
10 <style>
11
12 my-host {
13     display: block;
14     width: 100px;
15     height: 20px;
16     overflow: hidden;
17 }
18
19 my-host div {
20     width: 100%;
21     height: 100%;
22 }
23
24 </style>
25 <script>
26
27 function forceLayout() {
28     if (window.internals)
29         internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
30     else
31         document.querySelector('p').getBoundingClientRect();
32 }
33
34 try {
35     var host1 = document.getElementById('host1');
36     host1.attachShadow({mode: 'open'}).innerHTML = '<slot><div style="width: 100%; height: 100%; background-color: green;"></div></slot>';
37
38     var host2 = document.getElementById('host2');
39     host2.attachShadow({mode: 'open'}).innerHTML = '<slot name="foo"><div style="width: 100%; height: 100%; background-color: green;"></div></slot>';
40
41     var host3 = document.getElementById('host3');
42     host3.attachShadow({mode: 'open'}).innerHTML = '<slot>FAIL</slot>';
43
44     forceLayout();
45
46     host1.removeChild(host1.firstChild);
47     forceLayout();
48
49     host2.firstChild.slot = 'bar';
50     forceLayout();
51
52     var child3 = document.createElement('div');
53     child3.style.backgroundColor = 'green';
54     host3.appendChild(child3);
55     forceLayout();
56
57     var host4 = document.getElementById('host4');
58     var child4 = document.createElement('div');
59     child4.style.backgroundColor = 'green';
60     host4.firstChild.appendChild(child4);
61
62     var host5 = document.getElementById('host5');
63     host5.firstChild.removeChild(host5.firstChild.firstChild);
64
65 } catch (exception) {
66     document.body.appendChild(document.createTextNode(exception));
67 }
68
69 </script>
70 </body>
71 </html>