diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:35:37 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:35:37 +0000 |
| commit | a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch) | |
| tree | 532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css/css-transitions | |
| parent | Adding debian version 126.0.1-1. (diff) | |
| download | firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip | |
Merging upstream version 127.0.
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/shadow-root-insertion.html | 43 | ||||
| -rw-r--r-- | testing/web-platform/tests/css/css-transitions/starting-style-size-container.html | 53 |
2 files changed, 90 insertions, 6 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/shadow-root-insertion.html b/testing/web-platform/tests/css/css-transitions/shadow-root-insertion.html new file mode 100644 index 0000000000..47fc665aa3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/shadow-root-insertion.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transitions: behavior when a shadow root is inserted while transitioning</title> +<meta name="assert" content="Checks the addition of a shadow root does not affect an in-flight transition"> +<link rel="help" href="https://drafts.csswg.org/css-transitions/"> + +<script src="/resources/testharness.js" type="text/javascript"></script> +<script src="/resources/testharnessreport.js" type="text/javascript"></script> +<script src="./support/helper.js" type="text/javascript"></script> + +</head> +<body> +<div id="log"></div> +<script> +test(t => { + // Start a 100s transition 50% of the way through + const div = addDiv(t, { + style: 'transition: height 100s -50s linear; height: 0px', + }); + getComputedStyle(div).height; + div.style.height = '100px'; + assert_equals( + getComputedStyle(div).height, + '50px', + 'Transition should be initially 50% complete' + ); + + // Add a shadow root + div.attachShadow({ mode: "open" }); + + // The transition on the height property should not have been canceled + assert_equals( + getComputedStyle(div).height, + '50px', + 'Transition should not have been canceled' + ); +}, 'addition of a shadow root should not cancel in-flight transitions'); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html b/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html index 92ad6e6125..1ad609dd90 100644 --- a/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html +++ b/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html @@ -5,32 +5,58 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/css-transitions/support/helper.js"></script> -<div id="container" style="width: 200px"> - <div id="target" style="display: none"></div> -</div> +<body> +</body> <style> #container { container-type: inline-size; + width: 100px; } #target { transition-property: background-color; transition-duration: 100s; transition-timing-function: steps(2, start); background-color: lime; + display: none; } @container (width > 300px) { @starting-style { #target { background-color: white; } } } - @container (width < 300px) { + @container ((width > 200px) and (width < 300px)) { + #target { + display: block; + } + @starting-style { + #target { background-color: white; } + } + } + @container (width < 200px) { @starting-style { #target { background-color: red; } } } </style> <script> + function setup(test) { + let container = document.createElement("div"); + container.id = "container"; + document.body.appendChild(container); + + let target = document.createElement("div"); + target.id = "target"; + container.appendChild(target); + + test.add_cleanup(() => { + target.remove(); + container.remove(); + }); + return [container, target]; + } + promise_test(async t => { + let [container, target] = setup(t); await waitForAnimationFrames(2); assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", "No transition while display:none"); @@ -38,6 +64,21 @@ target.style.display = "block"; await waitForAnimationFrames(2); assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)", - "@starting-style based on the size query evaluation from the same frame"); - }, "Triggered transition from first style update based on up-to-date container query"); + "@starting-style based on the size query evaluation from " + + "the same frame"); + }, "Triggered transition from first style update based on up-to-date " + + "container query"); + + promise_test(async t => { + let [container, target] = setup(t); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", + "No transition while display:none"); + container.style.width = "250px"; + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)", + "@starting-style based on the size query evaluation from " + + "the same frame"); + }, "Triggered transition from the display change inside the up-to-date " + + "container query"); </script> |