reframe-and-transition-starts-at-the-same-time.html (570B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <style> 4 #target::before { 5 transition: background-color 100s steps(1, end); 6 content: 'initial'; 7 background-color: rgb(255, 255, 255); 8 height: 100px; 9 width: 100px; 10 position: absolute; 11 } 12 #target.hover::before{ 13 background-color: rgb(0, 0, 0); 14 content: ''; 15 } 16 </style> 17 <div id="target"></div> 18 <script> 19 window.addEventListener("load", () => { 20 target.className = 'hover'; 21 target.addEventListener('transitionstart', () => { 22 document.documentElement.classList.remove('reftest-wait'); 23 }); 24 }); 25 </script> 26 </html>