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