toggle-animated-iframe-visibility.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /web-animations/responsive/toggle-animated-iframe-visibility.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<meta name="assert" content="This should resume the animation after unhiding the iframe.">

<meta name="fuzzy" content="1;0-50">

<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>