diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-05-15 03:34:42 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-05-15 03:34:42 +0000 |
commit | da4c7e7ed675c3bf405668739c3012d140856109 (patch) | |
tree | cdd868dba063fecba609a1d819de271f0d51b23e /testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html | |
parent | Adding upstream version 125.0.3. (diff) | |
download | firefox-da4c7e7ed675c3bf405668739c3012d140856109.tar.xz firefox-da4c7e7ed675c3bf405668739c3012d140856109.zip |
Adding upstream version 126.0.upstream/126.0
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html new file mode 100644 index 0000000000..cf65742b2d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when the result of anchor()/anchor-size() changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + .anchor { + position: absolute; + width: 50px; + height: 40px; + left: 60px; + top: 40px; + background: coral; + anchor-name: --a; + } + .shift { + left: 80px; + } + .grow { + width: 70px; + } + .anchored { + position: absolute; + width: anchor-size(width); + height: 40px; + position-anchor: --a; + top: anchor(bottom); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + background-color: skyblue; + } +</style> + +<div id=anchor_test class=cb> + <div class=anchor></div> + <div class=anchored style="transition-property:left"></div> +</div> +<script> + test(() => { + let anchor = anchor_test.querySelector('.anchor'); + let anchored = anchor_test.querySelector('.anchored'); + assert_equals(anchored.offsetLeft, 110); + anchor.classList.add('shift'); + assert_equals(anchored.offsetLeft, 120); + }, 'Transition when the result of anchor() changes'); +</script> + +<div id=anchor_size_test class=cb> + <div class=anchor></div> + <div class=anchored style="transition-property:width"></div> +</div> +<script> + test(() => { + let anchor = anchor_size_test.querySelector('.anchor'); + let anchored = anchor_size_test.querySelector('.anchored'); + assert_equals(anchored.offsetWidth, 50); + anchor.classList.add('grow'); + assert_equals(anchored.offsetWidth, 60); + }, 'Transition when the result of anchor-size() changes'); +</script> |