animation-before-initial-box-construction-001.html (1454B)
1 <!doctype html> 2 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 3 <link rel="author" href="mailto:https://mozilla.org" title="Mozilla"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1605610"> 5 <link rel="help" href="https://drafts.csswg.org/web-animations/#extensions-to-the-element-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script> 9 let t = async_test("animations started before initial-containing-block creation properly function"); 10 let loaded = false; 11 let finished = false; 12 let span; 13 14 function check() { 15 if (!loaded || !finished) 16 return; 17 18 assert_equals(getComputedStyle(span).opacity, "1", "Animation should be properly finished"); 19 t.done(); 20 } 21 22 document.addEventListener("DOMContentLoaded", function() { 23 span = document.createElement("span"); 24 span.id = "myspan"; 25 span.innerHTML = `Some content`; 26 document.body.appendChild(span); 27 28 let anim = span.animate([ 29 { 30 opacity: "0", 31 }, 32 { 33 opacity: "1", 34 }, 35 ], { 36 duration: 300, 37 }); 38 39 anim.finished.then(t.step_func(function() { 40 finished = true; 41 check(); 42 })); 43 }); 44 45 window.addEventListener("load", t.step_func(function() { 46 loaded = true; 47 check(); 48 })); 49 </script> 50 <!-- It is important that there are no more script after this stylesheet --> 51 <link rel="stylesheet" href="empty-sheet.css?pipe=trickle(d2)"> 52 <body> 53 </body>