toggle-animated-iframe-visibility.html (1616B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta name="assert" content="This should resume the animation after unhiding the iframe."> 4 <title>CSS Test (Animations): Unhiding iframe visibility should restart animation. </title> 5 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=616270"> 6 <link rel="match" href="toggle-animated-iframe-visibility-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 9 <div id="container"></div> 10 11 <div id="log"></div> 12 13 <script> 14 var container; 15 var block; 16 var logDiv; 17 18 function verifyVisibility(expected_visibility, message) { 19 if (getComputedStyle(block).visibility !== expected_visibility) 20 logDiv.innerHTML = `FAIL: ${message}`; 21 } 22 23 async function runTest() { 24 var animation = block.animate( 25 { transform: [ 'rotate(0deg)', 'rotate(180deg)' ] }, 26 { 27 duration: 10000000, 28 delay: -5000000, 29 easing: 'cubic-bezier(0, 1, 1, 0)' 30 }); 31 32 await animation.ready; 33 34 container.style.visibility = 'hidden'; 35 requestAnimationFrame(() => { 36 verifyVisibility('hidden', 'style.visibility should be hidden'); 37 container.style.visibility = 'visible'; 38 39 requestAnimationFrame(() => { 40 verifyVisibility('visible', 'style.visiblity should be visible'); 41 takeScreenshot(); 42 }); 43 }); 44 } 45 46 window.onload = function () { 47 logDiv = document.getElementById('log'); 48 container = document.getElementById('container'); 49 block = document.createElement('iframe'); 50 51 container.appendChild(block); 52 block.onload = runTest; 53 block.src = 'resources/block.html'; 54 }; 55 </script>