38 lines
990 B
HTML
38 lines
990 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
div {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
<script>
|
|
window.onload = function(){
|
|
let body = document.getElementsByTagName("body")[0];
|
|
let target = document.createElement("div");
|
|
let anim1 = new Animation();
|
|
let anim2 = new Animation();
|
|
let effect = new KeyframeEffect(target, { opacity: [ 0, 1 ] }, 1000);
|
|
body.appendChild(target);
|
|
anim1.startTime = 88;
|
|
anim1.timeline = null;
|
|
anim1.pause();
|
|
anim1.effect = effect;
|
|
anim2.effect = effect;
|
|
anim1.effect = effect;
|
|
// Put another opacity animation on the top of the effect stack so that we
|
|
// try to send a lower priority animation that has no timeline to the
|
|
// compositor.
|
|
let anim3 = target.animate({ opacity : [ 1, 0 ] }, 1000);
|
|
|
|
Promise.all([anim1.ready, anim2.ready, anim2.ready]).then(function() {
|
|
document.documentElement.classList.remove("reftest-wait");
|
|
});
|
|
};
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html>
|