<!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>