Revision control

1
<style>
2
3
div {
4
background-color: rebeccapurple;
5
width: 100px;
6
height: 100px;
7
}
8
9
#first {
10
position: absolute;
11
top: 10px;
12
left: 10px;
13
}
14
15
#second {
16
position: absolute;
17
top: 200px;
18
left: 200px;
19
}
20
21
.animate-class {
22
animation: 1s linear 0s 1 normal scale;
23
}
24
25
.first-letter::first-letter {
26
color:red;
27
}
28
29
@keyframes scale {
30
0% {
31
transform: scale(0);
32
}
33
34
10% {
35
transform: scale(1);
36
}
37
38
100% {
39
transform: scale(1);
40
}
41
}
42
43
</style>
44
<script>
45
46
if (window.testRunner)
47
testRunner.waitUntilDone();
48
49
window.onload = async function() {
50
let shadowRoot = document.body.attachShadow({ mode: "open" });
51
52
// Put a named slot and assign an element to it.
53
shadowRoot.innerHTML = `<slot name="first"></slot>`;
54
let firstElement = document.body.appendChild(document.createElement("div"));
55
firstElement.slot = "first";
56
firstElement.id = "first";
57
58
await new Promise(resolve => requestAnimationFrame(resolve));
59
60
// Create another named slot and assign another element to it.
61
let secondSlot = shadowRoot.appendChild(document.createElement("slot"));
62
secondSlot.name = "second";
63
64
// Start animation in the seconds slot.
65
let secondElement = document.body.appendChild(document.createElement("div"));
66
secondElement.slot = "second";
67
secondElement.className = "animate-class";
68
secondElement.id = "second";
69
70
const animation = secondElement.getAnimations()[0];
71
72
await animation.ready;
73
74
await new Promise(resolve => requestAnimationFrame(resolve));
75
await new Promise(resolve => requestAnimationFrame(resolve));
76
77
firstElement.remove();
78
79
// Wait until animation has progressed some before snapshotting the test result.
80
while (animation.currentTime < 100)
81
await new Promise(resolve => requestAnimationFrame(resolve));
82
83
if (window.testRunner)
84
testRunner.notifyDone();
85
}
86
87
</script>
88