diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html new file mode 100644 index 0000000000..50f1154532 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when the anchor attribute 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; + } + #anchor1, #anchor2 { + width: 100px; + } + #anchor1 { + background: wheat; + height: 50px; + } + #anchor2 { + background: tomato; + height: 90px; + } + #anchored { + position: absolute; + width: anchor-size(width); + height: anchor-size(height); + top: anchor(top); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + transition-property: top, height; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=anchor1>Anchor1</div> + <div id=anchor2>Anchor2</div> + <div id=anchored anchor=anchor1></div> +</div> +<script> + test(() => { + assert_equals(anchored.offsetTop, 0); + assert_equals(anchored.offsetHeight, 50); + anchored.setAttribute('anchor', 'anchor2'); + assert_equals(anchored.offsetTop, 25); + assert_equals(anchored.offsetHeight, 70); + }, 'Transition when the anchor attribute changes'); +</script> |