diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html new file mode 100644 index 0000000000..b696ae0060 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<title>Tests that position fallback responds to scrolling</title> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<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 { + width: 400px; + height: 400px; + margin: 100px; + transform: scale(1); + outline: 1px solid black; +} + +#scroller { + width: 400px; + height: 400px; + overflow: scroll; +} + +#anchor { + width: 100px; + height: 100px; + margin-left: 150px; + margin-right: 275px; + margin-top: 300px; + margin-bottom: 300px; + background: orange; + anchor-name: --a; +} + +#anchored { + position: absolute; + background: green; + anchor-default: --a; + position-try-options: --f1, --f2; + width: 100px; height: 100px; + /* Above the anchor */ + left: anchor(--a left); + bottom: anchor(--a top); +} + +@position-try --f1 { + /* Left of the anchor */ + right: anchor(--a left); + top: anchor(--a top); + bottom: auto; + left: auto; +} + +@position-try --f2 { + /* Right of the anchor */ + left: anchor(--a right); + top: anchor(--a top); + bottom: auto; +} + +</style> + +<div id="cb"> + <div id="scroller"> + <div id="anchor"></div> + </div> + <div id="anchored"></div> +</div> + +<script> +promise_test(async () => { + await waitUntilNextAnimationFrame(); + assert_fallback_position(anchored, anchor, 'top'); +}, 'Should be above the anchor when at initial scroll position'); + +promise_test(async () => { + scroller.scrollTop = 200; + await waitUntilNextAnimationFrame(); + assert_fallback_position(anchored, anchor, 'top'); +}, 'Scroll down until the top edge of #anchor touches container but not overflowing'); + +promise_test(async () => { + scroller.scrollTop = 201; + await waitUntilNextAnimationFrame(); + assert_fallback_position(anchored, anchor, 'left'); +}, 'Scroll further down, making the first fallback position overflow by 1px'); + +promise_test(async () => { + scroller.scrollTop = 200; + await waitUntilNextAnimationFrame(); + assert_fallback_position(anchored, anchor, 'top'); +}, 'Scroll back up to reuse the first fallback position'); + +promise_test(async () => { + scroller.scrollTop = 249; + scroller.scrollLeft = 51; + await waitUntilNextAnimationFrame(); + assert_fallback_position(anchored, anchor, 'right'); +}, 'Scroll bottom-right to make the first three fallback positions overflow'); +</script> |