commit acf72786e620a63c1e1a51e7d17d0aa505d2ce30 parent de4d9502ef534c79460407c6f24ba62eaab1f5e4 Author: fantasai <fantasai.bugs@inkedblade.net> Date: Thu, 6 Nov 2025 21:35:48 +0000 Bug 1996926 [wpt PR 55722] - [css-anchor-position-1] position-area normal alignment towards non-auto inset, a=testonly Automatic update from web-platform-tests [css-anchor-position-1] position-area normal alignment towards non-auto inset (#55722) * Adds test for position-area normal alignment towards non-auto inset when only one inset is auto. * Updates some existing tests that have a single auto inset but don't expect it to have an effect. See https://github.com/w3c/csswg-drafts/issues/12512 -- wpt-commits: 12c24cae7ba88a42ed55f866d50b4d6d9f3a80e7 wpt-pr: 55722 Diffstat:
14 files changed, 318 insertions(+), 30 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-inset-001-expected.html b/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-inset-001-expected.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<title>position-area normal alignment vs insets</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment"> +<meta name="assert" content="Test passes if normal alignment aligns towards the non-auto inset."> +<style> + .container { + position: relative; + 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; + position: absolute; + width: 0; + height: 0; + } + .inset1 { + margin-bottom: auto; + margin-left: auto; + border-color: orange; + } + .inset2 { + margin-top: auto; + margin-right: auto; + border-color: teal; + } + .center { + margin: auto; + border-color: aqua; + } +</style> + +<div class="container"> + <div class="anchor"></div> + <div class="test inset1" style="inset: 0 60px 70px 0"></div> + <div class="test center" style="inset: 0 60px 70px 0"></div> + <div class="test inset2" style="inset: 0 60px 70px 0"></div> + + <div class="test inset1" style="inset: 70px 0 0 60px"></div> + <div class="test center" style="inset: 70px 0 0 60px"></div> + <div class="test inset2" style="inset: 70px 0 0 60px"></div> + + <div class="test inset1" style="inset: 50px 40px 50px 40px"></div> + <div class="test center" style="inset: 50px 40px 50px 40px"></div> + <div class="test inset2" style="inset: 50px 40px 50px 40px"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="test inset1" style="inset: 0 0 70px"></div> + <div class="test center" style="inset: 0 0 70px"></div> + <div class="test inset2" style="inset: 0 0 70px"></div> + + <div class="test inset1" style="inset: 70px 0 0"></div> + <div class="test center" style="inset: 70px 0 0"></div> + <div class="test inset2" style="inset: 70px 0 0"></div> + + <div class="test inset1" style="inset: 50px 0"></div> + <div class="test center" style="inset: 50px 0"></div> + <div class="test inset2" style="inset: 50px 0"></div> +</div> + + +<div class="container" style="writing-mode: vertical-rl"> + <div class="anchor"></div> + <div class="test inset1" style="inset: 0 60px 70px 0"></div> + <div class="test center" style="inset: 0 60px 70px 0"></div> + <div class="test inset2" style="inset: 0 60px 70px 0"></div> + + <div class="test inset1" style="inset: 70px 0 0 60px"></div> + <div class="test center" style="inset: 70px 0 0 60px"></div> + <div class="test inset2" style="inset: 70px 0 0 60px"></div> + + <div class="test inset1" style="inset: 50px 40px 50px 40px"></div> + <div class="test center" style="inset: 50px 40px 50px 40px"></div> + <div class="test inset2" style="inset: 50px 40px 50px 40px"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl"> + <div class="anchor"></div> + <div class="test inset1" style="inset: 0 0 70px"></div> + <div class="test center" style="inset: 0 0 70px"></div> + <div class="test inset2" style="inset: 0 0 70px"></div> + + <div class="test inset1" style="inset: 70px 0 0"></div> + <div class="test center" style="inset: 70px 0 0"></div> + <div class="test inset2" style="inset: 70px 0 0"></div> + + <div class="test inset1" style="inset: 0 40px"></div> + <div class="test center" style="inset: 0 40px"></div> + <div class="test inset2" style="inset: 0 40px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-inset-001-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-inset-001-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<title>position-area normal alignment vs insets</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment"> +<meta name="assert" content="Test passes if normal alignment aligns towards the non-auto inset."> +<style> + .container { + position: relative; + 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; + position: absolute; + width: 0; + height: 0; + } + .inset1 { + margin-bottom: auto; + margin-left: auto; + border-color: orange; + } + .inset2 { + margin-top: auto; + margin-right: auto; + border-color: teal; + } + .center { + margin: auto; + border-color: aqua; + } +</style> + +<div class="container"> + <div class="anchor"></div> + <div class="test inset1" style="inset: 0 60px 70px 0"></div> + <div class="test center" style="inset: 0 60px 70px 0"></div> + <div class="test inset2" style="inset: 0 60px 70px 0"></div> + + <div class="test inset1" style="inset: 70px 0 0 60px"></div> + <div class="test center" style="inset: 70px 0 0 60px"></div> + <div class="test inset2" style="inset: 70px 0 0 60px"></div> + + <div class="test inset1" style="inset: 50px 40px 50px 40px"></div> + <div class="test center" style="inset: 50px 40px 50px 40px"></div> + <div class="test inset2" style="inset: 50px 40px 50px 40px"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="test inset1" style="inset: 0 0 70px"></div> + <div class="test center" style="inset: 0 0 70px"></div> + <div class="test inset2" style="inset: 0 0 70px"></div> + + <div class="test inset1" style="inset: 70px 0 0"></div> + <div class="test center" style="inset: 70px 0 0"></div> + <div class="test inset2" style="inset: 70px 0 0"></div> + + <div class="test inset1" style="inset: 50px 0"></div> + <div class="test center" style="inset: 50px 0"></div> + <div class="test inset2" style="inset: 50px 0"></div> +</div> + + +<div class="container" style="writing-mode: vertical-rl"> + <div class="anchor"></div> + <div class="test inset1" style="inset: 0 60px 70px 0"></div> + <div class="test center" style="inset: 0 60px 70px 0"></div> + <div class="test inset2" style="inset: 0 60px 70px 0"></div> + + <div class="test inset1" style="inset: 70px 0 0 60px"></div> + <div class="test center" style="inset: 70px 0 0 60px"></div> + <div class="test inset2" style="inset: 70px 0 0 60px"></div> + + <div class="test inset1" style="inset: 50px 40px 50px 40px"></div> + <div class="test center" style="inset: 50px 40px 50px 40px"></div> + <div class="test inset2" style="inset: 50px 40px 50px 40px"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl"> + <div class="anchor"></div> + <div class="test inset1" style="inset: 0 0 70px"></div> + <div class="test center" style="inset: 0 0 70px"></div> + <div class="test inset2" style="inset: 0 0 70px"></div> + + <div class="test inset1" style="inset: 70px 0 0"></div> + <div class="test center" style="inset: 70px 0 0"></div> + <div class="test inset2" style="inset: 70px 0 0"></div> + + <div class="test inset1" style="inset: 0 40px"></div> + <div class="test center" style="inset: 0 40px"></div> + <div class="test inset2" style="inset: 0 40px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-inset-001.html b/testing/web-platform/tests/css/css-anchor-position/position-area-alignment-inset-001.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<title>position-area normal alignment vs insets</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area-alignment"> +<meta name="assert" content="Test passes if normal alignment aligns towards the non-auto inset."> +<style> + .container { + position: relative; + 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; + position: absolute; + position-anchor: --foo; + } + .inset1 { + top: 0; + right: 0; + border-color: orange; + } + .inset2 { + bottom: 0; + left: 0; + border-color: teal; + } + .center { + place-self: center; + border-color: aqua; + } +</style> + +<div class="container"> + <div class="anchor"></div> + <div class="test inset1" style="position-area: top left"></div> + <div class="test center" style="position-area: top left"></div> + <div class="test inset2" style="position-area: top left"></div> + + <div class="test inset1" style="position-area: bottom right"></div> + <div class="test center" style="position-area: bottom right"></div> + <div class="test inset2" style="position-area: bottom right"></div> + + <div class="test inset1" style="position-area: center"></div> + <div class="test center" style="position-area: center"></div> + <div class="test inset2" style="position-area: center"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="test inset1" style="position-area: top"></div> + <div class="test center" style="position-area: top"></div> + <div class="test inset2" style="position-area: top"></div> + + <div class="test inset1" style="position-area: bottom"></div> + <div class="test center" style="position-area: bottom"></div> + <div class="test inset2" style="position-area: bottom"></div> + + <div class="test inset1" style="position-area: center span-all"></div> + <div class="test center" style="position-area: center span-all"></div> + <div class="test inset2" style="position-area: center span-all"></div> +</div> + + +<div class="container" style="writing-mode: vertical-rl"> + <div class="anchor"></div> + <div class="test inset1" style="position-area: top left"></div> + <div class="test center" style="position-area: top left"></div> + <div class="test inset2" style="position-area: top left"></div> + + <div class="test inset1" style="position-area: bottom right"></div> + <div class="test center" style="position-area: bottom right"></div> + <div class="test inset2" style="position-area: bottom right"></div> + + <div class="test inset1" style="position-area: center"></div> + <div class="test center" style="position-area: center"></div> + <div class="test inset2" style="position-area: center"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl"> + <div class="anchor"></div> + <div class="test inset1" style="position-area: top"></div> + <div class="test center" style="position-area: top"></div> + <div class="test inset2" style="position-area: top"></div> + + <div class="test inset1" style="position-area: bottom"></div> + <div class="test center" style="position-area: bottom"></div> + <div class="test inset2" style="position-area: bottom"></div> + + <div class="test inset1" style="position-area: center span-all"></div> + <div class="test center" style="position-area: center span-all"></div> + <div class="test inset2" style="position-area: center span-all"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html @@ -18,8 +18,7 @@ width: 100px; height: 100px; background: red; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-document.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-document.html @@ -28,8 +28,7 @@ height: 100px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html @@ -34,8 +34,7 @@ height: 100px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html @@ -39,8 +39,7 @@ height: 50px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } #chained { diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html @@ -38,8 +38,7 @@ height: 100px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html @@ -27,8 +27,7 @@ height: 100px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow-ref.html @@ -32,8 +32,7 @@ height: 50px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } #target-b { position-anchor: --anchor; @@ -43,8 +42,7 @@ height: 50px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } #target-c { position-anchor: --anchor; @@ -54,8 +52,7 @@ height: 50px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow.html @@ -36,8 +36,7 @@ height: 50px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } #target-b { position-anchor: --anchor; @@ -47,8 +46,7 @@ height: 50px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } #target-c { position-anchor: --anchor; @@ -58,8 +56,7 @@ height: 50px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.html @@ -32,8 +32,7 @@ height: 100px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.html @@ -33,8 +33,7 @@ height: 100px; background: green; position: absolute; - top: 0; - left: 0; + inset: 0; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.html @@ -25,8 +25,7 @@ width: 100px; height: 100px; background: green; - top: 0; - left: 0; + inset: 0; } </style>