diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:14:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:14:29 +0000 |
| commit | fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8 (patch) | |
| tree | 4c1ccaf5486d4f2009f9a338a98a83e886e29c97 /testing/web-platform/tests/css/css-transitions | |
| parent | Releasing progress-linux version 124.0.1-1~progress7.99u1. (diff) | |
| download | firefox-fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8.tar.xz firefox-fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8.zip | |
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-transitions')
| -rw-r--r-- | testing/web-platform/tests/css/css-transitions/all-with-discrete.tentative.html | 41 | ||||
| -rw-r--r-- | testing/web-platform/tests/css/css-transitions/transition-behavior.html | 122 |
2 files changed, 122 insertions, 41 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/all-with-discrete.tentative.html b/testing/web-platform/tests/css/css-transitions/all-with-discrete.tentative.html deleted file mode 100644 index 37946717b4..0000000000 --- a/testing/web-platform/tests/css/css-transitions/all-with-discrete.tentative.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<link rel=author href="mailto:jarhar@chromium.org"> -<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/css-animations/support/testcommon.js"></script> - -<div class=testcase id=discrete>Allow discrete</div> -<div class=testcase id=normal>No discrete</div> - -<style> -.testcase { - float: left; - width: 100px; - height: 100px; - transition: all 1s; -} -#discrete { - transition-behavior: allow-discrete; -} -.animated { - float: right; -} -</style> - -<script> -promise_test(async () => { - await waitForAnimationFrames(2); - // Regression test for https://crbug.com/1518561 - normal.classList.add('animated'); - const normalAnims = normal.getAnimations(); - assert_equals(normalAnims.length, 0, - "Started a discrete property transition on a normal element"); - - discrete.classList.add('animated'); - const anims = discrete.getAnimations(); - assert_equals(anims.length, 1, - "Did not start a discrete-property transition"); - assert_equals(anims[0].transitionProperty, 'float'); -}, 'transition:all with transition-behavior:allow-discrete should animate discrete properties.'); -</script> diff --git a/testing/web-platform/tests/css/css-transitions/transition-behavior.html b/testing/web-platform/tests/css/css-transitions/transition-behavior.html new file mode 100644 index 0000000000..fa24509a37 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-behavior.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-behavior-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-animations/support/testcommon.js"></script> + +<div class=testcase id=discrete>Allow discrete</div> +<div class=testcase id=normal>No discrete</div> + +<style> +.testcase { + float: left; + width: 100px; + height: 100px; + transition: all 1s; +} +#discrete { + transition-behavior: allow-discrete; +} +.animated { + float: right; +} +</style> + +<script> +promise_test(async () => { + await waitForAnimationFrames(2); + // Regression test for https://crbug.com/1518561 + normal.classList.add('animated'); + const normalAnims = normal.getAnimations(); + assert_equals(normalAnims.length, 0, + "Should not start a discrete property transition"); + + discrete.classList.add('animated'); + const anims = discrete.getAnimations(); + assert_equals(anims.length, 1, + "Should start a discrete property transition"); + assert_equals(anims[0].transitionProperty, 'float'); +}, 'transition-behavior:allow-discrete should animate discrete properties.'); + +promise_test(async t => { + const div = addDiv(t, { + style: 'transition: all 1s normal, float 1s allow-discrete; float: left', + }); + getComputedStyle(div).float; + + div.style.float = 'right'; + const anims = div.getAnimations(); + assert_equals(anims.length, 1, + "Should start a discrete property transition"); +}, 'transition-behavior:allow-discrete overlaps the previous normal value.'); + +promise_test(async t => { + const div = addDiv(t, { + style: 'transition: all 1s allow-discrete, float 1s normal; float: left', + }); + getComputedStyle(div).float; + + div.style.float = 'right'; + const anims = div.getAnimations(); + assert_equals(anims.length, 0, + "Should not start a discrete property transition"); +}, 'transition-behavior:normal overlaps the previous allow-discrete value.'); + +promise_test(async t => { + const div = addDiv(t, { + style: 'transition: position 1s allow-discrete; position: relative', + }); + getComputedStyle(div).position; + + div.style.position = 'static'; + assert_equals(div.getAnimations().length, 1, + "Should start a discrete property transition"); + + div.style.transitionBehavior = "normal"; + div.style.position = 'absolute'; + assert_equals(getComputedStyle(div).position, "absolute"); + assert_equals(div.getAnimations().length, 0, + "The running transition should be cancelled"); +}, 'transition-behavior changed to normal should stop the running discrete ' + + 'transitions.'); + +promise_test(async t => { + const div = addDiv(t, { + style: 'transition: clip-path 5s normal; clip-path: circle(50px)', + }); + getComputedStyle(div).transition; + + div.style.clipPath = "circle(farthest-side)"; + assert_equals(getComputedStyle(div).clipPath, "circle(farthest-side)"); + assert_equals(div.getAnimations().length, 0, + "Should not start a transition of discrete animation values"); + + div.style.transitionBehavior = "allow-discrete"; + div.style.clipPath = "circle(200px)"; + assert_equals(getComputedStyle(div).clipPath, "circle(farthest-side)"); + assert_equals(div.getAnimations().length, 1, + "Should start a transition for discrete animation values"); +}, 'transition-behavior:allow-discrete should animate for values fallback to ' + + 'discrete animations.'); + +promise_test(async t => { + const div = addDiv(t, { + style: 'transition: clip-path 5s allow-discrete; clip-path: circle(50px)', + }); + getComputedStyle(div).transition; + + div.style.clipPath = "circle(farthest-side)"; + assert_equals(getComputedStyle(div).clipPath, "circle(50px)"); + assert_equals(div.getAnimations().length, 1, + "Should start a transition for discrete animation values"); + + div.style.transitionBehavior = "normal"; + div.style.clipPath = "ellipse()"; + assert_equals(getComputedStyle(div).clipPath, "ellipse()"); + assert_equals(div.getAnimations().length, 0, + "The running transition should be cancelled"); +}, 'transition-behavior:normal should cancel the running transitions whose ' + + 'animation values are not interpolatable'); + +</script> |