diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-transitions/starting-style-size-container.html')
-rw-r--r-- | testing/web-platform/tests/css/css-transitions/starting-style-size-container.html | 53 |
1 files changed, 47 insertions, 6 deletions
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> |