commit 48a0369984206d8c20307baa06884322f01f6a0b parent 75df357a1ac12830baa33d1493cd89a02b840af5 Author: fantasai <fantasai.bugs@inkedblade.net> Date: Tue, 14 Oct 2025 22:24:08 +0000 Bug 1993206 [wpt PR 55295] - [css-anchor-position-1] Add position-area version of position-visibility-no-overflow-scroll, a=testonly Automatic update from web-platform-tests [css-anchor-position-1] Add position-area version of position-visibility-no-overflow-scroll -- wpt-commits: e0a2988412863b7dea00ea9cd36aaf484f4e8f65 wpt-pr: 55295 Diffstat:
| A | testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-002.html | | | 52 | ++++++++++++++++++++++++++++++++++++++++++++++++++++ |
1 file changed, 52 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-002.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-002.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow + scrolling + position-area</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility"> +<link rel="match" href="position-visibility-no-overflow-scroll-ref.html"> +<style> + #container { + position: relative; + width: 400px; + height: 150px; + overflow: hidden; + } + #scroll-container { + overflow: hidden scroll; + width: 100%; + height: 100%; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + width: 100px; + height: 100px; + } +</style> + +<div id="container"> +<div id="scroll-container"> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div class="anchor" style="anchor-name: --a2; position: relative; top: 100px">anchor2</div> + <div id="target1" class="target" style="position-anchor: --a1; position-area: bottom; background: green">target1</div> + <div id="target2" class="target" style="position-anchor: --a2; position-area: top; background: red">target2</div> + <div style="height: 300px"></div> +</div> +</div> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.getElementById('scroll-container').scrollTop = 50; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html>