inline-subject.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /scroll-animations/view-timelines/inline-subject.html - WPT Dashboard Interop Dashboard

<!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</title>

</head>

<style type="text/css">

  @keyframes bg {

    from { background-color: blue; }

    to { background-color: green; }

  #colorize {

    animation: bg steps(2, jump-none) both;

    animation-timeline: view();

    animation-range: contain;

    background-color:  red;

    color:  white;

  .spacer {

    height:  80vh;

</style>

<body>

<div class="spacer"></div>

<div id="content">

  <p>Hello <span id="colorize">world</span></p>

</div>

<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 anim = document.getAnimations()[0];

    await anim.ready;

    assert_equals(getComputedStyle(anim.effect.target)

        .backgroundColor, 'rgb(0, 0, 255)');

    scroller.scrollTop =

        scroller.scrollHeight - scroller.clientHeight;

    await waitForNextFrame();

    assert_equals(getComputedStyle(anim.effect.target)

          .backgroundColor, 'rgb(0, 128, 0)');

  }, 'View timeline attached to SVG graphics element');

</script>

</html>