svg-graphics-element-003.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>View Timeline attached to an SVG graphics element (&lt;foreignObject>)</title>
</head>
<style type="text/css">
  @keyframes color {
    from { color: rgb(0, 0, 254); }
    to { color: rgb(0, 128, 0); }
  }

  #fo {
    animation: color auto linear both;
    animation-timeline: view();
    animation-range: exit-crossing;
  }
  .spacer {
    height:  100vh;
  }
</style>
<body>
<svg width="100" height="3000" color="red">
  <foreignObject id="fo" x="47.5" width="3000" height="5"
                 transform="rotate(90, 47.5, 0)">
    <div style="width: 100%; height: 200%; background-color: currentcolor"></div>
  </foreignObject>
</svg>
<div class="spacer"></div>
</body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script>
  promise_test(async t => {
    const scroller = document.scrollingElement;
    const target = document.getElementById('fo');
    const anim = target.getAnimations()[0];
    await anim.ready;
    assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 254)');
    scroller.scrollTop =
        0.5*(scroller.scrollHeight - scroller.clientHeight);
    await waitForNextFrame();
    assert_equals(getComputedStyle(target).color, 'rgb(0, 64, 127)');
  }, 'View timeline attached to SVG graphics element');
</script>
</html>
chromium/third_party/blink/web_tests/external/wpt/scroll-animations/view-timelines/svg-graphics-element-003.html
