1 files changed, 55 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility.html b/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility.html
new file mode 100644
index 0000000000..f50ffaad34
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility.html
@@ -0,0 +1,55 @@
+<!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>