correct-events-for-short-animations-with-syncbases.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:
- /svg/animations/correct-events-for-short-animations-with-syncbases.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>Correct events for short animations with syncbases</title>

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

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

<link rel="author" title="Edvard Thörnros" href="mailto:edvardt@opera.com">

<link rel="help" href="https://svgwg.org/specs/animations/#TimingAttributes">

<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">

  <g id="a" opacity="0">

    <animate attributeName="opacity" from="0" to="1" begin="0ms;last.end+100ms" dur="10ms" fill="freeze"

      id="first"/>

    <animate attributeName="opacity" from="1" to="0" begin="last.end" dur="10ms" fill="freeze"/>

    <rect x="0" y="0" width="50" height="50" fill="#AA0"/>

  </g>

  <g id="b" opacity="0">

    <animate attributeName="opacity" from="1" to="1" begin="first.end+10ms" dur="10ms" fill="freeze"

      id="last" onend="onend_filling()"/>

    <animate attributeName="opacity" from="1" to="0" begin="last.end+1ms" dur="10ms" fill="freeze"

      onbegin="onend_clearing()"/>

    <rect x="50" y="0" width="50" height="50" fill="#AA0"/>

  </g>

</svg>

<script>

  let onend_clearing = null;

  let onend_filling = null;

  async_test(t => {

    let svg = document.querySelector("svg");

    // Deliberate no a

    let b = document.querySelector("#b");

    let passed = false;

    let triggers = 0;

    let filling_steps = 0;

    let runs = 3; // Issue 379751 broke after 2 cycles, hence this is a 3.

    onend_filling = t.step_func(() => {

      filling_steps++;

      if (filling_steps < (runs + 1)) return;

      svg.pauseAnimations();

      assert_unreached("Fired too many onend events.");

});

    onend_clearing = t.step_func(() => {

      triggers++;

      if (triggers != runs) return;

      svg.pauseAnimations();

      // We don't check the first element, since it might have started fading in

      assert_not_equals(window.getComputedStyle(b, null).opacity, "1");

      t.done();

});

});

</script>