| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <meta name="assert" content="This should resume the animation after unhiding the iframe."> |
| <title>CSS Test (Animations): Unhiding iframe visibility should restart animation. </title> |
| <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=616270"> |
| <link rel="match" href="toggle-animated-iframe-visibility-ref.html"> |
| <script src="/common/reftest-wait.js"></script> |
| |
| <div id="container"></div> |
| |
| <div id="log"></div> |
| |
| <script> |
| var container; |
| var block; |
| var logDiv; |
| |
| function verifyVisibility(expected_visibility, message) { |
| if (getComputedStyle(block).visibility !== expected_visibility) |
| logDiv.innerHTML = `FAIL: ${message}`; |
| } |
| |
| async function runTest() { |
| var animation = block.animate( |
| { transform: [ 'rotate(0deg)', 'rotate(180deg)' ] }, |
| { |
| duration: 10000000, |
| delay: -5000000, |
| easing: 'cubic-bezier(0, 1, 1, 0)' |
| }); |
| |
| await animation.ready; |
| |
| container.style.visibility = 'hidden'; |
| requestAnimationFrame(() => { |
| verifyVisibility('hidden', 'style.visibility should be hidden'); |
| container.style.visibility = 'visible'; |
| |
| requestAnimationFrame(() => { |
| verifyVisibility('visible', 'style.visiblity should be visible'); |
| takeScreenshot(); |
| }); |
| }); |
| } |
| |
| window.onload = function () { |
| logDiv = document.getElementById('log'); |
| container = document.getElementById('container'); |
| block = document.createElement('iframe'); |
| |
| container.appendChild(block); |
| block.onload = runTest; |
| block.src = 'resources/block.html'; |
| }; |
| </script> |
