diff options
Diffstat (limited to 'testing/web-platform/tests/web-animations/interfaces/Animation')
3 files changed, 248 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/progress.tentative.html b/testing/web-platform/tests/web-animations/interfaces/Animation/progress.tentative.html new file mode 100644 index 0000000000..38f37cbfeb --- /dev/null +++ b/testing/web-platform/tests/web-animations/interfaces/Animation/progress.tentative.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Animation.progress</title> +<link rel="help" +href="https://drafts.csswg.org/web-animations-2/#the-progress-of-an-animation"> +<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'; + + +test(t => { + const animation = new Animation(null); + animation.startTime = document.timeline.currentTime; + assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero'); + assert_equals(animation.progress, null, 'progress is unresolved'); +}, 'progress of a newly created animation without an effect is unresolved'); + +test(t => { + // currentTime should be unresolved because the animation has no associated + // timeline. + const animation = new Animation(new KeyframeEffect(createDiv(t), null), null); + assert_equals(animation.currentTime, null, 'currentTime is unresolved'); + assert_equals(animation.progress, null, 'progress is unresolved'); +}, 'progress of an animation whose currentTime is unresolved is unresolved.'); + +test(t => { + const animation = new Animation(new KeyframeEffect(createDiv(t), null, + { duration: 0 }), document.timeline); + // Set the startTime to 20 seconds into the future. + animation.startTime = document.timeline.currentTime + 20 * MS_PER_SEC; + assert_less_than(animation.currentTime, 0, 'currentTime is negative'); + assert_approx_equals(animation.progress, 0, 0.01, 'progress is zero'); +}, "progress of an animation whose effect's endTime is zero is zero if its " + + "currentTime is negative."); + +test(t => { + const animation = new Animation(new KeyframeEffect(createDiv(t), null, + { duration: 0 }), document.timeline); + animation.startTime = document.timeline.currentTime; + assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero'); + assert_approx_equals(animation.progress, 1, 0.01, 'progress is one'); + + animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC; + assert_greater_than(animation.currentTime, 0, 'currentTime greater than zero'); + assert_approx_equals(animation.progress, 1, 0.01, 'progress is one'); +}, "progress of an animation whose effect's endTime is zero is one if its " + + "currentTime is non-negative."); + +test(t => { + const animation = new Animation(new KeyframeEffect(createDiv(t), null, + { duration: Infinity }), document.timeline); + + animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC; + assert_greater_than(animation.currentTime, 0, 'currentTime is positive'); + assert_approx_equals(animation.progress, 0, 0.01, 'progress is zero'); +}, "progress of an animation whose effect's endTime is infinity is zero."); + +test(t => { + const animation = new Animation(new KeyframeEffect(createDiv(t), null, + 200 * MS_PER_SEC), document.timeline); + animation.playbackRate = 2; + + animation.startTime = document.timeline.currentTime - 50 * MS_PER_SEC; + assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC, 'currentTime is 100s'); + assert_approx_equals(animation.progress, 0.5, 0.01, 'progress is zero'); + + animation.startTime = document.timeline.currentTime - 100 * MS_PER_SEC; + assert_time_equals_literal(animation.currentTime, 200 * MS_PER_SEC, 'currentTime is 200s'); + assert_approx_equals(animation.progress, 1, 0.01, 'progress is one'); + + animation.startTime = document.timeline.currentTime - 150 * MS_PER_SEC; + assert_time_equals_literal(animation.currentTime, 300 * MS_PER_SEC, 'currentTime is 300s'); + assert_approx_equals(animation.progress, 1, 0.01, 'progress is still one'); +}, "progress of an animation is calculated by currentTime / effect endTime."); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/scroll-timeline-progress.tentative.html b/testing/web-platform/tests/web-animations/interfaces/Animation/scroll-timeline-progress.tentative.html new file mode 100644 index 0000000000..b40e72482b --- /dev/null +++ b/testing/web-platform/tests/web-animations/interfaces/Animation/scroll-timeline-progress.tentative.html @@ -0,0 +1,166 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Animation.progress</title> +<link rel="help" +href="https://drafts.csswg.org/web-animations-2/#the-progress-of-an-animation"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<script src="../../../scroll-animations/scroll-timelines/testcommon.js"></script> +<body> + <style> + .scroller { + overflow-x: hidden; + overflow-y: auto; + height: 200px; + width: 100px; + will-change: transform; + } + .contents { + height: 1200px; + width: 100%; + } + #target { + height: 100px; + width: 100px; + background-color: green; + margin-top: -1000px; + } + </style> +<div id="log"></div> +<script> +'use strict'; + +promise_test(async t => { + const animation = createScrollLinkedAnimation(t); + const scroller = animation.timeline.source; + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + + assert_equals(animation.currentTime, null, + "The current time is null in Idle state."); + assert_equals(animation.progress, null, + "The progress is null since the currentTime is unresolved."); + + animation.play(); + assert_true(animation.pending, "Animation is in the pending state."); + assert_equals(animation.currentTime, null, + "The current time remains null while in the pending state."); + assert_equals(animation.progress, null, + "The progress is null since the currentTime is unresolved."); + + await animation.ready; + // Verify initial start and current times once ready. + assert_percents_equal(animation.currentTime, 0, + "The current time is resolved when ready."); + assert_equals(animation.progress, 0, "The progress is should be zero."); + + scroller.scrollTop = 0.4 * maxScroll; + + await waitForNextFrame(); + assert_percents_equal(animation.currentTime, 40, + "currentTime reflects progress as a percentage"); + assert_approx_equals(animation.progress, 0.4, 0.01, + "The progress is should match the scroll progress."); +}, "animation.progress reflects the progress of a scroll animation as a "+ + "number between 0 and 1"); + +promise_test(async t => { + const animation = createScrollLinkedAnimation(t); + const scroller = animation.timeline.source; + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + + animation.play(); + await animation.ready; + // Verify initial start and current times once ready. + assert_percents_equal(animation.currentTime, 0, + "The current time is resolved when ready."); + assert_equals(animation.progress, 0, "The progress is should be zero."); + + scroller.scrollTop = 0.4 * maxScroll; + await waitForNextFrame(); + + let timing = animation.effect.getComputedTiming(); + // iteration duration should be 100%, progress should reflect 40%. + assert_percents_equal(timing.duration, 100); + assert_percents_equal(animation.currentTime, 40, + "currentTime reflects progress as a percentage"); + assert_approx_equals(animation.progress, 0.4, 0.01, + "The progress is should match the scroll progress."); + timing = animation.effect.getComputedTiming(); + + animation.effect.updateTiming({ iterations: 2 }); + + timing = animation.effect.getComputedTiming(); + // iteration duration should be 50%, progress should still reflect 40% + // as it measures currentTime / effect endTime. + assert_percents_equal(timing.duration, 50); + assert_percents_equal(animation.currentTime, 40, + "currentTime reflects progress as a percentage"); + assert_approx_equals(animation.progress, 0.4, 0.01, + "The progress is should match the scroll progress."); +}, "animation.progress reflects the overall progress of a scroll animation " + + "with multiple iterations."); + +promise_test(async t => { + const scroller = createScroller(t); + const view_timeline = createViewTimeline(t); + + const animation = createAnimation(t); + animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) }; + animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) }; + animation.timeline = view_timeline; + + await animation.ready; + + // Cover range is [0, 300] + // Contain range is [100, 200] + // rangeStart offset of 10% => 110px + // rangeEnd offset of 90% => 190px + const target_pct = 40; + const target_scroll_top = 110 + (target_pct / 100) * (190 - 110); + scroller.scrollTop = target_scroll_top; + await waitForNextFrame(); + + const start_time = 110 / 300 * 100; + const timeline_time = target_scroll_top / 300 * 100; + const expected_current_time = timeline_time - start_time; + assert_percents_equal(animation.currentTime, expected_current_time, + "currentTime reflects progress as a percentage"); + assert_approx_equals(animation.progress, target_pct / 100, 0.01, + "progress should reflect fraction of view timeline range scroll through."); +}, "animation.progress reflects the overall progress of a scroll animation " + + "that uses a view-timeline."); + +promise_test(async t => { + const scroller = createScroller(t); + const view_timeline = createViewTimeline(t); + + const animation = createAnimation(t); + animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) }; + animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) }; + animation.timeline = view_timeline; + + await animation.ready; + + // Cover range is [0, 300] + // Contain range is [100, 200] + // rangeStart offset of 10% => 110px + // rangeEnd offset of 10% => 190px + + scroller.scrollTop = 100; + await waitForNextFrame(); + let timing = animation.effect.getComputedTiming(); + assert_less_than(animation.currentTime.value, 0, "currentTime is negative"); + assert_approx_equals(animation.progress, 0, 0.01, "progress is zero when " + + "scroll offset is less than range start."); + + scroller.scrollTop = 200; + await waitForNextFrame(); + assert_approx_equals(animation.currentTime.value, timing.endTime.value, 0.01, + "currentTime has reached endTime"); + assert_approx_equals(animation.progress, 1, 0.01, "progress is one when " + + "scroll offset goes past than range end."); +}, "progresss of a view-timeline is bounded between 0 and 1."); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/style-change-events.html b/testing/web-platform/tests/web-animations/interfaces/Animation/style-change-events.html index 0ec21657e3..d2d6e9d4c9 100644 --- a/testing/web-platform/tests/web-animations/interfaces/Animation/style-change-events.html +++ b/testing/web-platform/tests/web-animations/interfaces/Animation/style-change-events.html @@ -169,6 +169,7 @@ const tests = { // no effect. rangeStart: UsePropertyTest(animation => animation.rangeStart), rangeEnd: UsePropertyTest(animation => animation.rangeEnd), + progress: UsePropertyTest(animation => animation.progress), replaceState: UsePropertyTest(animation => animation.replaceState), ready: UsePropertyTest(animation => animation.ready), finished: UsePropertyTest(animation => { |