diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html b/testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html new file mode 100644 index 0000000000..4dbe863419 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html @@ -0,0 +1,124 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSSTransition.startTime</title> +<!-- TODO: Add a more specific link for this once it is specified. --> +<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/helper.js"></script> +<div id="log"></div> +<script> + +'use strict'; + +test(t => { + const div = addDiv(t, { + style: 'margin-left: 100px; transition: margin-left 100s linear 100s', + }); + getComputedStyle(div).marginLeft; + div.style.marginLeft = '200px'; + const animation = div.getAnimations()[0]; + + assert_equals(animation.startTime, null, 'startTime is unresolved'); +}, 'The start time of a newly-created transition is unresolved'); + +promise_test(async t => { + const div = addDiv(t); + + div.style.left = '0px'; + div.style.top = '0px'; + getComputedStyle(div).transitionProperty; + + div.style.transition = 'all 100s'; + div.style.left = '100px'; + div.style.top = '100px'; + + let animations = div.getAnimations(); + assert_equals(animations.length, 2); + await waitForAllAnimations(animations); + + assert_equals(animations[0].startTime, animations[1].startTime, + 'CSS transitions started together have the same start time'); + + await waitForAnimationFrames(1); + + div.style.backgroundColor = 'green'; + + animations = div.getAnimations(); + assert_equals(animations.length, 3); + await waitForAllAnimations(animations); + + assert_less_than(animations[1].startTime, animations[2].startTime, + 'A CSS transition added in a later frame has a later start time'); +}, 'The start time of transitions is based on when they are generated'); + +test(t => { + const div = addDiv(t, { + style: 'margin-left: 100px; transition: margin-left 100s linear 100s', + }); + getComputedStyle(div).marginLeft; + div.style.marginLeft = '200px'; + const animation = div.getAnimations()[0]; + + const timelineTime = animation.timeline.currentTime; + animation.startTime = timelineTime; + + assert_times_equal( + animation.startTime, + timelineTime, + 'Check setting of startTime actually works' + ); +}, 'The start time of a transition can be set'); + +promise_test(async t => { + const div = addDiv(t, { + style: 'margin-left: 100px; transition: margin-left 100s linear 100s', + }); + getComputedStyle(div).marginLeft; + div.style.marginLeft = '200px'; + const animation = div.getAnimations()[0]; + + await animation.ready; + + const timelineTime = animation.timeline.currentTime; + const marginLeft = () => parseFloat(getComputedStyle(div).marginLeft); + + animation.startTime = timelineTime - 100 * MS_PER_SEC; + assert_equals(marginLeft(), 100); + + animation.startTime = timelineTime - 150 * MS_PER_SEC; + assert_equals(marginLeft(), 150); +}, 'The start time can be set to seek a transition'); + +promise_test(async t => { + const div = addDiv(t, { + style: 'margin-left: 100px; transition: margin-left 100s linear 100s', + }); + const eventWatcher = new EventWatcher(t, div, [ + 'transitionstart', + 'transitionend', + ]); + getComputedStyle(div).marginLeft; + div.style.marginLeft = '200px'; + const animation = div.getAnimations()[0]; + + await animation.ready; + + const timelineTime = animation.timeline.currentTime; + + animation.startTime = timelineTime - 100 * MS_PER_SEC; + await frameTimeout( + eventWatcher.wait_for('transitionstart'), + 2, + 'transitionstart' + ); + + animation.startTime = timelineTime - 200 * MS_PER_SEC; + await frameTimeout( + eventWatcher.wait_for('transitionend'), + 2, + 'transitionend' + ); +}, 'Seeking a transition using start time dispatches transition events'); + +</script> |