diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-animations/display-none-dont-cancel.tentative.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-animations/display-none-dont-cancel.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-animations/display-none-dont-cancel.tentative.html | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/display-none-dont-cancel.tentative.html b/testing/web-platform/tests/css/css-animations/display-none-dont-cancel.tentative.html new file mode 100644 index 0000000000..6ae115803b --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/display-none-dont-cancel.tentative.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://drafts.csswg.org/css-display-4/#display-animation"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6429"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-animations/support/testcommon.js"></script> + +<div id=target1>hello</div> +<style> +@keyframes display1 { + 0% { display: none; } + 100% { display: inline; } +} +.animate1 { + animation: display1 1s infinite; +} +</style> +<script> +promise_test(async () => { + let numAnimationstartFired = 0; + target1.addEventListener('animationstart', () => numAnimationstartFired++); + + await waitForAnimationFrames(1); + target1.classList.add('animate1'); + await waitForAnimationFrames(2); + + assert_equals(getComputedStyle(target1).display, 'inline', + 'The display should be inline during the animation.'); + assert_equals(numAnimationstartFired, 1, + 'Only one animation should start.'); +}, 'display:none animating to display:inline should be inline for the whole animation.'); +</script> + +<div id=target2>hello</div> +<style> +@keyframes display2 { + 0% { display: var(--none-value); } + 100% { display: inline; } +} +.animate2 { + animation: display2 1s infinite; +} +#target2 { + --none-value: none; +} +</style> +<script> +promise_test(async () => { + let numAnimationstartFired = 0; + target2.addEventListener('animationstart', () => numAnimationstartFired++); + + await waitForAnimationFrames(1); + target2.classList.add('animate2'); + await waitForAnimationFrames(2); + + assert_equals(getComputedStyle(target2).display, 'inline', + 'The display should be inline during the animation.'); + assert_equals(numAnimationstartFired, 1, + 'Only one animation should start.'); +}, 'A CSS variable of display:none animating to display:inline should be inline for the whole animation.'); +</script> + +<div id=target3>hello</div> +<style> +@keyframes display3 { + 0% { display: none; } + 100% { display: none; } +} +.animate3 { + animation: display3 1s infinite; +} +</style> +<script> +promise_test(async () => { + let numAnimationstartFired = 0; + target3.addEventListener('animationstart', () => numAnimationstartFired++); + + await waitForAnimationFrames(1); + target3.classList.add('animate3'); + await waitForAnimationFrames(2); + + assert_equals(getComputedStyle(target3).display, 'none', + 'The display should be none and the animation should keep running.'); + assert_equals(numAnimationstartFired, 1, + 'Only one animation should start.'); +}, 'Animating from display:none to display:none should not cancel the animation.'); +</script> + +<div id=target4>hello</div> +<style> +@keyframes display4 { + 0% { display: var(--none-value); } + 100% { display: var(--none-value); } +} +.animate4 { + animation: display4 1s infinite; +} +#target4 { + --none-value: none; +} +</style> +<script> +promise_test(async () => { + let numAnimationstartFired = 0; + target4.addEventListener('animationstart', () => numAnimationstartFired++); + + await waitForAnimationFrames(1); + target4.classList.add('animate4'); + await waitForAnimationFrames(2); + + assert_equals(getComputedStyle(target4).display, 'none', + 'The display should be none and the animation should keep running.'); + assert_equals(numAnimationstartFired, 1, + 'Only one animation should start.'); +}, 'Animating from display:none to display:none with an intermediate variable should not cancel the animation.'); +</script> + +<div id=target5>hello</div> +<style> +@keyframes display5 { + 0% { --display: none; } + 100% { --display: none; } +} +.animate5 { + animation: display5 1s infinite; +} +#target5 { + display: var(--display, block); +} +</style> +<script> +promise_test(async () => { + let numAnimationstartFired = 0; + target5.addEventListener('animationstart', () => numAnimationstartFired++); + + await waitForAnimationFrames(1); + target5.classList.add('animate5'); + await waitForAnimationFrames(2); + + assert_equals(getComputedStyle(target5).display, 'none', + 'The display should be none and the animation should keep running.'); + assert_equals(numAnimationstartFired, 1, + 'Only one animation should start.'); +}, 'Animating a variable of "none" which gets set to display elsewhere should not cancel the animation.'); +</script> |