commit 180aacb3e7298f77492a19f39eb9231bfaa5454b parent 3ff8f78bc2f03852636052309971067180d6c1fd Author: fantasai <fantasai.bugs@inkedblade.net> Date: Fri, 31 Oct 2025 08:55:36 +0000 Bug 1996903 [wpt PR 55718] - [css-anchor-position-1] Allow overflow into the safe area for scrollable containing blocks, a=testonly Automatic update from web-platform-tests [css-anchor-position-1] Allow overflow into the safe area for scrollable CBs See https://github.com/w3c/csswg-drafts/issues/12106 -- wpt-commits: 93c1428185df75ecdd9e75d1ba5c2d836cedc006 wpt-pr: 55718 Diffstat:
| A | testing/web-platform/tests/css/css-anchor-position/position-area-alignment-overflow-001-ref.html | | | 87 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | testing/web-platform/tests/css/css-anchor-position/position-area-alignment-overflow-001.html | | | 73 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 160 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-overflow-001-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-overflow-001-ref.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<title>Reference: position-area normal alignment overflow in a scrollable container</title> +<style> + .container { + position: relative; + overflow: scroll; + scrollbar-width: none; + width: 100px; + height: 120px; + border: solid; + margin: 1em; + float: left; + } + .anchor { + border: solid blue 10px; + inset: 0; + place-self: center; + position: absolute; + } + .test { + border: solid 5px #0084; + box-sizing: border-box; + position: absolute; + } + .start-inline { + margin-inline: 0 -10px; + } + .start-block { + margin-block: 0 -10px; + } + .end-inline { + margin-inline: -10px 0; + } + .end-block { + margin-block: -10px 0; + } + .center-inline { + margin-inline: -5px; + } + .center-block { + margin-block: -5px; + } +</style> + +<div class="container" title="TB LTR"> + <div> + <div class="anchor"></div> + <div class="test start-inline start-block" style="inset: 0 60px 70px 0"></div> + <div class="test start-inline start-block" style="inset: 70px 0 0 60px"></div> + <div class="test center-inline center-block" style="inset: 50px 40px 50px 40px"></div> + </div> +</div> + +<div class="container" title="TB LTR"> + <div class="anchor"></div> + <div class="test start-inline start-block" style="inset: 0 0 70px"></div> + <div class="test start-inline start-block" style="inset: 70px 0 0"></div> + <div class="test center-inline start-block" style="inset: 0 40px"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl" title="RL TTB"> + <div class="anchor"></div> + <div class="test start-inline start-block" style="inset: 0 60px 70px 0"></div> + <div class="test start-inline start-block" style="inset: 70px 0 0 60px"></div> + <div class="test center-inline center-block" style="inset: 50px 40px 50px 40px"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl" title="RL TTB"> + <div class="anchor"></div> + <div class="test start-inline start-block" style="inset: 0 0 70px"></div> + <div class="test start-inline start-block" style="inset: 70px 0 0"></div> + <div class="test center-block start-inline" style="inset: 0 40px"></div> +</div> + +<div class="container" style="writing-mode: vertical-lr; direction: rtl;" title="LR BTT"> + <div class="anchor"></div> + <div class="test start-inline start-block" style="inset: 0 60px 70px 0"></div> + <div class="test start-inline start-block" style="inset: 70px 0 0 60px"></div> + <div class="test center-inline center-block" style="inset: 50px 40px 50px 40px"></div> +</div> + +<div class="container" style="writing-mode: vertical-lr; direction: rtl;" title="LR BTT"> + <div class="anchor"></div> + <div class="test start-inline start-block" style="inset: 0 0 70px"></div> + <div class="test start-inline start-block" style="inset: 70px 0 0"></div> + <div class="test center-block start-inline" style="inset: 0 40px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-overflow-001.html b/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-overflow-001.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<title>Test: position-area normal alignment overflow in a scrollable container</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety-position"> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment"> +<meta name="assert" content="Test passes if alignment overflow is kept away from the unscrollable region (only)."> +<style> + .container { + position: relative; + overflow: scroll; + scrollbar-width: none; + width: 100px; + height: 120px; + border: solid; + margin: 1em; + float: left; + } + .anchor { + border: solid blue 10px; + anchor-name: --foo; + inset: 0; + place-self: center; + position: absolute; + } + .test { + border: solid 5px #0084; + position: absolute; + position-anchor: --foo; + width: 100%; + height: 100%; + } +</style> + +<div class="container" title="TB LTR"> + <div class="anchor"></div> + <div class="test" style="position-area: top left"></div> + <div class="test" style="position-area: bottom right"></div> + <div class="test" style="position-area: center"></div> +</div> + +<div class="container" title="TB LTR"> + <div class="anchor"></div> + <div class="test" style="position-area: top"></div> + <div class="test" style="position-area: bottom"></div> + <div class="test" style="position-area: span-all center"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl" title="RL TTB"> + <div class="anchor"></div> + <div class="test" style="position-area: top left"></div> + <div class="test" style="position-area: bottom right"></div> + <div class="test" style="position-area: center"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl" title="RL TTB"> + <div class="anchor"></div> + <div class="test" style="position-area: top"></div> + <div class="test" style="position-area: bottom"></div> + <div class="test" style="position-area: center span-all"></div> +</div> + +<div class="container" style="writing-mode: vertical-lr; direction: rtl;" title="LR BTT"> + <div class="anchor"></div> + <div class="test" style="position-area: top left"></div> + <div class="test" style="position-area: bottom right"></div> + <div class="test" style="position-area: center"></div> +</div> + +<div class="container" style="writing-mode: vertical-lr; direction: rtl;" title="LR BTT"> + <div class="anchor"></div> + <div class="test" style="position-area: top"></div> + <div class="test" style="position-area: bottom"></div> + <div class="test" style="position-area: center span-all"></div> +</div>