web-animations/interfaces/Animatable/getAnimations-iframe.html

<!DOCTYPE html>
<title>getAnimations in dirty iframe</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<style>
  iframe {
    width: 200px;
    height: 40px;
  }
</style>
<body>
<script>

  const createFrame = async test => {
      const iframe = createElement(test, "iframe");
      const contents = "" +
        "<style>" +
        "  div { color: red; }" +
        "  @keyframes test {" +
        "    from { color: green; }" +
        "    to { color: green; }" +
        "  }" +
        "  @media (min-width: 300px) {" +
        "    div { animation: test 1s linear forwards; }" +
        "  }" +
        "</style>" +
        "<div id=div>Green</div>";
      iframe.setAttribute("srcdoc", contents);
      await new Promise(resolve => iframe.addEventListener("load", resolve));
      return iframe;
  };

  const iframeTest = (getAnimations, interfaceName) => {
      promise_test(async test => {
        const frame = await createFrame(test);
        const inner_div = frame.contentDocument.getElementById('div');
        assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)');

        frame.style.width = '400px';
        const animations = getAnimations(inner_div);
        assert_equals(animations.length, 1);
        assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)');
      }, `Calling ${interfaceName}.getAnimations updates layout of parent frame if needed`);
  }

  iframeTest(element => element.getAnimations(), 'Element');
  iframeTest(element => element.ownerDocument.getAnimations(), 'Document');

</script>
</body>