diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-001.html | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-001.html new file mode 100644 index 0000000000..96d5f996ef --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-001.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>Tests `anchor` function when anchor positions are changed dynamically</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> +<link rel="author" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/test-common.js"></script> +<style> +#container { + position: relative; +} +#a1 { + anchor-name: --a1; + background: orange; + margin-left: 100px; + margin-top: 100px; + width: 50px; + height: 50px; +} +.after #a1 { + width: 100px; + height: 100px; +} +#a2 { + anchor-name: --a2; + background: purple; + margin-left: 250px; + margin-top: 350px; + width: 100px; + height: 100px; +} +.after #a2 { + margin-left: 500px; + margin-top: 100px; +} +#target { + background: green; + position: absolute; + left: anchor(--a1 right); + top: anchor(--a1 bottom); + right: anchor(--a2 left); + bottom: anchor(--a2 top); +} +#ref { + background: red; + position: absolute; + left: 200px; + top: 100px; + width: 300px; + height: 100px; +} +</style> +<body> + <div id="container"> + <div id="a1"></div> + <div id="a2"></div> + <div id="ref"></div> + <div id="target" + data-offset-x=200 data-offset-y=100 + data-expected-width=300 data-expected-height=100></div> + </div> +<script type="module"> +document.body.offsetTop; // Force layout. +container.classList.add('after'); +await checkLayoutForAnchorPos('#target'); +</script> +</body> |