dependent-end-on-syncbase.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/animations/dependent-end-on-syncbase.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Dependent timed element end on syncbase</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<svg>

  <rect width="10" height="10" fill="blue">

    <set attributeName="fill" to="yellow" end="other.end" id="dependent"/>

  </rect>

  <rect x="10" width="10" height="10" fill="blue">

    <animate attributeName="fill" from="yellow" to="red"

             begin="indefinite" dur="10ms" id="other"/>

  </rect>

</svg>

<script>

  async_test(t => {

    let count = 0;

    let dependent = document.getElementById('dependent');

    dependent.addEventListener('endEvent', t.step_func(() => count++));

    let other = document.getElementById('other');

    // Wait for #other to end and check animation values.

    other.addEventListener('endEvent', t.step_func(() => {

      t.step_timeout(() => {

        assert_equals(count, 1);

        assert_equals(getComputedStyle(dependent, null).fill, 'rgb(0, 0, 255)');

        assert_equals(getComputedStyle(other, null).fill, 'rgb(0, 0, 255)');

        t.done();

});

    }));

    let svg = other.ownerSVGElement;

    // Check initial values.

    window.onload = t.step_func(() => {

      window.requestAnimationFrame(t.step_func(() => {

        assert_equals(count, 0);

        assert_equals(getComputedStyle(dependent, null).fill, 'rgb(255, 255, 0)');

        assert_equals(getComputedStyle(other, null).fill, 'rgb(0, 0, 255)');

        svg.unpauseAnimations();

      }));

});

    svg.pauseAnimations();

    other.beginElementAt(0.01);

});

</script>