diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-013.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-013.html | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-013.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-013.html new file mode 100644 index 0000000000..3f1330d744 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-013.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/test-common.js"></script> +<style> +#cb { + position: relative; + width: 200px; + height: 200px; + border: solid 1px; +} + +#scroller { + width: 200px; + height: 200px; + overflow: scroll; +} + +#abspos { + position: absolute; + background: hotpink; + width: 50px; + height: 50px; + + inset-area: bottom; + position-try-options: flip-block; + position-anchor: --a; +} + +#anchor { + anchor-name: --a; + width: 50px; + height: 50px; + margin: 150px 0 150px 50px; + background: dodgerblue; +} + +</style> +<div id="cb"> + <div id="scroller"> + <div id="anchor"> + </div> + </div> + <div id="abspos"></div> +</div> + +<script> +promise_test(async () => { + await waitUntilNextAnimationFrame(); + assert_fallback_position(abspos, anchor, 'top'); +}); + +promise_test(async () => { + scroller.scrollTop = 50; + await waitUntilNextAnimationFrame(); + assert_fallback_position(abspos, anchor, 'bottom'); +}); + +promise_test(async () => { + scroller.scrollTop = 40; + await waitUntilNextAnimationFrame(); + assert_fallback_position(abspos, anchor, 'top'); +}); +</script> |