test_smilNoTarget.html

Enable keyboard shortcuts

<!doctype html>

<html>

<!--

https://bugzilla.mozilla.org/show_bug.cgi?id=2058776

-->

<head>

  <meta charset="utf-8">

  <title>Test timing of animation elements with no target attribute</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

</head>

<body>

<a target="_blank"

href="https://bugzilla.mozilla.org/show_bug.cgi?id=2058776">Mozilla Bug 2058776</a>

<p id="display"></p>

<div id="content">

<svg id="paused" width="100" height="100">

  <rect id="rect" width="10" height="10">

    <!-- No attributeName: these have nothing to animate but are still timed

         elements. -->

    <animate id="seekEnd" dur="1s"/>

    <animate id="seekBegin" begin="1s" dur="2s"/>

    <set id="late" to="50"/>

  </rect>

</svg>

<svg id="running" width="100" height="100">

  <rect id="rect2" width="10" height="10">

    <animate id="repeating" dur="0.05s" repeatCount="2"/>

    <set id="dependent" attributeName="x" to="20" begin="repeating.end"/>

  </rect>

</svg>

</div>

<pre id="test">

<script class="testbody" type="text/javascript">

SimpleTest.waitForExplicitFinish();

const pausedSVG = document.getElementById("paused");

pausedSVG.pauseAnimations();

pausedSVG.setCurrentTime(0);

function waitForEvent(elem, type) {

  return new Promise(resolve =>

    elem.addEventListener(type, resolve, { once: true })

);

function waitForFrames(n) {

  return new Promise(resolve => {

    let tick = () => (--n ? requestAnimationFrame(tick) : resolve());

    requestAnimationFrame(tick);

});

async function testSeeking() {

  const svg = pausedSVG;

  // Let the initial sample resolve the intervals.

  await waitForFrames(2);

  const seekEnd = document.getElementById("seekEnd");

  const seekBegin = document.getElementById("seekBegin");

  const ended = waitForEvent(seekEnd, "endEvent");

  const began = waitForEvent(seekBegin, "beginEvent");

  svg.setCurrentTime(1.5);

  await ended;

  ok(true, "Seeking past the end of an untargeted animation fires endEvent");

  await began;

  ok(true, "Seeking into an untargeted animation fires beginEvent");

  // An active animation that gains a target attribute starts animating it.

  const rect = document.getElementById("rect");

  is(rect.x.animVal.value, 0, "Untargeted <set> has no effect");

  document.getElementById("late").setAttribute("attributeName", "x");

  is(rect.x.animVal.value, 50,

     "<set> applies once it gains an attributeName");

// Listen before the document timeline starts so we can't miss any events.

const repeating = document.getElementById("repeating");

const repeated = waitForEvent(repeating, "repeatEvent");

const ended = waitForEvent(repeating, "endEvent");

const dependentBegan =

  waitForEvent(document.getElementById("dependent"), "beginEvent");

async function testEventsAndSyncbase() {

  await repeated;

  ok(true, "Untargeted animation fires repeatEvent");

  await ended;

  ok(true, "Untargeted animation fires endEvent");

  await dependentBegan;

  is(document.getElementById("rect2").x.animVal.value, 20,

     "Syncbase dependent of an untargeted animation is applied");

window.addEventListener("load", async () => {

  await testSeeking();

  await testEventsAndSyncbase();

  SimpleTest.finish();

});

</script>

</pre>

</body>

</html>