document-timelines.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /web-animations/timing-model/timelines/document-timelines.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset=utf-8>

<title>Document timelines</title>

<link rel="help" href="https://drafts.csswg.org/web-animations/#document-timelines">

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

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

<script src="../../testcommon.js"></script>

<div id="log"></div>

<script>

'use strict';

async_test(t => {

  assert_greater_than_equal(document.timeline.currentTime, 0,

    'The current time is initially is positive or zero');

  // document.timeline.currentTime should be set even before document

  // load fires. We expect this code to be run before document load and hence

  // the above assertion is sufficient.

  // If the following assertion fails, this test needs to be redesigned.

  assert_not_equals(document.readyState, 'complete',

    'Test is running prior to document load');

  // Test that the document timeline's current time is measured from

  // navigationStart.

//

  // We can't just compare document.timeline.currentTime to

  // window.performance.now() because currentTime is only updated on a sample

  // so we use requestAnimationFrame instead.

  window.requestAnimationFrame(rafTime => {

    t.step(() => {

      assert_equals(document.timeline.currentTime, rafTime,

                    'The current time matches requestAnimationFrame time');

});

    t.done();

});

}, 'Document timelines report current time relative to navigationStart');

async_test(t => {

  window.requestAnimationFrame(rafTime => {

    t.step(() => {

      const iframe = document.createElement('iframe');

      document.body.appendChild(iframe);

      assert_greater_than_equal(iframe.contentDocument.timeline.currentTime, 0,

        'The current time of a new iframe is initially is positive or zero');

});

    t.done();

});

}, 'Child frames do not report negative initial times');

promise_test(async t => {

  const iframe = document.createElement("iframe");

  iframe.srcdoc = "<html style=\"display:none\"><meta charset=utf-8></html>";

  iframe.width = 10;

  iframe.height = 10;

  const loaded = new Promise(resolve => iframe.addEventListener("load", resolve));

  document.body.appendChild(iframe);

  t.add_cleanup(() => iframe.remove());

  await loaded;

  assert_equals(typeof iframe.contentDocument.timeline.currentTime, "number",

    "The current time of an initially hidden iframe is a number");

  assert_greater_than_equal(iframe.contentDocument.timeline.currentTime, 0,

    "The current time of an initially hidden iframe is positive or zero");

  iframe.style.display = "block";

  getComputedStyle(iframe).display;

  await new Promise(resolve => requestAnimationFrame(resolve));

  assert_greater_than(iframe.contentDocument.timeline.currentTime, 0,

    "The current time is positive after showing the iframe");

  const previousTime = iframe.contentDocument.timeline.currentTime;

  iframe.style.display = "none";

  getComputedStyle(iframe).display;

  await new Promise(resolve => requestAnimationFrame(resolve));

  assert_greater_than_equal(iframe.contentDocument.timeline.currentTime,

                            previousTime,

    "The current time does not go backwards after hiding the iframe again");

}, "Document timeline current time remains valid for a hidden iframe");

</script>