transition-ready-time-offscreen.html (1396B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Transitions start at the same time regardless of on-screen status</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-2/"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1888748"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .transition { 10 width: 100px; 11 height: 100px; 12 background-color: blue; 13 transition: translate 10000ms linear; 14 will-change: translate; 15 translate: 0; 16 } 17 .offscreen { 18 background-color: purple; 19 translate: -1000px; 20 } 21 </style> 22 <div class="transition"></div> 23 <div class="transition offscreen"></div> 24 <script> 25 'use strict'; 26 27 promise_test(async t => { 28 let [a, b] = document.querySelectorAll(".transition"); 29 30 // Ensure a paint happens to make sure a transition gets triggered (otherwise 31 // getAnimations() would flush sync, and maybe not trigger a transition if 32 // it's the first style of the elements). 33 await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))); 34 35 // Trigger both transitions at the same time. 36 a.style.translate = b.style.translate = "100px"; 37 38 let ta = a.getAnimations()[0]; 39 let tb = b.getAnimations()[0]; 40 41 await Promise.all([ta.ready, tb.ready]); 42 assert_equals(ta.startTime, tb.startTime, "Both transitions should've started at the same time"); 43 }); 44 </script>