diff options
Diffstat (limited to 'testing/web-platform/tests/web-animations/interfaces/DocumentTimeline')
2 files changed, 135 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html b/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html new file mode 100644 index 0000000000..ca0997ac8f --- /dev/null +++ b/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/constructor.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>DocumentTimeline constructor tests</title> +<link rel="help" href="https://drafts.csswg.org/web-animations/#the-documenttimeline-interface"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="../../resources/timing-override.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(t => { + const timeline = new DocumentTimeline(); + + assert_times_equal(timeline.currentTime, document.timeline.currentTime); +}, 'An origin time of zero is used when none is supplied'); + +test(t => { + const timeline = new DocumentTimeline({ originTime: 0 }); + assert_times_equal(timeline.currentTime, document.timeline.currentTime); +}, 'A zero origin time produces a document timeline with a current time ' + + 'identical to the default document timeline'); + +test(t => { + const timeline = new DocumentTimeline({ originTime: 10 * MS_PER_SEC }); + + assert_times_equal(timeline.currentTime, + (document.timeline.currentTime - 10 * MS_PER_SEC)); +}, 'A positive origin time makes the document timeline\'s current time lag ' + + 'behind the default document timeline'); + +test(t => { + const timeline = new DocumentTimeline({ originTime: -10 * MS_PER_SEC }); + + assert_times_equal(timeline.currentTime, + (document.timeline.currentTime + 10 * MS_PER_SEC)); +}, 'A negative origin time makes the document timeline\'s current time run ' + + 'ahead of the default document timeline'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/style-change-events.html b/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/style-change-events.html new file mode 100644 index 0000000000..c1607e6fb9 --- /dev/null +++ b/testing/web-platform/tests/web-animations/interfaces/DocumentTimeline/style-change-events.html @@ -0,0 +1,92 @@ +<!doctype html> +<meta charset=utf-8> +<title>DocumentTimeline interface: style change events</title> +<link rel="help" + href="https://drafts.csswg.org/web-animations-1/#model-liveness"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +// NOTE: If more members are added to the DocumentTimeline interface it might be +// better to rewrite these test in the same style as: +// +// web-animations/interfaces/Animation/style-change-events.html +// web-animations/interfaces/KeyframeEffect/style-change-events.html + +promise_test(async t => { + const div = createDiv(t); + + let gotTransition = false; + div.addEventListener('transitionrun', () => { + gotTransition = true; + }); + + // Create a covering animation but don't play it yet. + const coveringAnimation = new Animation( + new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC) + ); + + // Setup transition start point. + div.style.transition = 'opacity 100s'; + getComputedStyle(div).opacity; + + // Update specified style but don't flush style. + div.style.opacity = '0.5'; + + // Get the currentTime + document.timeline.currentTime; + + // Run the covering animation + coveringAnimation.play(); + + // If getting DocumentTimeline.currentTime produced a style change event it + // will trigger a transition. Otherwise, the covering animation will cause + // the before-change and after-change styles to be the same such that no + // transition is triggered on the next restyle. + + // Wait for a couple of animation frames to give the transitionrun event + // a chance to be dispatched. + await waitForAnimationFrames(2); + + assert_false(gotTransition, 'A transition should NOT have been triggered'); +}, 'DocumentTimeline.currentTime does NOT trigger a style change event'); + +promise_test(async t => { + const div = createDiv(t); + + let gotTransition = false; + div.addEventListener('transitionrun', () => { + gotTransition = true; + }); + + // Create a covering animation but don't play it yet. + const coveringAnimation = new Animation( + new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC) + ); + + // Setup transition start point. + div.style.transition = 'opacity 100s'; + getComputedStyle(div).opacity; + + // Update specified style but don't flush style. + div.style.opacity = '0.5'; + + // Create a new DocumentTimeline + new DocumentTimeline(); + + // Run the covering animation + coveringAnimation.play(); + + // Wait for a couple of animation frames to give the transitionrun event + // a chance to be dispatched. + await waitForAnimationFrames(2); + + assert_false(gotTransition, 'A transition should NOT have been triggered'); +}, 'DocumentTimeline constructor does NOT trigger a style change event'); + +</script> +</body> |