diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position')
152 files changed, 4217 insertions, 1024 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-htb.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-htb.html index 7012208044..20abb2ed09 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-htb.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-htb.html @@ -21,7 +21,7 @@ } .target { - anchor-default: --anchor; + position-anchor: --anchor; position: absolute; background: cyan; justify-self: anchor-center; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-vrl.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-vrl.html index 584424d306..099d9cd15b 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-vrl.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-vrl.html @@ -22,7 +22,7 @@ .target { writing-mode: vertical-rl; - anchor-default: --anchor; + position-anchor: --anchor; position: absolute; background: cyan; align-self: anchor-center; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-htb.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-htb.html index c7ee230262..3e4f485cec 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-htb.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-htb.html @@ -23,7 +23,7 @@ .target { writing-mode: horizontal-tb; - anchor-default: --anchor; + position-anchor: --anchor; position: absolute; background: cyan; align-self: anchor-center; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-vrl.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-vrl.html index d314dc7f2f..fe40c73141 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-vrl.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-vrl.html @@ -22,7 +22,7 @@ } .target { - anchor-default: --anchor; + position-anchor: --anchor; position: absolute; background: cyan; justify-self: anchor-center; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-002.html index ae697fcc74..a3e00d5048 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-002.html @@ -13,7 +13,7 @@ body { margin: 0; } -.cb { +.rel { position: relative; background: lightgray; } @@ -36,7 +36,7 @@ body { <!-- anchor is fragmented in second and third columns --> <div class="multicol" id="test1"> - <div class="cb"> + <div class="rel"> <div class="spacer"></div> <div class="anchor"></div> <div class="target"></div> @@ -51,7 +51,7 @@ body { height: 100px; } -#test1 .cb { +#test1 .rel{ width: 100px; height: 300px; } @@ -79,19 +79,23 @@ test(() => { <div id="test2" style="font: 20px/1 Ahem; width: 11em"> - Lorem - <span class="cb"> - ipsum <span class="anchor">dolor</span> sit - <span class="target"></span> - </span> - amet.<br> + <div> + Lorem + <span class="rel"> + ipsum <span class="anchor">dolor</span> sit + <span class="target"></span> + </span> + amet. + </div> - Lorem - <span class="cb"> - ipsum dolor <span class="anchor">sit</span> - <span class="target"></span> - </span> - amet.<br> + <div> + Lorem + <span class="rel"> + ipsum dolor <span class="anchor">sit</span> + <span class="target"></span> + </span> + amet. + </div> </div> <script> test(() => { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-003.html index da9ec4a145..fc384ab4cd 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-003.html @@ -52,7 +52,7 @@ body { } #target1 { - anchor-default: --a1; + position-anchor: --a1; } #anchor2 { @@ -62,7 +62,7 @@ body { } #target2 { - anchor-default: --a2; + position-anchor: --a2; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-name-inline-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-name-inline-001.html index dba3472f5b..d65936ad86 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-name-inline-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-name-inline-001.html @@ -48,7 +48,7 @@ <span class="relpos"> <span class="anchor">12</span> <span class="anchor abspos">123</span> - <span class="target" data-expected-width=20></span> + <span class="target" data-expected-width=30></span> </span> <span class="target" data-expected-width=30></span> </span> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained-dynamic.html b/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained-dynamic.html deleted file mode 100644 index 50cec96f36..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained-dynamic.html +++ /dev/null @@ -1,71 +0,0 @@ -<!DOCTYPE html> -<title>CSS Anchor Positioning: anchor-name is style contained - dynamic containment</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#name"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> -<style> - .container { - position: relative; - } - .anchor { - width: 100px; - height: 100px; - anchor-name: var(--anchor-name); - } - .contain-style { - contain: style; - } - .target { - position: absolute; - anchor-default: var(--anchor-name); - top: anchor(bottom, 50px); - } - #a1 { --anchor-name: --a1; } - #a2 { --anchor-name: --a2; } - #a3 { --anchor-name: --a3; } -</style> -<div id="a1" class="container"> - <div class="anchor"></div> - <div class="contain-style"> - <div class="anchor"></div> - </div> - <div class="target" data-offset-y="100"></div> -</div> -<div id="a2" class="container"> - <div class="anchor"></div> - <div class="anchor"></div> - <div class="contain-style"> - <div class="target" data-offset-y="50"></div> - </div> -</div> -<div id="a3" class="container"> - <div class="anchor contain-style"> - <div class="target" data-offset-y="50"></div> - </div> -</div> -<script type="module"> - await checkLayoutForAnchorPos('.target'); - - const t1 = document.querySelector("#a1 .target"); - const t2 = document.querySelector("#a2 .target"); - const t3 = document.querySelector("#a3 .target"); - const t4 = document.querySelector("#a4 .target"); - const t5 = document.querySelector("#a5 .target"); - t1.setAttribute("data-offset-y", "200"); - t2.setAttribute("data-offset-y", "200"); - t3.setAttribute("data-offset-y", "100"); - for (let element of document.querySelectorAll(".contain-style")) { - element.style.contain = "none"; - } - await checkLayoutForAnchorPos('.target'); - - t1.setAttribute("data-offset-y", "100"); - t2.setAttribute("data-offset-y", "50"); - t3.setAttribute("data-offset-y", "50"); - for (let element of document.querySelectorAll(".contain-style")) { - element.style.contain = ""; - } - await checkLayoutForAnchorPos('.target'); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained.html b/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained.html deleted file mode 100644 index a529575889..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained.html +++ /dev/null @@ -1,60 +0,0 @@ -<!DOCTYPE html> -<title>CSS Anchor Positioning: anchor-name is style contained</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#name"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> -<style> - .container { - position: relative; - } - .anchor { - width: 100px; - height: 100px; - anchor-name: var(--anchor-name); - } - .contain-style { - contain: style; - } - .target { - position: absolute; - anchor-default: var(--anchor-name); - top: anchor(bottom, 50px); - } - #a1 { --anchor-name: --a1; } - #a2 { --anchor-name: --a2; } - #a3 { --anchor-name: --a3; } - #a4 { --anchor-name: --a4; } - #a5 { --anchor-name: --a5; } -</style> -<body onload="checkLayoutForAnchorPos('.target')"> -<div id="a1" class="container"> - <div class="anchor"></div> - <div class="contain-style"> - <div class="anchor"></div> - </div> - <div class="target" data-offset-y="100"></div> -</div> -<div id="a2" class="container"> - <div class="anchor"></div> - <div class="anchor"></div> - <div class="contain-style"> - <div class="target" data-offset-y="50"></div> - </div> -</div> -<div id="a3" class="container"> - <div class="contain-style"> - <div class="anchor"></div> - <div class="target" data-offset-y="100"></div> - </div> -</div> -<div id="a4" class="container"> - <div class="anchor contain-style"> - <div class="target" data-offset-y="50"></div> - </div> -</div> -<div id="a5" class="container"> - <div class="anchor contain-style"></div> - <div class="target" data-offset-y="100"></div> -</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html index 8efbeb09e2..85fca57421 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html @@ -15,7 +15,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: orange; @@ -24,7 +24,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-004.html index 146703e628..b7944652a0 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-004.html @@ -30,7 +30,7 @@ </style> <body> <div class="cb"> - <div style="contain: layout size paint; height: 50px"> + <div style="contain: strict; height: 50px"> <div class="spacer" style="height: 10px"></div> <div id="anchor1"></div> </div> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-005.html new file mode 100644 index 0000000000..b22a060cbd --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-005.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> + #cb { + position: relative; + width: 100px; + height: 100px; + overflow: clip; + } + #anchor { + position: absolute; + inset: 0; + background: green; + width: 100px; + height: 100px; + anchor-name: --a; + } + #bug { + position: absolute; + width: 100px; + height: 100px; + background: red; + left: anchor(right); + top: anchor(top); + position-anchor: --a; + } + #target { + position: absolute; + top: anchor(top); + } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="cb"> + <div id="anchor"></div> + <div> + <div id=bug></div> + </div> + <div id=target></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.top = 'calc(anchor(top) + 10px)'; +</script> + diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html index 055459551b..a8513bb74c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html @@ -21,7 +21,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; outline: none; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html index a87a9d7eed..9ce0b8e5f9 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html @@ -21,7 +21,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; outline: none; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html index 96d5219c5c..3bc815af0c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html @@ -21,7 +21,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; outline: none; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html index c986e3f98d..ad0a7b8b32 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html @@ -21,7 +21,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; outline: none; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html index cf39c77736..51aa482aee 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html @@ -22,7 +22,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; } body { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html index c13284b854..a3b9e63c06 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html @@ -22,7 +22,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; } body { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-001.html index 8609795c8a..b9dfc56e2e 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-001.html @@ -40,7 +40,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -48,7 +48,7 @@ body { position: absolute; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-002.html index 8ef6f500a1..2c51e6a1a3 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-002.html @@ -45,7 +45,7 @@ body { height: 50px; top: anchor(--a1 top); left: anchor(--a1 right); - anchor-default: --a1; + position-anchor: --a1; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-003.html index c1b31c0bec..6c0dd08355 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-003.html @@ -47,7 +47,7 @@ body { position: absolute; left: anchor(--a left); bottom: anchor(--a top); - anchor-default: --a; + position-anchor: --a; width: 50px; height: 50px; background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-004.html index d08279118d..c0e0afb23f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-004.html @@ -32,7 +32,7 @@ body { .target { position: absolute; - anchor-default: --a; + position-anchor: --a; top: anchor(--a bottom); left: anchor(--a left); color: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-005.html index a9a7d24d2b..f8f26b719f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-005.html @@ -33,7 +33,7 @@ body { width: 100px; height: 100px; bottom: anchor(--a top); - anchor-default: --a; + position-anchor: --a; background: lime; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html index 2ffd026b55..9c8a8c0ac2 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html @@ -50,21 +50,21 @@ body { /* Needs scroll adjustment in x axis only */ #target1 { - anchor-default: --a1; + position-anchor: --a1; left: anchor(left); top: anchor(--scroller1 bottom); } /* Needs scroll adjustment in y axis only */ #target2 { - anchor-default: --a2; + position-anchor: --a2; top: anchor(top); left: anchor(--scroller2 right); } /* No scroll adjustment needed */ #target3 { - anchor-default: --a3; + position-anchor: --a3; top: anchor(--scroller3 bottom); left: anchor(--scroller3 right); } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-007.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-007.html index ec51910619..7e288d713f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-007.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-007.html @@ -56,7 +56,7 @@ body { height: 50px; left: anchor(--a3 left); top: anchor(--a1 top); - anchor-default: --a2; + position-anchor: --a2; background: lime; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html index 60ad128022..1235f8fad4 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html @@ -25,7 +25,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; @@ -34,7 +34,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html index e180c56468..9c60799e0b 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html @@ -31,7 +31,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; @@ -40,7 +40,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html index 8912fcb699..b441c92bf1 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html @@ -31,7 +31,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; @@ -41,7 +41,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html index 5834eb1f4c..f1765a9870 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html @@ -37,7 +37,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; @@ -45,7 +45,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html index 4000eb54a5..d2300da818 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html @@ -27,7 +27,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; background: green; position-try-options: --fallback; anchor-name: --a2; @@ -37,7 +37,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html index 005a27393a..4dd9bad60e 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html @@ -23,7 +23,7 @@ #anchored { position: absolute; - anchor-default: --a; + position-anchor: --a; left: anchor(--a left); bottom: anchor(--a top); width: 100px; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html index 83ce146825..80dabbb666 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html @@ -23,7 +23,7 @@ position: fixed; top: anchor(--a bottom); left: anchor(--a left); - anchor-default: --a; + position-anchor: --a; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html index 594c844bfb..f46d902ffe 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html @@ -23,7 +23,7 @@ position: fixed; top: anchor(--a bottom); left: anchor(--a left); - anchor-default: --a; + position-anchor: --a; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html index 226a1b099c..ee5ad2f41a 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html @@ -23,7 +23,7 @@ position: fixed; top: anchor(--a bottom); left: anchor(--a left); - anchor-default: --a; + position-anchor: --a; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html index 639e2e064a..c5e44a79e7 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html @@ -23,7 +23,7 @@ position: fixed; top: anchor(--a bottom); left: anchor(--a left); - anchor-default: --a; + position-anchor: --a; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html index 6e57accc45..49c6dc780c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html @@ -29,7 +29,7 @@ body { background: red; left: 0; bottom: anchor(--a top); - anchor-default: --a; + position-anchor: --a; } #overlap { position: absolute; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html index 5b2aa2dd50..1a05d8b93a 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html @@ -23,7 +23,7 @@ div { #anchored { position: fixed; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 right); top: anchor(--a1 top); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos.html index a32ef3f7c4..7923ed789d 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos.html @@ -22,7 +22,7 @@ div { #anchored { position: fixed; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 right); top: anchor(--a1 top); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-js-expose.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-js-expose.html index 1ef44d03c2..3b3f1a0608 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-js-expose.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-js-expose.html @@ -35,7 +35,7 @@ bottom: anchor(--anchor top); width: 100px; height: 100px; - anchor-default: --anchor; + position-anchor: --anchor; background-color: green; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-nested.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-nested.html index 557f748c02..291fe0d710 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-nested.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-nested.html @@ -41,7 +41,7 @@ body { width: 50px; height: 50px; left: anchor(--anchor left); - anchor-default: --anchor; + position-anchor: --anchor; } .above { 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 index b696ae0060..3130018e73 100644 --- 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 @@ -35,7 +35,7 @@ #anchored { position: absolute; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --f1, --f2; width: 100px; height: 100px; /* Above the anchor */ diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html index 3b84124705..52bbcd62fc 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html @@ -31,7 +31,7 @@ body { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; top: anchor(--a top); left: anchor(--a right); position-try-options: --pf; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html index dd9fdc92c2..b89a574d76 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html @@ -39,7 +39,7 @@ width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html index 0aab60b7a8..bf0bee972d 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html @@ -33,7 +33,7 @@ body { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2; /* Top of the anchor */ bottom: anchor(--a top); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html index e2dac13abd..197a9e4f79 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html @@ -32,7 +32,7 @@ body { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; top: anchor(--a top); left: anchor(--a right); position-try-options: --pf; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html index 1f9004de54..132c45c89c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html @@ -28,7 +28,7 @@ body { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html index 32b7f64173..a02bd35a66 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html @@ -32,7 +32,7 @@ html { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html index 99f180bb46..2deddd587e 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html @@ -33,7 +33,7 @@ html { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html index 0267d1987b..0d7d6b077f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html @@ -32,7 +32,7 @@ html { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html index 133649c720..21f32ad068 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html @@ -33,7 +33,7 @@ html { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html index 005a4ee728..5de8461010 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html @@ -45,7 +45,7 @@ width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; bottom: anchor(--a top); left: anchor(--a right); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012-ref.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012-ref.html new file mode 100644 index 0000000000..fbc0b5fc6d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<style> +#scroller { + width: 400px; + height: 400px; + overflow-y: scroll; +} + +.box { + min-height: 100px; + width: 100px; +} + +#anchor { + background: orange; +} + +#anchored { + width: 100px; + height: 100px; + background: green; +} +</style> + +<div id="scroller"> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box" id="anchor"></div> + <div id="anchored"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> +</div> + +<script> +scroller.scrollTop = 150; +</script> + diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012.html new file mode 100644 index 0000000000..7c0b381999 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Tests position fallback change on scroll with anchor and anchored under the same scroll container</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> +<link rel="match" href="anchor-scroll-position-try-012-ref.html"> +<style> +#scroller { + position: relative; + width: 400px; + height: 400px; + overflow-y: scroll; +} + +.box { + min-height: 100px; + width: 100px; +} + +#anchor { + anchor-name: --a; + background: orange; +} + +#anchored { + position: absolute; + top: anchor(--a bottom); + width: 100px; + height: 100px; + background: green; + position-anchor: --a; + position-try-options: --pf; +} + +@position-try --pf { + top: auto; + bottom: anchor(--a top); +} +</style> + +<div id="scroller"> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box" id="anchor"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div id="anchored"></div> +</div> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + scroller.scrollTop = 150; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html> + diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html index abab944751..a6c3b05725 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html @@ -27,7 +27,7 @@ div { #anchored { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html index 357421ecf1..e2d91fe4dd 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html @@ -28,7 +28,7 @@ div { #anchored { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html index 0e77004491..b40f5cc8d5 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html @@ -27,7 +27,7 @@ div { #anchored { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html index f7878ae8df..30325ce1e0 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html @@ -30,7 +30,7 @@ div { #anchored { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-001.html index f11797edad..aa49fbcc6d 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-001.html @@ -41,7 +41,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -49,7 +49,7 @@ body { position: absolute; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-002.html index 19447952b0..5695db2a1c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-002.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <html class="reftest-wait"> -<title>Anchored elements should update location on `anchor-default` property changes</title> +<title>Anchored elements should update location on `position-anchor` property changes</title> <link rel="author" href="mailto:xiaochengh@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> <link rel="match" href="reference/anchor-scroll-ref.html"> @@ -75,8 +75,8 @@ function raf() { async function runTest() { await raf(); await raf(); - document.getElementById('inner-anchored').style.anchorDefault = '--anchor'; - document.getElementById('outer-anchored').style.anchorDefault = '--anchor'; + document.getElementById('inner-anchored').style.positionAnchor = '--anchor'; + document.getElementById('outer-anchored').style.positionAnchor = '--anchor'; document.documentElement.classList.remove('reftest-wait'); } runTest(); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-003.html index 57a524c483..2e1532badf 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-003.html @@ -37,7 +37,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -45,7 +45,7 @@ body { position: absolute; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-004.html index d20a7b660a..87138fb2d9 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-004.html @@ -49,7 +49,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -57,7 +57,7 @@ body { position: absolute; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-005.html index c2e7248c80..37874bba55 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-005.html @@ -24,7 +24,7 @@ background-color: green; top: anchor(--a top); left: 0; - anchor-default: --a; + position-anchor: --a; } </style> <div id="cb"> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-006.html index 2535c68f78..81defee7cf 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-006.html @@ -24,7 +24,7 @@ background-color: green; top: anchor(--a top); left: 0; - anchor-default: --a; + position-anchor: --a; } </style> <div id="cb"> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-007.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-007.html index 4859f01d66..33050348c4 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-007.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-007.html @@ -37,7 +37,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -45,7 +45,7 @@ body { position: fixed; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vlr.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vlr.html index 00406c825e..76186f9cad 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vlr.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vlr.html @@ -50,7 +50,7 @@ body { position: absolute; top: anchor(--anchor top); left: anchor(--anchor right); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -58,7 +58,7 @@ body { position: absolute; top: anchor(--anchor top); right: anchor(--anchor left); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vrl.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vrl.html index 2432d72899..13ea8b37ab 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vrl.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vrl.html @@ -50,7 +50,7 @@ body { position: absolute; top: anchor(--anchor top); left: anchor(--anchor right); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -58,7 +58,7 @@ body { position: absolute; top: anchor(--anchor top); right: anchor(--anchor left); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html new file mode 100644 index 0000000000..50f1154532 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when the anchor attribute changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + #anchor1, #anchor2 { + width: 100px; + } + #anchor1 { + background: wheat; + height: 50px; + } + #anchor2 { + background: tomato; + height: 90px; + } + #anchored { + position: absolute; + width: anchor-size(width); + height: anchor-size(height); + top: anchor(top); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + transition-property: top, height; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=anchor1>Anchor1</div> + <div id=anchor2>Anchor2</div> + <div id=anchored anchor=anchor1></div> +</div> +<script> + test(() => { + assert_equals(anchored.offsetTop, 0); + assert_equals(anchored.offsetHeight, 50); + anchored.setAttribute('anchor', 'anchor2'); + assert_equals(anchored.offsetTop, 25); + assert_equals(anchored.offsetHeight, 70); + }, 'Transition when the anchor attribute changes'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-default.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-default.html new file mode 100644 index 0000000000..1bee0cbbe4 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-default.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when position-anchor changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + #anchor1, #anchor2 { + width: 100px; + } + #anchor1 { + background: wheat; + height: 50px; + anchor-name: --a1; + } + #anchor2 { + background: tomato; + height: 90px; + anchor-name: --a2; + } + #anchored { + position: absolute; + width: anchor-size(width); + height: anchor-size(height); + top: anchor(top); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + transition-property: top, height; + background-color: skyblue; + position-anchor: --a1; + } +</style> +<div id=cb> + <div id=anchor1>Anchor1</div> + <div id=anchor2>Anchor2</div> + <div id=anchored></div> +</div> +<script> + test(() => { + assert_equals(anchored.offsetTop, 0); + assert_equals(anchored.offsetHeight, 50); + anchored.style.positionAnchor = '--a2'; + assert_equals(anchored.offsetTop, 25); + assert_equals(anchored.offsetHeight, 70); + }, 'Transition when position-anchor changes'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html new file mode 100644 index 0000000000..cf65742b2d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when the result of anchor()/anchor-size() changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + .anchor { + position: absolute; + width: 50px; + height: 40px; + left: 60px; + top: 40px; + background: coral; + anchor-name: --a; + } + .shift { + left: 80px; + } + .grow { + width: 70px; + } + .anchored { + position: absolute; + width: anchor-size(width); + height: 40px; + position-anchor: --a; + top: anchor(bottom); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + background-color: skyblue; + } +</style> + +<div id=anchor_test class=cb> + <div class=anchor></div> + <div class=anchored style="transition-property:left"></div> +</div> +<script> + test(() => { + let anchor = anchor_test.querySelector('.anchor'); + let anchored = anchor_test.querySelector('.anchored'); + assert_equals(anchored.offsetLeft, 110); + anchor.classList.add('shift'); + assert_equals(anchored.offsetLeft, 120); + }, 'Transition when the result of anchor() changes'); +</script> + +<div id=anchor_size_test class=cb> + <div class=anchor></div> + <div class=anchored style="transition-property:width"></div> +</div> +<script> + test(() => { + let anchor = anchor_size_test.querySelector('.anchor'); + let anchored = anchor_size_test.querySelector('.anchored'); + assert_equals(anchored.offsetWidth, 50); + anchor.classList.add('grow'); + assert_equals(anchored.offsetWidth, 60); + }, 'Transition when the result of anchor-size() changes'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-name.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-name.html new file mode 100644 index 0000000000..ea7b403e61 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-name.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when the dereferenced anchor name changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + #anchor1, #anchor2 { + width: 100px; + } + #anchor1 { + background: wheat; + height: 50px; + } + #anchor2 { + background: tomato; + height: 90px; + } + .anchor-name { + anchor-name: --a; + } + #anchored { + position: absolute; + width: anchor-size(width); + height: anchor-size(height); + position-anchor: --a; + top: anchor(top); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + transition-property: top, height; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=anchor1 class=anchor-name>Anchor1</div> + <div id=anchor2>Anchor2</div> + <div id=anchored></div> +</div> +<script> + test(() => { + assert_equals(anchored.offsetTop, 0); + assert_equals(anchored.offsetHeight, 50); + anchor1.classList.toggle('anchor-name'); + anchor2.classList.toggle('anchor-name'); + assert_equals(anchored.offsetTop, 25); + assert_equals(anchored.offsetHeight, 70); + }, 'Transition when the dereferenced anchor name changes'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-typed-om.html b/testing/web-platform/tests/css/css-anchor-position/anchor-typed-om.html new file mode 100644 index 0000000000..d4fec49dd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-typed-om.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: anchor()/anchor-size() functions in CSS Typed OM</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 10px; + top: 10px; + width: 20px; + height: 20px; + background: coral; + anchor-name: --a; + } + #target { + position: absolute; + background: skyblue; + position-anchor: --a; + left: anchor(right); + top: calc(anchor(bottom) + 5px); + width: anchor-size(--unknown width, 25px); + height: calc(anchor-size(height) * 2); + } +</style> + +<div id=cb> + <div id=anchor></div> + <div id=target></div> +</div> +<script> + function assert_unit_value(actual, expected) { + assert_true(actual instanceof CSSUnitValue); + assert_true(expected instanceof CSSUnitValue); + assert_equals(actual.value, expected.value); + assert_equals(actual.unit, expected.unit); + } + + test(() => { + assert_unit_value(target.computedStyleMap().get('left'), CSS.px(30)); + assert_unit_value(target.computedStyleMap().get('top'), CSS.px(35)); + }, 'anchor() computes to pixels'); + + test(() => { + assert_unit_value(target.computedStyleMap().get('width'), CSS.px(25)); + assert_unit_value(target.computedStyleMap().get('height'), CSS.px(40)); + }, 'anchor-size() computes to pixels'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html index 622e9827b4..f6dac753d2 100644 --- a/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html @@ -44,7 +44,7 @@ test_allowed_declaration('inset-inline-end'); test_allowed_declaration('inset-block'); test_allowed_declaration('inset-inline'); test_allowed_declaration('inset'); -test_allowed_declaration('inset-area', 'all'); +test_allowed_declaration('inset-area', 'span-all'); // Margin properties are allowed test_allowed_declaration('margin-top'); @@ -74,12 +74,12 @@ test_allowed_declaration('max-block-size'); test_allowed_declaration('max-inline-size'); // Box alignment properties are allowed -test_allowed_declaration('justify-content', 'normal'); -test_allowed_declaration('align-content', 'normal'); -test_allowed_declaration('justify-items', 'normal'); -test_allowed_declaration('align-items', 'normal'); test_allowed_declaration('justify-self', 'normal'); test_allowed_declaration('align-self', 'normal'); +test_allowed_declaration('place-self', 'normal'); + +// The 'position-anchor' property is allowed +test_allowed_declaration('position-anchor', '--anchor'); // Custom properties are disallowed test_disallowed_declaration('--custom'); @@ -91,12 +91,16 @@ test_disallowed_declaration('padding'); test_disallowed_declaration('display'); test_disallowed_declaration('position'); test_disallowed_declaration('float'); +test_disallowed_declaration('justify-content', 'normal'); +test_disallowed_declaration('align-content', 'normal'); +test_disallowed_declaration('justify-items', 'normal'); +test_disallowed_declaration('align-items', 'normal'); -// 'revert' and 'revert-layer' are disallowed -test_disallowed_declaration('top', 'revert'); -test_disallowed_declaration('top', 'revert-layer'); -test_disallowed_declaration('inset', 'revert'); -test_disallowed_declaration('inset', 'revert-layer'); +// 'revert' and 'revert-layer' are allowed +test_allowed_declaration('top', 'revert'); +test_allowed_declaration('top', 'revert-layer'); +test_allowed_declaration('inset', 'revert'); +test_allowed_declaration('inset', 'revert-layer'); // !important is disallowed test_disallowed_declaration('top', '1px !important'); diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html index d4a1f4fa24..91172c5185 100644 --- a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html @@ -6,7 +6,7 @@ <script src="/resources/testharnessreport.js"></script> <div id="anchor"></div> -<div id="not-anchor"></div> +<div id="other-anchor"></div> <div id="target"></div> <script> @@ -32,12 +32,12 @@ test(t => { test(t => { const style = createStyle(t, ` @position-try --pf { top: anchor(top); left: 0; } - #anchor, #not-anchor, #target { + #anchor, #other-anchor, #target { position: absolute; width: 100px; height: 100px; } #anchor { top: 100px; left: 0; anchor-name: --a; } - #not-anchor { top: 200px; left: 0; anchor-name: --b; } - #target { position-try-options: --pf; anchor-default: --a; left: 999999px; } + #other-anchor { top: 200px; left: 0; anchor-name: --b; } + #target { position-try-options: --pf; position-anchor: --a; left: 999999px; } `); const positionTryRule = style.sheet.cssRules[0]; @@ -50,12 +50,17 @@ test(t => { assert_equals(target.getBoundingClientRect().left, 100); assert_equals(target.getBoundingClientRect().top, 100); - // These properties are disallowed in `@position-try` rule, and hence should not affect + // This property are disallowed in `@position-try` rule, and hence should not affect // position fallback. - positionTryRule.style.setProperty('anchor-default', '--b'); positionTryRule.style.setProperty('position', 'static'); assert_equals(target.getBoundingClientRect().left, 100); assert_equals(target.getBoundingClientRect().top, 100); + + // `position-anchor` is an allowed property in `@position-try` and should affect position fallback. + positionTryRule.style.setProperty('position-anchor', '--b'); + assert_equals(target.getBoundingClientRect().left, 100); + assert_equals(target.getBoundingClientRect().top, 200); + }, 'CSSPositionTryRule.style.setProperty setting allowed and disallowed properties'); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/chrome-40286059-crash.html b/testing/web-platform/tests/css/css-anchor-position/chrome-40286059-crash.html new file mode 100644 index 0000000000..dbbeb5ac4d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/chrome-40286059-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/40286059"> +<p>Pass if no crash</p> +<div id="pop" style="position-try-options: --foo" popover></div> +<script> + getComputedStyle(pop).left; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html index 52344614f0..7bc59356e9 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html @@ -25,13 +25,13 @@ position: absolute; align-self: stretch; justify-self: stretch; - anchor-default: --anchor; + position-anchor: --anchor; background-color: blue; } - #top-left { inset-area: top / left; } - #top-right { inset-area: top / right; } - #bottom-left { inset-area: bottom / left; } - #bottom-right { inset-area: bottom / right; } + #top-left { inset-area: top left; } + #top-right { inset-area: top right; } + #bottom-left { inset-area: bottom left; } + #bottom-right { inset-area: bottom right; } </style> <div id="in-flow"> <br> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html new file mode 100644 index 0000000000..3e42913ffc --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning - alignment with writing-mode and direction</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + /* A 300x300 container with a 100x100 centered anchor */ + #container { + position: relative; + width: 300px; + height: 300px; + } + #anchor { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + anchor-name: --anchor; + } + #anchored { + position: absolute; + width: 10px; + height: 10px; + inset: 10px; + position-anchor: --anchor; + } +</style> +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(writing_direction, inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Checking offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Checking offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Checking offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Checking offsetHeight"); + }, "Offsets for: " + inset_area + " with writing-mode / direction: " + writing_direction); + } + + const top_left = {left:80, top:80, width:10, height:10}; + const top_right = {left:210, top:80, width:10, height:10}; + const bottom_left = {left:80, top:210, width:10, height:10}; + const bottom_right = {left:210, top:210, width:10, height:10}; + + anchored.style.writingMode = "horizontal-tb"; + anchored.style.direction = "ltr"; + + // Writing-mode and direction on container + let writing_direction = "containing-block: horizontal-tb / rtl"; + container.style.writingMode = "horizontal-tb"; + container.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", top_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: vertical-lr / ltr + // self: horizontal-tb / ltr + writing_direction = "containing-block: vertical-lr / ltr"; + container.style.writingMode = "vertical-lr"; + container.style.direction = "ltr"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: vertical-lr / rtl + // self: horizontal-tb / ltr + writing_direction = "containing-block: vertical-lr / rtl"; + container.style.writingMode = "vertical-lr"; + container.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", bottom_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", bottom_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: vertical-rl / ltr + // self: horizontal-tb / ltr + writing_direction = "containing-block: vertical-rl / ltr"; + container.style.writingMode = "vertical-rl"; + container.style.direction = "ltr"; + test_inset_area(writing_direction, "start start", top_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: vertical-rl / rtl + // self: horizontal-tb / ltr + writing_direction = "containing-block: vertical-rl / rtl"; + container.style.writingMode = "vertical-rl"; + container.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", bottom_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", bottom_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // Writing-mode and direction on self + container.style.writingMode = "horizontal-tb"; + container.style.direction = "ltr"; + + // containing-block: horizontal-tb / ltr + // self: horizontal-tb / rtl + writing_direction = "self: horizontal-tb / rtl"; + anchored.style.writingMode = "horizontal-tb"; + anchored.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_right); + + // containing-block: horizontal-tb / ltr + // self: vertical-lr / ltr + writing_direction = "self: vertical-lr / ltr"; + anchored.style.writingMode = "vertical-lr"; + anchored.style.direction = "ltr"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: horizontal-tb / ltr + // self: vertical-lr / rtl + writing_direction = "self: vertical-lr / rtl"; + anchored.style.writingMode = "vertical-lr"; + anchored.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", bottom_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", bottom_left); + + // containing-block: horizontal-tb / ltr + // self: vertical-rl / ltr + writing_direction = "self: vertical-rl / ltr"; + anchored.style.writingMode = "vertical-rl"; + anchored.style.direction = "ltr"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_right); + + // containing-block: horizontal-tb / ltr + // self: vertical-rl / rtl + writing_direction = "self: vertical-rl / rtl"; + anchored.style.writingMode = "vertical-rl"; + anchored.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", bottom_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", bottom_right); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify.html new file mode 100644 index 0000000000..7f7f05ccf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning - alignment</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + /* A 300x300 container with a 100x100 centered anchor */ + #container { + position: relative; + width: 300px; + height: 300px; + } + #anchor { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + anchor-name: --anchor; + } + #anchored { + position: absolute; + width: 10px; + height: 10px; + inset: 10px; + position-anchor: --anchor; + } +</style> +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area); + } + + // anchor-center in both directions + test_inset_area("span-all", {left:145, top:145, width:10, height:10}); + + // Single region spans + test_inset_area("top left", {left:80, top:80, width:10, height:10}); + test_inset_area("top center", {left:145, top:80, width:10, height:10}); + test_inset_area("top right", {left:210, top:80, width:10, height:10}); + test_inset_area("center left", {left:80, top:145, width:10, height:10}); + test_inset_area("center center", {left:145, top:145, width:10, height:10}); + test_inset_area("center right", {left:210, top:145, width:10, height:10}); + test_inset_area("bottom left", {left:80, top:210, width:10, height:10}); + test_inset_area("bottom center", {left:145, top:210, width:10, height:10}); + test_inset_area("bottom right", {left:210, top:210, width:10, height:10}); + + // Multi-region spans + test_inset_area("top span-left", {left:180, top:80, width:10, height:10}); + test_inset_area("top span-right", {left:110, top:80, width:10, height:10}); + test_inset_area("span-top left", {left:80, top:180, width:10, height:10}); + test_inset_area("span-bottom left", {left:80, top:110, width:10, height:10}); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-outside.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-outside.html new file mode 100644 index 0000000000..ac7e85bafb --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-outside.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning - anchor outside containing block</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #container { + position: relative; + width: 400px; + height: 400px; + } + #anchor { + position: absolute; + left: -200px; + top: 500px; + width: 100px; + height: 100px; + anchor-name: --anchor; + } + #anchored { + position: absolute; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; + } +</style> +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area); + } + + test_inset_area("span-all", {left:0, top:0, width:400, height:400}); + + test_inset_area("left span-all", {left:-200, top:0, width:0, height:400}); + test_inset_area("span-left span-all", {left:-100, top:0, width:0, height:400}); + test_inset_area("span-all center", {left:-200, top:0, width:100, height:400}); + test_inset_area("span-right span-all", {left:-200, top:0, width:600, height:400}); + test_inset_area("right span-all", {left:-100, top:0, width:500, height:400}); + + test_inset_area("top span-all", {left:0, top:0, width:400, height:500}); + test_inset_area("span-top span-all", {left:0, top:0, width:400, height:600}); + test_inset_area("center span-all", {left:0, top:500, width:400, height:100}); + test_inset_area("span-bottom span-all", {left:0, top:500, width:400, height:0}); + test_inset_area("bottom span-all", {left:0, top:600, width:400, height:0}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-partially-outside.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-partially-outside.html new file mode 100644 index 0000000000..9d7f5b5f6b --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-partially-outside.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning - anchor partially outside containing block</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #container { + position: relative; + width: 400px; + height: 400px; + } + #anchor { + position: absolute; + right: -50px; + top: -50px; + width: 100px; + height: 100px; + anchor-name: --anchor; + } + #anchored { + position: absolute; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; + } +</style> +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area); + } + + test_inset_area("span-all", {left:0, top:0, width:400, height:400}); + + test_inset_area("left span-all", {left:0, top:0, width:350, height:400}); + test_inset_area("span-left span-all", {left:0, top:0, width:450, height:400}); + test_inset_area("span-all center", {left:350, top:0, width:100, height:400}); + test_inset_area("span-right span-all", {left:350, top:0, width:50, height:400}); + test_inset_area("right span-all", {left:450, top:0, width:0, height:400}); + + test_inset_area("top span-all", {left:0, top:-50, width:400, height:0}); + test_inset_area("span-top span-all", {left:0, top:0, width:400, height:50}); + test_inset_area("center span-all", {left:0, top:-50, width:400, height:100}); + test_inset_area("span-bottom span-all", {left:0, top:-50, width:400, height:450}); + test_inset_area("bottom span-all", {left:0, top:50, width:400, height:350}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html index 4a63635558..b89d0e2428 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html @@ -31,7 +31,7 @@ position: absolute; align-self: stretch; justify-self: stretch; - anchor-default: --anchor; + position-anchor: --anchor; } #anchor { margin-top: 150px; @@ -49,73 +49,69 @@ function test_inset_area(inset_area, expected_offsets) { anchored.style.insetArea = inset_area; test(() => { - assert_equals(anchored.offsetLeft, expected_offsets.left); - assert_equals(anchored.offsetTop, expected_offsets.top); - assert_equals(anchored.offsetWidth, expected_offsets.width); - assert_equals(anchored.offsetHeight, expected_offsets.height); + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); }, "Offsets for: " + inset_area); } test_inset_area("none", {left:0, top:0, width:0, height:0}); - test_inset_area("all", {left:0, top:0, width:400, height:400}); - test_inset_area("all / all", {left:0, top:0, width:400, height:400}); + test_inset_area("span-all", {left:0, top:0, width:400, height:400}); + test_inset_area("span-all span-all", {left:0, top:0, width:400, height:400}); // Single region spans - test_inset_area("top / left", {left:0, top:0, width:100, height:150}); - test_inset_area("top / center", {left:100, top:0, width:150, height:150}); - test_inset_area("top / right", {left:250, top:0, width:150, height:150}); - test_inset_area("center / left", {left:0, top:150, width:100, height:75}); - test_inset_area("center / center", {left:100, top:150, width:150, height:75}); - test_inset_area("center / right", {left:250, top:150, width:150, height:75}); - test_inset_area("bottom / left", {left:0, top:225, width:100, height:175}); - test_inset_area("bottom / center", {left:100, top:225, width:150, height:175}); - test_inset_area("bottom / right", {left:250, top:225, width:150, height:175}); + test_inset_area("top left", {left:0, top:0, width:100, height:150}); + test_inset_area("top center", {left:100, top:0, width:150, height:150}); + test_inset_area("top right", {left:250, top:0, width:150, height:150}); + test_inset_area("center left", {left:0, top:150, width:100, height:75}); + test_inset_area("center center", {left:100, top:150, width:150, height:75}); + test_inset_area("center right", {left:250, top:150, width:150, height:75}); + test_inset_area("bottom left", {left:0, top:225, width:100, height:175}); + test_inset_area("bottom center", {left:100, top:225, width:150, height:175}); + test_inset_area("bottom right", {left:250, top:225, width:150, height:175}); - test_inset_area("start / start", {left:0, top:0, width:100, height:150}); - test_inset_area("start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("start / end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / end", {left:250, top:150, width:150, height:75}); - test_inset_area("end / start", {left:0, top:225, width:100, height:175}); - test_inset_area("end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("end / end", {left:250, top:225, width:150, height:175}); + test_inset_area("start start", {left:0, top:0, width:100, height:150}); + test_inset_area("start center", {left:100, top:0, width:150, height:150}); + test_inset_area("start end", {left:250, top:0, width:150, height:150}); + test_inset_area("center start", {left:0, top:150, width:100, height:75}); + test_inset_area("center end", {left:250, top:150, width:150, height:75}); + test_inset_area("end start", {left:0, top:225, width:100, height:175}); + test_inset_area("end center", {left:100, top:225, width:150, height:175}); + test_inset_area("end end", {left:250, top:225, width:150, height:175}); - test_inset_area("self-start / self-start", {left:0, top:0, width:100, height:150}); - test_inset_area("self-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("self-start / self-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / self-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / self-end", {left:250, top:150, width:150, height:75}); - test_inset_area("self-end / self-start", {left:0, top:225, width:100, height:175}); - test_inset_area("self-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("self-end / self-end", {left:250, top:225, width:150, height:175}); + test_inset_area("self-start self-start", {left:0, top:0, width:100, height:150}); + test_inset_area("self-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("self-start self-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center self-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center self-end", {left:250, top:150, width:150, height:75}); + test_inset_area("self-end self-start", {left:0, top:225, width:100, height:175}); + test_inset_area("self-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("self-end self-end", {left:250, top:225, width:150, height:175}); - test_inset_area("y-start / x-start", {left:0, top:0, width:100, height:150}); - test_inset_area("y-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("y-start / x-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / x-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / x-end", {left:250, top:150, width:150, height:75}); - test_inset_area("y-end / x-start", {left:0, top:225, width:100, height:175}); - test_inset_area("y-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("y-end / x-end", {left:250, top:225, width:150, height:175}); + test_inset_area("y-start x-start", {left:0, top:0, width:100, height:150}); + test_inset_area("y-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("y-start x-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center x-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center x-end", {left:250, top:150, width:150, height:75}); + test_inset_area("y-end x-start", {left:0, top:225, width:100, height:175}); + test_inset_area("y-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("y-end x-end", {left:250, top:225, width:150, height:175}); - test_inset_area("y-self-start / x-self-start", {left:0, top:0, width:100, height:150}); - test_inset_area("y-self-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("y-self-start / x-self-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / x-self-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / x-self-end", {left:250, top:150, width:150, height:75}); - test_inset_area("y-self-end / x-self-start", {left:0, top:225, width:100, height:175}); - test_inset_area("y-self-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("y-self-end / x-self-end", {left:250, top:225, width:150, height:175}); + test_inset_area("y-self-start x-self-start", {left:0, top:0, width:100, height:150}); + test_inset_area("y-self-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("y-self-start x-self-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center x-self-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center x-self-end", {left:250, top:150, width:150, height:75}); + test_inset_area("y-self-end x-self-start", {left:0, top:225, width:100, height:175}); + test_inset_area("y-self-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("y-self-end x-self-end", {left:250, top:225, width:150, height:175}); // Multi-region spans - test_inset_area("y-self-start center / self-end center", {left:100, top:0, width:300, height:225}); - test_inset_area("bottom center / x-start x-end", {left:0, top:150, width:400, height:250}); - - // Non-orthogonal axes. - test_inset_area("x-start / left", {left:0, top:0, width:0, height:0}); - test_inset_area("y-end / y-self-start", {left:0, top:0, width:0, height:0}); + test_inset_area("span-y-self-start span-x-self-end", {left:100, top:0, width:300, height:225}); + test_inset_area("span-bottom span-all", {left:0, top:150, width:400, height:250}); // No implicit anchor means the inset-area should not apply. - anchored.style.anchorDefault = "implicit"; - test_inset_area("all / top", {left:0, top:0, width:0, height:0}); + anchored.style.positionAnchor = "implicit"; + test_inset_area("span-all top", {left:0, top:0, width:0, height:0}); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-computed-insets.tentative.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-computed-insets.html index 4e35dd883a..b06714b8a7 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-computed-insets.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-computed-insets.html @@ -1,21 +1,20 @@ <!DOCTYPE html> <title>CSS Anchor Positioning: inset-area should not affect computed inset values</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> -<lnik rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/css-typed-om/resources/testhelper.js"></script> <style> #abs { position: absolute; - inset-area: all; + inset-area: span-all; } </style> <div id="abs"></div> <script> test(() => { let style = abs.computedStyleMap(); - assert_equals(style.get("inset-area").toString(), "all", "inset-area is supported"); + assert_equals(style.get("inset-area").toString(), "span-all", "inset-area is supported"); assert_style_value_equals(style.get("left"), new CSSKeywordValue("auto")); assert_style_value_equals(style.get("right"), new CSSKeywordValue("auto")); assert_style_value_equals(style.get("top"), new CSSKeywordValue("auto")); diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-computed.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-computed.html index 46e29fda39..a49ff2a452 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-computed.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-computed.html @@ -10,14 +10,13 @@ </div> <script> test_computed_value("inset-area", "none"); - test_computed_value("inset-area", "all"); + test_computed_value("inset-area", "span-all"); test_computed_value("inset-area", "x-start"); test_computed_value("inset-area", "center"); - test_computed_value("inset-area", "all / all", "all"); - test_computed_value("inset-area", "top center"); - test_computed_value("inset-area", "bottom center / all", "center bottom"); - test_computed_value("inset-area", "x-start center x-end", "x-start x-end"); - test_computed_value("inset-area", "x-start / x-end"); + test_computed_value("inset-area", "span-all span-all", "span-all"); + test_computed_value("inset-area", "center center", "center"); + test_computed_value("inset-area", "top center", "center top"); + test_computed_value("inset-area", "span-bottom span-all", "span-bottom"); - assert_not_inherited("inset-area", "none", "all"); + assert_not_inherited("inset-area", "none", "span-all"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-in-grid.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-grid.html new file mode 100644 index 0000000000..bbf92e8d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-grid.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning inside grid</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- + Grid: + + 100 100 100 100 + +--------+--------+--------+--------+ + | | | | | + 100 | | | | | + | | | | | + +--------+--------+--------+--------+ + | | |XXXXXXXX|XXXXXXXX| + 100 | | |XXXXXXXX|XXXXXXXX| + | | |XXXXXXXX|XXXXXXXX| + +--------+--------+--------+--------+ + | | |XXXXXXXX|XXXXXXXX| + 100 | | |XXXXXXXX|XXXXXXXX| + | | |XXXXXXXX|XXXXXXXX| + +--------+--------+--------+--------+ + | | | | | + 100 | | | | | + | | | | | + +--------+--------+--------+--------+ + + + Inset regions: + + 100 150 150 + +--------+-------------+------------+ + | | | | + | | | | + 150 | | | | + | | | | + | | | | + +--------+-------------+------------+ + | | | | + 75 | | | | + | | | | + +--------+-------------+------------+ + | | | | + | | | | + 175 | | | | + | | | | + | | | | + +--------+-------------+------------+ + + --> + +<style> + #container { + display: grid; + grid: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr; + position: relative; + width: 400px; + height: 400px; + } + + #anchor { + position: absolute; + left: 100px; + top: 150px; + width: 150px; + height: 75px; + anchor-name: --anchor; + } + + #anchored { + grid-row-start: 2; + grid-row-end: span 2; + grid-column-start: 3; + grid-column-end: auto; + position: absolute; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; + } +</style> + +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(inset_area, insets, expected_offsets) { + anchored.style.insetArea = inset_area; + for (const [prop, value] of Object.entries(insets)) { + anchored.style[prop] = value; + } + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area + " and insets: " + JSON.stringify(insets)); + } + + test_inset_area("span-bottom span-left", {left:"auto", right:"auto", top:"auto", bottom:"auto"}, + {left:200, top:150, width:50, height:150}); + + test_inset_area("span-bottom span-left", {left:"10px", right:"10px", top:"10px", bottom:"10px"}, + {left:210, top:160, width:30, height:130}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html index 91c9b09735..b25a928b1f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html @@ -23,13 +23,15 @@ } .anchored { position: absolute; - anchor-default: --anchor; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; background-color: blue; } - #top-left { inset-area: top / left; } - #top-right { inset-area: top / right; } - #bottom-left { inset-area: bottom / left; } - #bottom-right { inset-area: bottom / right; } + #top-left { inset-area: top left; } + #top-right { inset-area: top right; } + #bottom-left { inset-area: bottom left; } + #bottom-right { inset-area: bottom right; } </style> <div id="in-flow"> <br> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-interpolation.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-interpolation.html index 29fe76ca5c..b09b391353 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-interpolation.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-interpolation.html @@ -9,6 +9,6 @@ test_no_interpolation({ property: "inset-area", from: "none", - to: "all / left" + to: "span-all left" }); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-parsing.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-parsing.html index 1ee88b00e6..7c7fc82491 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-parsing.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-parsing.html @@ -6,44 +6,157 @@ <script src="/css/support/parsing-testcommon.js"></script> <body> <script> + function test_valid_single_inset_area_values(valid_keywords) { + for (const keyword of valid_keywords) { + test_valid_value("inset-area", keyword); + } + }; + + function test_valid_inset_area_value_pairs(valid_keywords1, + valid_keywords2, + flip_order) { + for (const keyword1 of valid_keywords1) { + for (const keyword2 of valid_keywords2) { + if (keyword1 === keyword2) { + test_valid_value("inset-area", keyword1 + " " + keyword2, keyword1); + } else { + test_valid_value("inset-area", keyword1 + " " + keyword2, + flip_order ? keyword2 + " " + keyword1 : keyword1 + " " + keyword2); + } + } + } + }; + + function test_valid_inset_area_value_pairs_with_span_all_center( + valid_keywords, flip_order) { + for (const keyword of valid_keywords) { + test_valid_value("inset-area", keyword + " center", + flip_order ? "center " + keyword : keyword + " center"); + test_valid_value("inset-area", "center " + keyword, + flip_order ? "center " + keyword : keyword + " center"); + test_valid_value("inset-area", keyword + " span-all", keyword); + test_valid_value("inset-area", "span-all " + keyword, keyword); + } + }; + + function test_valid_inset_area_value_start_end_pairs_with_span_all_center( + valid_keywords) { + for (const keyword of valid_keywords) { + test_valid_value("inset-area", keyword + " center"); + test_valid_value("inset-area", "center " + keyword); + test_valid_value("inset-area", keyword + " span-all"); + test_valid_value("inset-area", "span-all " + keyword); + } + } + + function test_invalid_inset_area_value_pairs(valid_keywords1, + valid_keywords2) { + for (const keyword1 of valid_keywords1) { + for (const keyword2 of valid_keywords2) { + test_invalid_value("inset-area", keyword1 + " " + keyword2); + test_invalid_value("inset-area", keyword2 + " " + keyword1); + } + } + }; + + function test_invalid_inset_area_value_equal_pairs(valid_keywords) { + for (const keyword of valid_keywords) { + test_invalid_value("inset-area", keyword + " " + keyword); + } + }; + + const horizontal = [ "left", "right", "span-left", "span-right", "x-start", + "x-end", "span-x-start", "span-x-end", "x-self-start", + "x-self-end", "span-x-self-start", "span-x-self-end" ]; + const vertical = [ "top", "bottom", "span-top", "span-bottom", "y-start", + "y-end", "span-y-start", "span-y-end", "y-self-start", + "y-self-end", "span-y-self-start", "span-y-self-end" ]; + const inline = [ "inline-start", "inline-end", "span-inline-start", + "span-inline-end" ]; + const block = [ "block-start", "block-end", "span-block-start", + "span-block-end" ]; + const self_inline = [ "self-inline-start", "self-inline-end", + "span-self-inline-start", "span-self-inline-end" ]; + const self_block = [ "self-block-start", "self-block-end", + "span-self-block-start", "span-self-block-end" ]; + const start_end = [ "start", "end", "span-start", "span-end" ]; + const self_start_end = [ "self-start", "self-end", "span-self-start", + "span-self-end" ]; + + // Test initial value 'none' test_valid_value("inset-area", "none"); - test_valid_value("inset-area", "all"); - test_valid_value("inset-area", "start"); - test_valid_value("inset-area", "end"); - test_valid_value("inset-area", "top"); - test_valid_value("inset-area", "left"); - test_valid_value("inset-area", "bottom"); - test_valid_value("inset-area", "right"); - test_valid_value("inset-area", "self-start"); - test_valid_value("inset-area", "self-end"); - test_valid_value("inset-area", "x-start"); - test_valid_value("inset-area", "x-end"); - test_valid_value("inset-area", "x-self-start"); - test_valid_value("inset-area", "x-self-end"); - test_valid_value("inset-area", "y-start"); - test_valid_value("inset-area", "y-end"); - test_valid_value("inset-area", "y-self-start"); - test_valid_value("inset-area", "y-self-end"); - - test_valid_value("inset-area", "all / all", "all"); - test_valid_value("inset-area", "top / all", "top"); - test_valid_value("inset-area", "all / top", "all / top"); - test_valid_value("inset-area", "start end", "all"); - test_valid_value("inset-area", "center end start", "all"); - test_valid_value("inset-area", "center x-end x-start", "x-start x-end"); - test_valid_value("inset-area", "center end start / top center bottom", "all / top bottom"); - test_valid_value("inset-area", "end center / start", "center end / start"); - test_valid_value("inset-area", "bottom / left"); - test_valid_value("inset-area", "center start", "start center"); - // Valid to parse and compute, but resolves to 'none'. - test_valid_value("inset-area", "x-start / x-start"); - - test_invalid_value("inset-area", "/ all"); - test_invalid_value("inset-area", "none / none"); - test_invalid_value("inset-area", "start / none"); - test_invalid_value("inset-area", "none / start"); - test_invalid_value("inset-area", "center center"); + test_invalid_value("inset-area", "none none"); + test_invalid_value("inset-area", "start none"); + test_invalid_value("inset-area", "none start"); test_invalid_value("inset-area", "top left top"); - test_invalid_value("inset-area", "x-start end"); - test_invalid_value("inset-area", "bottom left"); + + // Test keywords allowed in all axes + test_valid_value("inset-area", "center"); + test_valid_value("inset-area", "center center", "center") + test_valid_value("inset-area", "span-all"); + test_valid_value("inset-area", "span-all span-all", "span-all"); + test_valid_value("inset-area", "center span-all"); + test_valid_value("inset-area", "span-all center"); + + test_valid_single_inset_area_values(horizontal); + test_valid_single_inset_area_values(vertical); + test_valid_single_inset_area_values(inline); + test_valid_single_inset_area_values(block); + test_valid_single_inset_area_values(start_end); + test_valid_single_inset_area_values(self_start_end); + + // Used if the sets of valid keywords are serialized in a different order than + // the argument order + const flip_order = true; + + // Test all valid combinations in both orders + test_valid_inset_area_value_pairs(horizontal, vertical); + test_valid_inset_area_value_pairs(vertical, horizontal, flip_order); + test_valid_inset_area_value_pairs(block, inline); + test_valid_inset_area_value_pairs(inline, block, flip_order); + test_valid_inset_area_value_pairs(self_block, self_inline); + test_valid_inset_area_value_pairs(self_inline, self_block, flip_order); + test_valid_inset_area_value_pairs(start_end, start_end); + test_valid_inset_area_value_pairs(self_start_end, self_start_end); + + // Test all valid combinations with 'span-all' and 'center' in both orders + test_valid_inset_area_value_pairs_with_span_all_center(horizontal); + test_valid_inset_area_value_pairs_with_span_all_center(vertical, flip_order); + test_valid_inset_area_value_pairs_with_span_all_center(block); + test_valid_inset_area_value_pairs_with_span_all_center(inline, flip_order); + test_valid_inset_area_value_pairs_with_span_all_center(self_block); + test_valid_inset_area_value_pairs_with_span_all_center(self_inline, flip_order); + test_valid_inset_area_value_start_end_pairs_with_span_all_center(start_end); + test_valid_inset_area_value_start_end_pairs_with_span_all_center(self_start_end); + + // Test all invalid combinations with incompatible axes in both orders + test_invalid_inset_area_value_pairs(horizontal, inline); + test_invalid_inset_area_value_pairs(horizontal, block); + test_invalid_inset_area_value_pairs(horizontal, self_inline); + test_invalid_inset_area_value_pairs(horizontal, self_block); + test_invalid_inset_area_value_pairs(horizontal, start_end); + test_invalid_inset_area_value_pairs(horizontal, self_start_end); + test_invalid_inset_area_value_pairs(vertical, inline); + test_invalid_inset_area_value_pairs(vertical, block); + test_invalid_inset_area_value_pairs(vertical, self_inline); + test_invalid_inset_area_value_pairs(vertical, self_block); + test_invalid_inset_area_value_pairs(vertical, start_end); + test_invalid_inset_area_value_pairs(vertical, self_start_end); + test_invalid_inset_area_value_pairs(inline, self_inline); + test_invalid_inset_area_value_pairs(inline, self_block); + test_invalid_inset_area_value_pairs(inline, start_end); + test_invalid_inset_area_value_pairs(inline, self_start_end); + test_invalid_inset_area_value_pairs(block, self_inline); + test_invalid_inset_area_value_pairs(block, self_block); + test_invalid_inset_area_value_pairs(block, start_end); + test_invalid_inset_area_value_pairs(block, self_start_end); + test_invalid_inset_area_value_pairs(start_end, self_start_end); + + // Test all invalid combinations of same axis + test_invalid_inset_area_value_equal_pairs(horizontal); + test_invalid_inset_area_value_equal_pairs(vertical); + test_invalid_inset_area_value_equal_pairs(inline); + test_invalid_inset_area_value_equal_pairs(block); + test_invalid_inset_area_value_equal_pairs(self_inline); + test_invalid_inset_area_value_equal_pairs(self_block); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust-ref.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust-ref.html new file mode 100644 index 0000000000..5cd863500a --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Test Reference</title> +<p>You should see a green square below</p> +<div id="scroller" style="overflow:auto;width:400px;height:200px"> + <div style="height:200px"></div> + <div style="width:200px;height:200px;background:green"></div> + <div style="height:300px"></div> +</div> +<script> + scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust.html new file mode 100644 index 0000000000..0d3cef4fc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area anchored against scrolling anchor</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<link rel="match" href="inset-area-scroll-adjust-ref.html"> +<style> + #scroller { + width: 400px; + height: 200px; + overflow: auto; + } + #anchor { + background: green; + width: 200px; + height: 100px; + } + #anchored { + inset-area: bottom; + margin: 0; + padding: 0; + border: none; + background: green; + width: 200px; + height: 100px; + } + .filler { height: 200px; } +</style> +<p>You should see a green square below</p> +<div id="scroller"> + <div class="filler"></div> + <div id="anchor" popovertarget="anchored"></div> + <div id="anchored" anchor="anchor" popover></div> + <div class="filler"></div> + <div class="filler"></div> +</div> +<script> + anchored.showPopover(); + scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-with-insets.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-with-insets.html new file mode 100644 index 0000000000..2482b44313 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-with-insets.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning with additional insets</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- The grid: + + 100 150 150 + +--------+--------+--------+ + | | | | + 150 | | | | + | | | | + +--------+--------+--------+ + | | | | + 75 | | | | + | | | | + +--------+--------+--------+ + | | | | + 175 | | | | + | | | | + +--------+--------+--------+ + + --> +<style> + #container { + position: absolute; + width: 400px; + height: 400px; + } + #anchored { + position: absolute; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; + } + #anchor { + margin-top: 150px; + margin-left: 100px; + width: 150px; + height: 75px; + anchor-name: --anchor; + } +</style> +<div id="container"> + <div id="anchored"></div> + <div id="anchor"></div> +</div> +<script> + function test_inset_area(inset_area, insets, expected_offsets) { + anchored.style.insetArea = inset_area; + for (const [prop, value] of Object.entries(insets)) { + anchored.style[prop] = value; + } + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area + " and insets: " + JSON.stringify(insets)); + } + + test_inset_area("span-all", {top:"5px", bottom:"5px", left:"5px", right:"5px"}, + {left:5, top:5, width:390, height:390}); + + test_inset_area("center center", {top:"10px", bottom:"40px", left:"5px", right:"15px"}, + {left:105, top:160, width:130, height:25}); + + test_inset_area("left bottom", {top:"10px", bottom:"40px", left:"5px", right:"15px"}, + {left:5, top:235, width:80, height:125}); + + test_inset_area("span-right center", {top:"20%", bottom:"auto", left:"auto", right:"25%"}, + {left:100, top:165, width:225, height:60}); + + // No implicit anchor means the inset-area should not apply, but the insets still should. + anchored.style.positionAnchor = "implicit"; + test_inset_area("bottom right", {left:"50px", right:"100px", top:"30px" , bottom:"10px"}, + {left:50, top:30, width:250, height:360}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-wm-dir.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-wm-dir.html index 5268cba7e5..7e740b4ace 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-wm-dir.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-wm-dir.html @@ -31,7 +31,7 @@ position: absolute; align-self: stretch; justify-self: stretch; - anchor-default: --anchor; + position-anchor: --anchor; } #anchor { margin-top: 150px; @@ -70,50 +70,54 @@ let writing_direction = "containing-block: horizontal-tb / rtl"; container.style.writingMode = "horizontal-tb"; container.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", top_right); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", top_right); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", top_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + test_inset_area(writing_direction, "inline-start block-end", bottom_right); + test_inset_area(writing_direction, "self-inline-start self-block-end", bottom_left); // containing-block: vertical-lr / ltr // self: horizontal-tb / ltr writing_direction = "containing-block: vertical-lr / ltr"; container.style.writingMode = "vertical-lr"; container.style.direction = "ltr"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + test_inset_area(writing_direction, "inline-start block-end", top_right); + test_inset_area(writing_direction, "self-inline-start self-block-end", bottom_left); // containing-block: vertical-lr / rtl // self: horizontal-tb / ltr writing_direction = "containing-block: vertical-lr / rtl"; container.style.writingMode = "vertical-lr"; container.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", bottom_left); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", bottom_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", bottom_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", bottom_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); // containing-block: vertical-rl / ltr // self: horizontal-tb / ltr writing_direction = "containing-block: vertical-rl / ltr"; container.style.writingMode = "vertical-rl"; container.style.direction = "ltr"; - test_inset_area(writing_direction, "start / start", top_right); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", top_right); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", top_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); // containing-block: vertical-rl / rtl // self: horizontal-tb / ltr writing_direction = "containing-block: vertical-rl / rtl"; container.style.writingMode = "vertical-rl"; container.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", bottom_right); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", bottom_right); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", bottom_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", bottom_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); // Writing-mode and direction on self container.style.writingMode = "horizontal-tb"; @@ -124,49 +128,49 @@ writing_direction = "self: horizontal-tb / rtl"; anchored.style.writingMode = "horizontal-tb"; anchored.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", top_right); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_right); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_right); // containing-block: horizontal-tb / ltr // self: vertical-lr / ltr writing_direction = "self: vertical-lr / ltr"; anchored.style.writingMode = "vertical-lr"; anchored.style.direction = "ltr"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); // containing-block: horizontal-tb / ltr // self: vertical-lr / rtl writing_direction = "self: vertical-lr / rtl"; anchored.style.writingMode = "vertical-lr"; anchored.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", bottom_left); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", bottom_left); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", bottom_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", bottom_left); // containing-block: horizontal-tb / ltr // self: vertical-rl / ltr writing_direction = "self: vertical-rl / ltr"; anchored.style.writingMode = "vertical-rl"; anchored.style.direction = "ltr"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", top_right); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_right); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_right); // containing-block: horizontal-tb / ltr // self: vertical-rl / rtl writing_direction = "self: vertical-rl / rtl"; anchored.style.writingMode = "vertical-rl"; anchored.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", bottom_right); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", bottom_right); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", bottom_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", bottom_right); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-computed.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-computed.html index f0944b7faa..91b27d4f31 100644 --- a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-computed.html +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-computed.html @@ -19,6 +19,15 @@ test_computed_value("position-try-options", "flip-start flip-inline flip-block"); test_computed_value("position-try-options", "flip-start --flop", "--flop flip-start"); test_computed_value("position-try-options", "--flop flip-start"); + test_computed_value("position-try-options", "inset-area(left top)"); + test_computed_value("position-try-options", "inset-area(top left)", "inset-area(left top)"); + test_computed_value("position-try-options", "inset-area(start start)", "inset-area(start)"); + test_computed_value("position-try-options", "inset-area(left), inset-area(right)"); + test_computed_value("position-try-options", "--foo, inset-area(left)"); + test_computed_value("position-try-options", "--foo, inset-area(left), --bar"); + test_computed_value("position-try-options", "--foo, flip-start, inset-area(left)"); + test_computed_value("position-try-options", "--foo flip-start, inset-area(left)"); + test_computed_value("position-try-options", "inset-area(left), --bar flip-start"); assert_not_inherited("position-try-options", "none", "flip-inline"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-parsing.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-parsing.html index 303cc4d0dd..72bc74111b 100644 --- a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-parsing.html +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-parsing.html @@ -25,6 +25,15 @@ test_valid_value("position-try-options", "--bar flip-inline flip-block"); test_valid_value("position-try-options", "flip-inline --foo", "--foo flip-inline"); test_valid_value("position-try-options", "flip-inline flip-start --foo", "--foo flip-inline flip-start"); + test_valid_value("position-try-options", "inset-area(left top)"); + test_valid_value("position-try-options", "inset-area(top left)", "inset-area(left top)"); + test_valid_value("position-try-options", "inset-area(start start)", "inset-area(start)"); + test_valid_value("position-try-options", "inset-area(left), inset-area(right)"); + test_valid_value("position-try-options", "--foo, inset-area(left)"); + test_valid_value("position-try-options", "--foo, inset-area(left), --bar"); + test_valid_value("position-try-options", "--foo, flip-start, inset-area(left)"); + test_valid_value("position-try-options", "--foo flip-start, inset-area(left)"); + test_valid_value("position-try-options", "inset-area(left), --bar flip-start"); test_invalid_value("position-try-options", "none, flip-start"); test_invalid_value("position-try-options", "flip-block flip-block"); @@ -37,4 +46,10 @@ test_invalid_value("position-try-options", "foo"); test_invalid_value("position-try-options", "flip-start 123"); test_invalid_value("position-try-options", "--foo 123"); + test_invalid_value("position-try-options", "--foo inset-area(left)"); + test_invalid_value("position-try-options", "flip-start inset-area(left)"); + test_invalid_value("position-try-options", "inset-area(left) --foo "); + test_invalid_value("position-try-options", "inset-area(left) flip-start"); + test_invalid_value("position-try-options", "--foo, none"); + test_invalid_value("position-try-options", "--foo, inset-area(none)"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html new file mode 100644 index 0000000000..ff4ceb73df --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: Computed position-visibility</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +<div id="container"> + <div id="target"></div> +</div> +<script> + test_computed_value("position-visibility", "always"); + test_computed_value("position-visibility", "anchors-valid"); + test_computed_value("position-visibility", "anchors-visible"); + test_computed_value("position-visibility", "no-overflow"); + test_computed_value("position-visibility", "anchors-valid no-overflow"); + test_computed_value("position-visibility", "anchors-visible no-overflow"); + test_computed_value("position-visibility", "no-overflow anchors-valid", "anchors-valid no-overflow"); + test_computed_value("position-visibility", "no-overflow anchors-visible", "anchors-visible no-overflow"); + + assert_not_inherited("position-visibility", "always", "no-overflow"); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html new file mode 100644 index 0000000000..18dd27eadb --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: Parsing of position-visibility</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<div id="target"></div> +<script> + test_valid_value("position-visibility", "initial"); + test_valid_value("position-visibility", "inherit"); + test_valid_value("position-visibility", "unset"); + test_valid_value("position-visibility", "revert"); + test_valid_value("position-visibility", "always"); + test_valid_value("position-visibility", "anchors-valid"); + test_valid_value("position-visibility", "anchors-visible"); + test_valid_value("position-visibility", "no-overflow"); + test_valid_value("position-visibility", "anchors-valid no-overflow"); + test_valid_value("position-visibility", "anchors-visible no-overflow"); + test_valid_value("position-visibility", "no-overflow anchors-valid", "anchors-valid no-overflow"); + test_valid_value("position-visibility", "no-overflow anchors-visible", "anchors-visible no-overflow"); + + test_invalid_value("position-visibility", "always anchors-valid"); + test_invalid_value("position-visibility", "always anchors-visible"); + test_invalid_value("position-visibility", "always no-overflow"); + test_invalid_value("position-visibility", "anchors-valid anchors-visible"); + test_invalid_value("position-visibility", "no-overflow no-overflow"); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-001.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-001.html index 1700a84aa8..d927b6b902 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-001.html @@ -1,8 +1,8 @@ <!DOCTYPE html> -<title>Tests the 'anchor-default' property</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-default"> +<title>Tests the 'position-anchor' property</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> -<link rel="match" href="anchor-default-ref.html"> +<link rel="match" href="position-anchor-ref.html"> <style> .anchor { width: 100px; @@ -34,7 +34,7 @@ body { } #target1 { - anchor-default: --a1; + position-anchor: --a1; } #anchor2 { @@ -44,7 +44,7 @@ body { } #target2 { - anchor-default: --a2; + position-anchor: --a2; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-002.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-002.html index c0a962ad36..d55338e1e9 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-002.html @@ -1,8 +1,8 @@ <!DOCTYPE html> -<title>Tests that 'anchor-default' property value is tree-scoped</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-default"> +<title>Tests that 'position-anchor' property value is tree-scoped</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> -<link rel="match" href="anchor-default-ref.html"> +<link rel="match" href="position-anchor-ref.html"> <style> .anchor { width: 100px; @@ -61,7 +61,7 @@ for (let host of document.querySelectorAll('.anchor')) { shadow.innerHTML = ` <style> :host { anchor-name: --a; } - ::slotted(.target) { anchor-default: --a; } + ::slotted(.target) { position-anchor: --a; } </style> <slot></slot> `; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-003.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-003.html index 00c2032434..6117027e22 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-003.html @@ -1,6 +1,6 @@ <!DOCTYPE html> -<title>Tests that layout is updated on anchor-default value changes</title> -<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/#anchor-default"> +<title>Tests that layout is updated on position-anchor value changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/#position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -13,11 +13,11 @@ background: lime; top: anchor(top); left: anchor(right); - anchor-default: --a; + position-anchor: --a; } #target.after { - anchor-default: --b; + position-anchor: --b; } #anchor1, #anchor2 { @@ -51,5 +51,5 @@ test(() => { // #target should be anchored to #anchor2 now assert_equals(target.offsetLeft, 200); assert_equals(target.offsetTop, 100); -}, 'Layout is updated on `anchor-default` changes'); +}, 'Layout is updated on `position-anchor` changes'); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-basics.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-basics.html index 783cb539cc..f9fe9dd6f8 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-basics.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-basics.html @@ -1,6 +1,6 @@ <!DOCTYPE html> -<title>Tests basics of the 'anchor-default' property</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-default"> +<title>Tests basics of the 'position-anchor' property</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -14,28 +14,28 @@ </div> <script> -// anchor-default: <anchor-element> +// position-anchor: <anchor-element> // <anchor-element> = implicit | <dashed-ident> -test_valid_value('anchor-default', 'implicit'); -test_valid_value('anchor-default', '--foo'); -test_invalid_value('anchor-default', 'none'); -test_invalid_value('anchor-default', 'foo-bar'); -test_invalid_value('anchor-default', '--foo --bar') -test_invalid_value('anchor-default', '--foo, --bar') -test_invalid_value('anchor-default', '100px'); -test_invalid_value('anchor-default', '100%'); +test_valid_value('position-anchor', 'implicit'); +test_valid_value('position-anchor', '--foo'); +test_invalid_value('position-anchor', 'none'); +test_invalid_value('position-anchor', 'foo-bar'); +test_invalid_value('position-anchor', '--foo --bar') +test_invalid_value('position-anchor', '--foo, --bar') +test_invalid_value('position-anchor', '100px'); +test_invalid_value('position-anchor', '100%'); // Computed value: as specified -test_computed_value('anchor-default', 'implicit'); -test_computed_value('anchor-default', '--foo'); +test_computed_value('position-anchor', 'implicit'); +test_computed_value('position-anchor', '--foo'); // Initial: implicit // Inherited: no -assert_not_inherited('anchor-default', 'implicit', '--foo'); +assert_not_inherited('position-anchor', 'implicit', '--foo'); // Animation type: discrete test_no_interpolation({ - property: 'anchor-default', + property: 'position-anchor', from: '--foo', to: 'implicit', }); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-ref.html index 4d7de12447..4d7de12447 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-ref.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-ref.html diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-basics.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-basics.html deleted file mode 100644 index bfeb921de1..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-basics.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<title>Tests basics of the 'position-fallback' property</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-position-fallback"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/parsing-testcommon.js"></script> -<script src="/css/support/computed-testcommon.js"></script> -<script src="/css/support/inheritance-testcommon.js"></script> -<script src="/css/support/interpolation-testcommon.js"></script> - -<div id="container"> - <div id="target"></div> -</div> - -<script> -// position-fallback: none | <dashed-ident> -test_valid_value('position-fallback', 'none'); -test_valid_value('position-fallback', '--foo'); -test_invalid_value('position-fallback', 'foo-bar'); -test_invalid_value('position-fallback', '--foo --bar') -test_invalid_value('position-fallback', '--foo, --bar') -test_invalid_value('position-fallback', '100px'); -test_invalid_value('position-fallback', '100%'); - -// Computed value: as specified -test_computed_value('position-fallback', 'none'); -test_computed_value('position-fallback', '--foo'); - -// Initial: none -// Inherited: no -assert_not_inherited('position-fallback', 'none', '--foo'); - -// Animation type: discrete -test_no_interpolation({ - property: 'position-fallback', - from: '--foo', - to: 'none', -}); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html deleted file mode 100644 index ebd1e78fb9..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html +++ /dev/null @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<title>Tests basic functionalities of 'position-fallback-bounds'</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - margin: 0; -} - -.container { - position: relative; - width: 400px; - height: 400px; - top: 100px; - anchor-name: --bounds; - outline: 1px dashed black; -} - -.anchor { - position: absolute; - width: 100px; - height: 100px; - left: 150px; - background-color: orange; -} - -.target { - position: fixed; - width: 100px; - height: 100px; - background-color: lime; - left: anchor(left); - position-fallback-bounds: --bounds; -} - -#anchor1 { - top: 0; - anchor-name: --a1; -} -#anchor2 { - bottom: 0; - anchor-name: --a2; -} - -#target1 { - anchor-default: --a1; - bottom: anchor(top); - position-try-options: --bottom; -} -#target2 { - anchor-default: --a2; - top: anchor(bottom); - position-try-options: --top; -} - -@position-try --bottom { - bottom: auto; - top: anchor(bottom); -} -@position-try --top { - top: auto; - bottom: anchor(top); -} -</style> - -<body onload="checkLayoutForAnchorPos('.target')"> - <div class="container" id="bounds"> - <div class="anchor" id="anchor1"></div> - <div class="anchor" id="anchor2"></div> - </div> - - <!-- Enough space above the anchor in the viewport but not in the additional - bounds rect, which triggers fallback --> - <div class="target" id="target1" data-offset-y=200></div> - - <!-- Enough space below the anchor in the viewport but not in the additional - bounds rect, which triggers fallback --> - <div class="target" id="target2" data-offset-y=300></div> -</body> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-002.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-002.html deleted file mode 100644 index 159484ad33..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-002.html +++ /dev/null @@ -1,87 +0,0 @@ -<!DOCTYPE html> -<title>Tests 'position-fallback-bounds' with mixed writing modes</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - margin: 0; -} - -.container { - position: relative; - width: 400px; - height: 400px; - top: 100px; - anchor-name: --bounds; - outline: 1px dashed black; -} - -.anchor { - position: absolute; - width: 100px; - height: 100px; - left: 150px; - background-color: orange; -} - -.target { - position: fixed; - width: 100px; - height: 100px; - background-color: lime; - left: anchor(left); - position-fallback-bounds: --bounds; -} - -#anchor1 { - top: 0; - anchor-name: --a1; -} -#anchor2 { - bottom: 0; - anchor-name: --a2; -} - -#target1 { - anchor-default: --a1; - bottom: anchor(top); - position-try: --bottom; - writing-mode: vertical-rl; -} -#target2 { - anchor-default: --a2; - top: anchor(bottom); - position-try: --top; - writing-mode: vertical-lr; - direction: rtl; -} - -@position-try --bottom { - bottom: auto; - top: anchor(bottom); -} -@position-try --top { - top: auto; - bottom: anchor(top); -} -</style> - -<body onload="checkLayoutForAnchorPos('.target')"> - <div class="container" id="bounds"> - <div class="anchor" id="anchor1"></div> - <div class="anchor" id="anchor2"></div> - </div> - - <!-- Enough space above the anchor in the viewport but not in the additional - bounds rect, which triggers fallback --> - <div class="target" id="target1" data-offset-y=200></div> - - <!-- Enough space below the anchor in the viewport but not in the additional - bounds rect, which triggers fallback --> - <div class="target" id="target2" data-offset-y=300></div> -</body> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-003.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-003.html deleted file mode 100644 index 9da7bf9ccd..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-003.html +++ /dev/null @@ -1,95 +0,0 @@ -<!DOCTYPE html> -<title>Tests basic interaction between 'position-fallback-bounds' and scrolling</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - position: relative; - width: 200vw; - height: 200vh; -} - -#bounds { - position: fixed; - inset: 50px; - background: gray; - opacity: 0.1; - z-index: -1; - anchor-name: --bounds; -} - -#anchor { - position: absolute; - width: 100px; - height: 100px; - left: 200px; - top: 200px; - background-color: orange; - anchor-name: --a; -} - -#target { - position: fixed; - width: 100px; - height: 100px; - background-color: lime; - anchor-default: --a; - position-fallback-bounds: --bounds; - position-try-options: --corner1, --corner2, --corner3; - bottom: anchor(top); - right: anchor(left); -} - -@position-try --corner1 { - inset: auto; - top: anchor(bottom); - right: anchor(left); -} -@position-try --corner2 { - inset: auto; - bottom: anchor(top); - left: anchor(right); -} -@position-try --corner3 { - inset: auto; - top: anchor(bottom); - left: anchor(right); -} -</style> - -<div id="bounds"></div> -<div id="anchor"></div> -<div id="target"></div> - -<script> -promise_test(async () => { - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); - assert_fallback_position(target, anchor, 'left'); -}, "Target is at anchor's top-left corner at initial scroll position"); - -promise_test(async () => { - document.documentElement.scrollTop = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'bottom'); - assert_fallback_position(target, anchor, 'left'); -}, "Target falls back to anchor's bottom-left corner after anchor is scrolled upwards"); - -promise_test(async () => { - document.documentElement.scrollLeft = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'bottom'); - assert_fallback_position(target, anchor, 'right'); -}, "Target falls back to anchor's bottom-right corner after anchor is further scrolled leftwards"); - -promise_test(async () => { - document.documentElement.scrollTop = 0; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); - assert_fallback_position(target, anchor, 'right'); -}, "Target falls back to anchor's top-left corner after anchor is scrolled back downwards"); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-004.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-004.html deleted file mode 100644 index eeee710e0f..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-004.html +++ /dev/null @@ -1,99 +0,0 @@ -<!DOCTYPE html> -<title>Tests complex interaction between 'position-fallback-bounds' and scrolling</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - margin: 0; -} - -#anchor-scroller { - position: absolute; - height: 175px; - width: 200px; - left: 200px; - top: 100px; - overflow-y: scroll; - z-index: 100; -} - -#anchor { - position: absolute; - width: 100px; - height: 100px; - left: 0; - top: 150px; - background-color: orange; - anchor-name: --a; -} - -#bounds-scroller { - position: absolute; - width: 400px; - height: 400px; - left: 100px; - top: 0; - overflow-y: scroll; -} - -#bounds { - position: absolute; - width: 400px; - height: 400px; - top: 100px; - background: gray; - anchor-name: --bounds; -} - -#target { - position: fixed; - width: 100px; - height: 100px; - background-color: lime; - left: anchor(left); - anchor-default: --a; - position-fallback-bounds: --bounds; - position-try-options: --bottom; - bottom: anchor(top); -} - -@position-try --bottom { - top: anchor(bottom); - bottom: auto; -} -</style> - -<div id="anchor-scroller"> - <div id="anchor"></div> -</div> - -<div id="bounds-scroller"> - <div id="bounds"></div> -</div> - -<div id="target"></div> - -<script> -promise_test(async () => { - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); -}, 'Target is above anchor at initial scroll position'); - -promise_test(async () => { - const anchorScroller = document.getElementById('anchor-scroller'); - anchorScroller.scrollTop = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'bottom'); -}, 'Target falls back to below anchor after anchor is scrolled upwards'); - -promise_test(async () => { - const boundsScroller = document.getElementById('bounds-scroller'); - boundsScroller.scrollTop = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); -}, 'Target returns to above anchor after bounds are scrolled upwards'); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-005.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-005.html deleted file mode 100644 index fecd4328a5..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-005.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<title>Tests relayout after 'position-fallback-bounds' change</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="support/test-common.js"></script> - -<style> -.bounds { - position: absolute; - left: 100px; - width: 200px; - height: 200px; - background: gray; - opacity: 0.1; -} - -#bounds1 { - top: 0; - anchor-name: --bounds1; -} - -#bounds2 { - top: 300px; - anchor-name: --bounds2; -} - -#anchor { - position: absolute; - width: 100px; - height: 100px; - background: orange; - left: 150px; - top: 200px; - anchor-name: --a; -} - -#target { - position: fixed; - width: 100px; - height: 100px; - background: lime; - left: anchor(left); - bottom: anchor(top); - anchor-default: --a; - position-try-options: --bottom; - position-fallback-bounds: --bounds1; -} - -@position-try --bottom { - bottom: auto; - top: anchor(bottom); -} -</style> - -<div class="bounds" id="bounds1"></div> -<div class="bounds" id="bounds2"></div> -<div id="anchor"></div> -<div id="target"></div> - -<script> -test(() => { - assert_fallback_position(target, anchor, 'top'); -}, 'Initial layout'); - -test(() => { - target.style = 'position-fallback-bounds: --bounds2'; - assert_fallback_position(target, anchor, 'bottom'); -}, 'Layout is updated after position-fallback-bounds property changes'); - -test(() => { - bounds2.style = 'top: 0; height: 500px'; - assert_fallback_position(target, anchor, 'top'); -}, 'Layout is updated after additional fallback-bounds rect changes'); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-006.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-006.html deleted file mode 100644 index 023c650cfc..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-006.html +++ /dev/null @@ -1,65 +0,0 @@ -<!DOCTYPE html> -<title>Tests 'position-fallback-bounds' should work without default anchor</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - margin: 0; -} - -#bounds { - position: absolute; - left: 0; - right: 0; - top: 100px; - height: calc(100vh + 200px); - background: lightgray; - anchor-name: --bounds; -} - -#anchor { - position: fixed; - width: 100px; - height: 100px; - left: 0; - top: 100px; - background: orange; - anchor-name: --a; -} - -#target { - position: fixed; - width: 100px; - height: 100px; - background: lime; - position-try-options: --bottom; - position-fallback-bounds: --bounds; - bottom: anchor(--a top); -} - -@position-try --bottom { - top: anchor(--a bottom); - bottom: auto; -} -</style> - -<div id=bounds></div> -<div id=anchor></div> -<div id=target></div> - -<script> -promise_test(async () => { - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'bottom'); -}, "Target is below anchor at initial scroll position"); - -promise_test(async () => { - document.documentElement.scrollTop = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); -}, "Target moves to above anchor after the additional fallback-bounds rect is scrolled upwards"); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-basics.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-basics.html deleted file mode 100644 index 3b8b67bd97..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-basics.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<title>Tests basics of the 'position-fallback' property</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#propdef-position-fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/parsing-testcommon.js"></script> -<script src="/css/support/computed-testcommon.js"></script> -<script src="/css/support/inheritance-testcommon.js"></script> -<script src="/css/support/interpolation-testcommon.js"></script> - -<div id="container"> - <div id="target"></div> -</div> - -<script> -// position-fallback-bounds: normal | <dashed-ident> -test_valid_value('position-fallback-bounds', 'normal'); -test_valid_value('position-fallback-bounds', '--foo'); -test_invalid_value('position-fallback-bounds', 'foo-bar'); -test_invalid_value('position-fallback-bounds', '--foo --bar') -test_invalid_value('position-fallback-bounds', '--foo, --bar') -test_invalid_value('position-fallback-bounds', '100px'); -test_invalid_value('position-fallback-bounds', '100%'); - -// Computed value: as specified -test_computed_value('position-fallback-bounds', 'normal'); -test_computed_value('position-fallback-bounds', '--foo'); - -// Initial: normal -// Inherited: no -assert_not_inherited('position-fallback-bounds', 'normal', '--foo'); - -// Animation type: discrete -test_no_interpolation({ - property: 'position-fallback-bounds', - from: '--foo', - to: 'normal', -}); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-cascade.html b/testing/web-platform/tests/css/css-anchor-position/position-try-cascade.html new file mode 100644 index 0000000000..d73ddd586a --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-cascade.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: @position-try and cascade interaction</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .cb { + position: relative; + width: 100px; + height: 100px; + background: lightpink; + display: inline-block; + } + .abs { + position: absolute; + background: darkcyan; + left: 0px; + top: 0px; + width: 150px; /* force fallback */ + height: 25px; + position-try-options: --pf; + } + @position-try --pf { + width: 50px; + left: 50px; + top: 50px; + } +</style> + +<!-- Basic @position-try rule --> +<div class=cb> + <div id=abs_try class=abs></div> +</div> +<script> + test(() => { + assert_equals(abs_try.offsetLeft, 50); + assert_equals(abs_try.offsetTop, 50); + }, '@position-try rule applies'); +</script> + +<!-- Inline style --> +<div class=cb> + <div id=abs_inline class=abs style="left:20px"></div> +</div> +<script> + test(() => { + assert_equals(abs_inline.offsetLeft, 50); + assert_equals(abs_inline.offsetTop, 50); + }, '@position-try rule wins over inline style'); +</script> + +<!-- !important --> +<style> + #abs_important { + left: 10px !important; + } +</style> +<div class=cb> + <div id=abs_important class=abs></div> +</div> +<script> + test(() => { + assert_equals(abs_important.offsetLeft, 10); + assert_equals(abs_important.offsetTop, 50); + }, '@position-try rule does not win over !important'); +</script> + +<!-- Animations --> +<style> + @keyframes anim { + from { top: 20px; } + to { top: 20px; } + } + #abs_animation { + animation: anim 1000s steps(2, start) paused; + } +</style> +<div class=cb> + <div id=abs_animation class=abs></div> +</div> +<script> + test(() => { + assert_equals(abs_animation.offsetLeft, 50); + assert_equals(abs_animation.offsetTop, 20); + }, '@position-try rule does not win over animations'); +</script> + +<!-- Transitions --> +<style> + #abs_transition.move { + top: 10px !important; + transition: top 1000s steps(2, start); +</style> +<div class=cb> + <div id=abs_transition class=abs></div> +</div> +<script> + test(() => { + abs_transition.offsetTop; + abs_transition.classList.add('move'); + assert_equals(abs_transition.offsetLeft, 50); + assert_equals(abs_transition.offsetTop, 30); + }, '@position-try rule does not win over transitions'); +</script> + +<!-- revert / revert-layer --> +<style> + #abs_revert { + position-try-options: --pf-revert; + } + @layer author-layer { + #abs_revert { + top: 30px; + left: 30px; + } + } + #abs_revert { + top: 20px; + left: 20px; + /* overflowing .cb to force --pf-revert to be applied */ + width: 200px; + height: 200px; + } + @position-try --pf-revert { + left: revert; + top: revert-layer; + width: 30px; + height: 30px; + } +</style> +<div class=cb class=abs> + <div id=abs_revert class=abs></div> +</div> +<script> + test(() => { + assert_equals(abs_revert.offsetLeft, 0, "left reverted back to user origin"); + assert_equals(abs_revert.offsetTop, 20, "top reverted back to author"); + assert_equals(abs_revert.offsetWidth, 30, "width from --pf-revert"); + assert_equals(abs_revert.offsetHeight, 30, "height from --pf-revert"); + }, '@position-try revert / revert-layer reverts to user / author origin'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-initial-transition.html b/testing/web-platform/tests/css/css-anchor-position/position-try-initial-transition.html new file mode 100644 index 0000000000..0e81607ae6 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-initial-transition.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: Initial @position-try does not trigger a transition</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=cb> + <div id=abs></div> +</div> +<style> + #cb { + position: relative; + width: 100px; + height: 100px; + background: lightpink; + } + #abs { + position: absolute; + background: darkcyan; + top: 10px; + left: 10px; + width: 150px; /* force fallback */ + height: 25px; + position-try-options: --pf; + transition-property: top, left; + transition-duration: 10s; + transition-timing-function: steps(2, start); + } + @position-try --pf { + width: 50px; + top: 50px; + left: 50px; + } +</style> +<script> + test(() => { + assert_equals(getComputedStyle(abs).top, '50px'); + assert_equals(getComputedStyle(abs).left, '50px'); + }, 'No transition for initial style with @position-try'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-options-limit.html b/testing/web-platform/tests/css/css-anchor-position/position-try-options-limit.html new file mode 100644 index 0000000000..32a4f592fa --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-options-limit.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: position options list limit</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #container { + position: relative; + width: 200px; + height: 200px; + } + .positioned { + width: 200px; + height: 200px; + position: absolute; + top: 0; + left: 10px; /* overflowing #container */ + } + + @position-try --bar { + left: 0; /* not overflowing #container */ + } + #t1 { + /* If --foo is not found, we should still try --bar even if we limit the + number of applied position options to five because the --foo's are not + added to the `position options list` per spec. */ + position-try-options: --foo, --foo, --foo, --foo, --foo, --foo, --foo, --bar; + } + + /* --f1 .. --f4 all overflowing #container */ + @position-try --f1 { left: 10px; } + @position-try --f2 { left: 10px; } + @position-try --f3 { left: 10px; } + @position-try --f4 { left: 10px; } + @position-try --f5 { left: 20px; width: 20px; /* not overflowing #container */ } + #t2 { + position-try-options: --f1, --f2, --f3, --f4, --f5; + } + +</style> +<div id="container"> + <div id="t1" class="positioned"></div> + <div id="t2" class="positioned"></div> +</div> +<script> + test(() => { + assert_equals(t1.offsetLeft, 0, "The --bar try option should be applied"); + }, "Try options which are not found are not part of the limit"); + + test(() => { + assert_equals(t2.offsetLeft, 20, "The --f5 try option should be applied"); + }, "Must support At least five try options"); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-order-basic.html b/testing/web-platform/tests/css/css-anchor-position/position-try-order-basic.html new file mode 100644 index 0000000000..d1c74e7b9f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-order-basic.html @@ -0,0 +1,197 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Basic position-try-order behavior</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 200px; + width: 150px; + height: 150px; + background-color: coral; + anchor-name: --a; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + position-anchor: --a; + } + #ref { + background-color: seagreen; + } + +/* + +The IMCB for --right is the whole area to the right of the anchor, and similarly +for --left, etc. + + ┌──────────────┐ + │ xxxx│ + │ xxxx│ + │ ┌────┐xxxx│ + │ │ │xxxx│ + │ └────┘xxxx│ + │ xxxx│ + │ xxxx│ + └──────────────┘ + +**/ + + @position-try --right { + inset: unset; + left: anchor(right); + } + @position-try --left { + inset: unset; + right: anchor(left); + } + @position-try --top { + inset: unset; + bottom: anchor(top); + } + @position-try --bottom { + inset: unset; + top: anchor(bottom); + } + +/* + +The IMCB for --right-sweep is the area that would be "swept" by the anchor if it +moved right, and similarly for --left-sweep, etc. + + ┌──────────────┐ + │ │ + │ │ + │ ┌────┐xxxx│ + │ │ │xxxx│ + │ └────┘xxxx│ + │ │ + │ │ + └──────────────┘ + +*/ + + @position-try --right-sweep { + inset: unset; + top: anchor(top); + bottom: anchor(bottom); + left: anchor(right); + align-self: center; + } + + @position-try --left-sweep { + inset: unset; + top: anchor(top); + bottom: anchor(bottom); + right: anchor(left); + align-self: center; + } + + @position-try --bottom-sweep { + left: anchor(left); + right: anchor(right); + top: anchor(bottom); + justify-self: center; + } + + @position-try --top-sweep { + left: anchor(left); + right: anchor(right); + bottom: anchor(top); + justify-self: center; + } + +</style> +<style id=style> +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Test that an element with the specified `position_try` gets the same +// position as a reference element with `position_try_expected`. +function test_order(position_try, position_try_expected) { + test((t) => { + style.textContent = ` + #target { + position-try: ${position_try}; + } + #ref { + position-try: ${position_try_expected}; + } + `; + assert_true(CSS.supports('position-try', 'normal --x')); + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${position_try} | ${position_try_expected}`); +} + +// Note: --right, --left, --top, and --bottom all fit, but have different +// inset-modifed containing blocks. +test_order('--right', '--right'); +test_order('--left', '--left'); +test_order('--top', '--top'); +test_order('--bottom', '--bottom'); + +// position-try-order:normal just picks the first option. +test_order('--right, --left, --bottom, --top', '--right'); +test_order('normal --right, --left, --bottom, --top', '--right'); +test_order('normal --top, --left, --bottom, --right', '--top'); + +// --right and --left have the same IMCB block-size. +test_order('most-block-size --right, --left', '--right'); +test_order('most-height --right, --left', '--right'); +// --left has more inline-size than --right. +test_order('most-inline-size --right, --left', '--left'); +test_order('most-width --right, --left', '--left'); + +// --bottom and --top have the same IMCB inline-size. +test_order('most-inline-size --bottom, --top', '--bottom'); +test_order('most-width --bottom, --top', '--bottom'); +// --top has more block-size than --bottom. +test_order('most-block-size --bottom, --top', '--top'); +test_order('most-height --bottom, --top', '--top'); + +// --bottom/--top has more IMBC inline-size than --right/--left. +test_order('most-inline-size --right, --left, --bottom, --top', '--bottom'); +test_order('most-inline-size --right, --left, --top, --bottom', '--top'); + +// --right/--left has more IMBC block-size than --bottom/--top. +test_order('most-block-size --bottom, --top, --right, --left', '--right'); +test_order('most-block-size --bottom, --top, --left, --right', '--left'); + +// --left-sweep and --bottom-sweep has the same IMBC inline-size ... +test_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep'); +test_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep'); +// ... but not the same block-size. +test_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep'); +test_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep'); + +test_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep'); +test_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep'); + +test_order(`most-inline-size + --right-sweep, --left-sweep, --bottom-sweep, --top-sweep, + --right, --left, --bottom, --top + `, '--left-sweep'); + +test_order(`most-block-size + --right-sweep, --left-sweep, --bottom-sweep, --top-sweep, + --right, --left, --bottom, --top + `, '--right'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-position-anchor.html b/testing/web-platform/tests/css/css-anchor-position/position-try-position-anchor.html new file mode 100644 index 0000000000..7355c23f53 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-position-anchor.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: @position-try can set position-anchor</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/test-common.js"></script> +<style> + #cb { + position: relative; + width: 400px; + height: 400px; + } + .anchor { + width: 100px; + height: 100px; + } + #anchor-a { + anchor-name: --a; + /* Makes #anchored overflow when aligned with right edge */ + margin-left: 100px; + } + #anchor-b { + anchor-name: --b; + } + #anchored { + position: absolute; + left: anchor(right); + width: 300px; + height: 100px; + position-anchor: --a; + position-try-options: --pf; + } + @position-try --pf { + position-anchor: --b; + } +</style> +<body onload="checkLayoutForAnchorPos('#anchored')"> +<div id="cb"> + <div id="anchor-a" class="anchor"></div> + <div id="anchor-b" class="anchor"></div> + <div id="anchored" data-offset-x="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-transition-basic.html b/testing/web-platform/tests/css/css-anchor-position/position-try-transition-basic.html new file mode 100644 index 0000000000..3bb982f073 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-transition-basic.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when @position-try is applied</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 400px; + height: 250px; + border: 1px solid black; + } + #cb.shrink { + width: 300px; + } + #target { + position: absolute; + left: 300px; + width: 50px; + height: 50px; + background: skyblue; + position-try-options: --200; + } + #target.anim { + transition: left 1000s steps(2, start); + } + @position-try --200 { + left: 200px; + } +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + function cleanup() { + target.className = ''; + cb.className = ''; + } + + test((t) => { + t.add_cleanup(cleanup); + assert_equals(target.offsetLeft, 300); + cb.classList.add('shrink'); + target.classList.add('anim'); + // Now we take the --200 option: + assert_equals(target.offsetLeft, 250); + }, 'Transition when @position-try is applied'); + + test((t) => { + t.add_cleanup(cleanup); + cb.classList.add('shrink'); + assert_equals(target.offsetLeft, 200); + cb.classList.remove('shrink'); + target.classList.add('anim'); + assert_equals(target.offsetLeft, 250); + }, 'Transition when @position-try is unapplied'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-transition-flip.html b/testing/web-platform/tests/css/css-anchor-position/position-try-transition-flip.html new file mode 100644 index 0000000000..6adacadfd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-transition-flip.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition to a flipped state</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 400px; + height: 250px; + border: 1px solid black; + } + #cb.shrink { + width: 325px; + } + #anchor { + position: absolute; + width: 50px; + height: 50px; + background: coral; + left: 250px; + top: 50px; + anchor-name: --a; + } + #target { + position-anchor: --a; + position: absolute; + left: anchor(right); + top: anchor(top); + width: 50px; + height: 50px; + background: skyblue; + position-try-options: flip-start; + } + #target.anim { + transition: left 1000s steps(2, start); + } +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> +</div> +<script> + function cleanup() { + target.className = ''; + cb.className = ''; + } + + test((t) => { + t.add_cleanup(cleanup); + assert_equals(target.offsetLeft, 300); + cb.classList.add('shrink'); + target.classList.add('anim'); + assert_equals(target.offsetLeft, 275); + }, 'Transition to a flipped state'); + + test((t) => { + t.add_cleanup(cleanup); + cb.classList.add('shrink'); + assert_equals(target.offsetLeft, 250); + cb.classList.remove('shrink'); + target.classList.add('anim'); + assert_equals(target.offsetLeft, 275); + }, 'Transition to an unflipped state'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-typed-om.html b/testing/web-platform/tests/css/css-anchor-position/position-try-typed-om.html new file mode 100644 index 0000000000..76ec9411b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-typed-om.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: Effects from @position-try in CSS Typed OM</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @position-try --pt { + left: anchor(right); + top: 50px; + width: anchor-size(width); + height: 40px; + } + #cb { + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 10px; + top: 10px; + width: 20px; + height: 20px; + background: coral; + anchor-name: --a; + } + #target { + position: absolute; + background: skyblue; + position-anchor: --a; + left: 9999px; /* force overflow */ + position-try-options: --pt; + } +</style> + +<div id=cb> + <div id=anchor></div> + <div id=target></div> +</div> +<script> + function assert_unit_value(actual, expected) { + assert_true(actual instanceof CSSUnitValue); + assert_true(expected instanceof CSSUnitValue); + assert_equals(actual.value, expected.value); + assert_equals(actual.unit, expected.unit); + } + + test(() => { + assert_unit_value(target.computedStyleMap().get('left'), CSS.px(30)); + assert_unit_value(target.computedStyleMap().get('top'), CSS.px(50)); + assert_unit_value(target.computedStyleMap().get('width'), CSS.px(20)); + assert_unit_value(target.computedStyleMap().get('height'), CSS.px(40)); + }, 'Effects of position-try-options are visible in the computed values'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html new file mode 100644 index 0000000000..9d87f82b9f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + inset-area: block-end; + width: 100px; + height: 100px; + background: red; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <!-- #target1 should not be visible because it overflows the containing block. --> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div id="target" class="target" style="position-anchor: --a1;">target1</div> +</div> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.positionVisibility = 'no-overflow'; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid-ref.html new file mode 100644 index 0000000000..96b4e86551 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + .anchor { + width: 100px; + height: 100px; + background: orange; + } + .target { + width: 100px; + height: 100px; + background: green; + } +</style> + +<div class="anchor">anchor1</div> +<div class="target">target1</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 new file mode 100644 index 0000000000..bf67921639 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: anchors-valid</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-valid-ref.html"> +<style> + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: anchors-valid; + inset-area: block-end; + width: 100px; + height: 100px; + background: red; + top: 0; + left: 0; + } +</style> + +<!-- #target1 should be visible. --> +<div class="anchor" style="anchor-name: --a1;">anchor1</div> +<div id="target1" class="target" style="position-anchor: --a1; background: green">target1</div> + +<!-- #target2 should not be visible because anchor name does not exist. --> +<div id="target2" class="target" style="top: anchor(--does-not-exist bottom);">target2</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-ref.html new file mode 100644 index 0000000000..10f74d4fb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + width: 100px; + height: 100px; + background: orange; + margin-bottom: 100px; + } + + #target { + width: 100px; + height: 100px; + background: green; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> +</div> +<div id="target">target</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 0; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html new file mode 100644 index 0000000000..cea439c55f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Scrolling an anchor in to view should cause a position-visibility: anchors-visible element to appear." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-after-scroll-in-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: block-end; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + // #target should be initially visible because it is anchored to #anchor, + // which is visible. + waitForAtLeastOneFrame().then(() => { + // Scroll #anchor out of view. + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should now be invisible. + + waitForAtLeastOneFrame().then(() => { + // Scroll #anchor back into view. + scroller.scrollTop = 0; + + // #target should now be visible again. + takeScreenshot(); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out-ref.html new file mode 100644 index 0000000000..bd4fe1f09f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #spacer { + height: 200px; + } +</style> + +<div id="scroll-container"> + <div id="spacer"><div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html new file mode 100644 index 0000000000..b2e3643b07 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Scrolling an anchor out of view should cause a position-visibility: anchors-visible element to disappear." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-after-scroll-out-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + // #target should be initially visible because it is anchored to #anchor, + // which is visible. + + waitForAtLeastOneFrame().then(() => { + // Scroll #anchor so that it is out of view. + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + + // #target should now be invisible. + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor-ref.html new file mode 100644 index 0000000000..cc35e4cd1f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + #anchor { + width: 100px; + height: 200px; + background: orange; + } + #target { + width: 100px; + height: 100px; + background: green; + } +</style> + +<div id="scroll-container"> + <div id="anchor"></div> +</div> +<div id="target">target</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html new file mode 100644 index 0000000000..f8b1cc6d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility should not be affected by the visibility of a previous anchor." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-change-anchor-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + #anchor1 { + height: 200px; + anchor-name: --a1; + } + + #anchor2 { + anchor-name: --a2; + } + + #target { + position-anchor: --a2; + position-visibility: anchors-visible; + inset-area: bottom; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor1" class="anchor">anchor1</div> + <div id="anchor2" class="anchor">anchor2</div> + <div id="target">target</div> +</div> + +<script> + // #target should be initially visible because it is anchored to #anchor2, + // which is visible. + waitForAtLeastOneFrame().then(() => { + // Change #target to be anchored to #anchor1. + target.style.positionAnchor = '--a1'; + // #target should be still be visible because #anchor1 is also visible. + waitForAtLeastOneFrame().then(() => { + // Scroll #anchor2 out of view, with #anchor1 still in view. + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should still be visible because it is anchored to #anchor1, + // which is still visible. + takeScreenshot(); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility-ref.html new file mode 100644 index 0000000000..c4af73bf65 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #anchor { + width: 100px; + height: 100px; + background: orange; + } + #target { + width: 100px; + height: 100px; + background: green; + } +</style> +<div id="anchor">anchor</div> +<div id="target">target</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html new file mode 100644 index 0000000000..22a30658c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should show an element after an anchor changes from visibility: hidden to visibility: visible." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-change-css-visibility-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #container { + visibility: hidden; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="container"> + <div id="anchor">anchor</div> +</div> +<div id="target">target</div> + +<script> + // #target should be initially hidden because it is anchored to #anchor, + // which is hidden with "visibility: hidden". + + waitForAtLeastOneFrame().then(() => { + // Change #container to "visibility: visible". #target should become + // visible again, because #anchor is no longer hidden. + container.style.visibility = 'visible'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility-ref.html new file mode 100644 index 0000000000..3ac85888e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<!-- This test passes if both the anchor and anchored elements are hidden. --> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html new file mode 100644 index 0000000000..31be797798 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should hide an element with an anchor that has visibility: hidden." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-css-visibility-ref.html"> +<style> + #container { + visibility: hidden; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="container"> + <div id="anchor">anchor</div> +</div> +<div id="target">target</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container-ref.html new file mode 100644 index 0000000000..3b6532e27b --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #target { + width: 100px; + height: 100px; + background: green; + } +</style> +<div id="target">target</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html new file mode 100644 index 0000000000..7b84976fd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="position-visibility: anchors-visible should consider the visibility of the anchor relative the containing scroller, ignoring visibility in other scrollers." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-non-intervening-container-ref.html"> +<style> + #non-intervening-scroll-container { + overflow: hidden; + width: 200px; + height: 200px; + position: relative; + } + + #position-container { + position: relative; + } + + #scroll-container { + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: right; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="non-intervening-scroll-container"> + <div id="position-container"> + <div id="scroll-container"> + <!-- The anchor is not visible to the screen, but it is visible in the --> + <!-- containing block of anchor1 and target1, so the target should not --> + <!-- be hidden due to position-visibility: anchors-visible. --> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> + </div> + </div> +</div> + +<script> + const non_intervening_scroller = document.getElementById('non-intervening-scroll-container'); + non_intervening_scroller.scrollLeft = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed-ref.html new file mode 100644 index 0000000000..e24992fd5e --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<!-- This test passes if both the anchor and anchored elements are hidden. --> +<div style="height: 200vh;"></div> + +<script> + window.scrollTo(0, 100); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html new file mode 100644 index 0000000000..25665ae466 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="position-visibility: anchors-visible should work with a fixed-position anchored element." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-position-fixed-ref.html"> +<style> + #anchor { + anchor-name: --a1; + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: orange; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: fixed; + top: 0; + left: 0; + } + + #spacer { + height: 200vh; + } +</style> + +<!-- Test passes if #target is not visible, due to #anchor being off-screen. --> +<div id="anchor">anchor</div> +<div id="target">target</div> +<div id="spacer"></div> + +<script> + window.scrollTo(0, 100); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-ref.html new file mode 100644 index 0000000000..1779817380 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #spacer { + height: 200px; + } +</style> + +<div id="scroll-container"> + <div id="spacer"></div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html new file mode 100644 index 0000000000..7c0d5dc6aa --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should hide an element and stacked children with an out-of-view anchor." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-ref.html"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } + #stacking-child { + /* stacking context */ + z-index: 1; + width: 100px; + height: 100px; + background: maroon; + position: absolute; + top: 25px; + left: 25px; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target + <div id="stacking-child"></div> + </div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should not be visible because #anchor is scrolled out of view. +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.tentative.html new file mode 100644 index 0000000000..82eed0beb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.tentative.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should hide an element with an out-of-view anchor and a relpos scroller." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-ref.html"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + /* Same as position-visibility-anchors-visible.html, but with relpos here */ + position: relative; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should not be visible because #anchor is scrolled out of view. +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.tentative.html new file mode 100644 index 0000000000..85b8d897db --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.tentative.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should hide an element with an out-of-view anchor." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-ref.html"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should not be visible because #anchor is scrolled out of view. +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-ref.html new file mode 100644 index 0000000000..d6e64d0d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } +</style> + +<div id="scroll-container"> + <div class="anchor">anchor1</div> + <div style="height: 100px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-ref.html new file mode 100644 index 0000000000..b62a6d1078 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<style> + #scroll-container { + overflow: hidden scroll; + width: 400px; + height: 150px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + width: 100px; + height: 100px; + } +</style> + +<div id="scroll-container"> + <div class="anchor">anchor1</div> + <div class="anchor" style="position: relative; top: 100px">anchor2</div> + <div id="target1" class="target" style="background: green">target1</div> + <div style="height: 200px"></div> +</div> +<script> +document.getElementById('scroll-container').scrollTop = 50; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.tentative.html new file mode 100644 index 0000000000..4751faeb0d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.tentative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-scroll-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 150px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + width: 100px; + height: 100px; + } +</style> + +<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; top: anchor(bottom); background: green">target1</div> + <div id="target2" class="target" style="position-anchor: --a2; left: anchor(left); bottom: anchor(top); background: red">target2</div> + <div style="height: 300px"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.getElementById('scroll-container').scrollTop = 50; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.tentative.html new file mode 100644 index 0000000000..f748fda33e --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.tentative.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + inset-area: block-end; + width: 100px; + height: 100px; + background: red; + top: 0; + left: 0; + } + + #child { + position: absolute; + /* stacking context */ + z-index: 1; + top: -100px; + left: 100px; + width: 100px; + height: 100px; + background: maroon; + } + + #grandchild { + position: absolute; + z-index: 1; + top: 0px; + left: 100px; + width: 50px; + height: 50px; + background: pink; + } +</style> + +<div id="scroll-container"> + <!-- #target1 should not be visible because it overflows the containing block. --> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div id="target1" class="target" style="position-anchor: --a1;">target1 + <div id="child">Child + <div id="grandchild">Grand child</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html new file mode 100644 index 0000000000..39fb55b120 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + inset-area: block-end; + width: 100px; + height: 100px; + background: red; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <!-- #target1 should not be visible because it overflows the containing block. --> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div id="target1" class="target" style="position-anchor: --a1;">target1</div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible-ref.html new file mode 100644 index 0000000000..135763bf6b --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #target { + width: 100px; + height: 100px; + margin-top: 100px; + background: green; + } +</style> + +<div id="scroll-container"> + <div id="target">target</div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.tentative.html new file mode 100644 index 0000000000..c6649e5f93 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.tentative.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Removing position-visibility: anchors-visible from an invisible anchored element should cause it to become visible." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-remove-anchors-visible-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + // #target should be initially visible because it is anchored to #anchor, + // which is visible. + + // Scroll #anchor so that it is no longer visible. + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + + waitForAtLeastOneFrame().then(() => { + // Remove position-visibility: anchors-visible. #target should become + // visible again. + target.style.positionVisibility = 'initial'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow-ref.html new file mode 100644 index 0000000000..b41d2110e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + width: 100px; + height: 100px; + background: green; + } +</style> + +<div id="scroll-container"> + <div class="anchor">anchor1</div> + <div class="target">target1</div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html new file mode 100644 index 0000000000..a043917da6 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + inset-area: block-end; + width: 100px; + height: 100px; + background: green; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <!-- #target1 should not be visible because it overflows the containing block. --> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div id="target" class="target" style="position-anchor: --a1;">target1</div> +</div> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.positionVisibility = 'initial'; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-anchor-position/property-interpolations.html b/testing/web-platform/tests/css/css-anchor-position/property-interpolations.html index 878f46375b..954e5642dd 100644 --- a/testing/web-platform/tests/css/css-anchor-position/property-interpolations.html +++ b/testing/web-platform/tests/css/css-anchor-position/property-interpolations.html @@ -19,12 +19,12 @@ }); test_no_interpolation({ - property: 'anchor-default', + property: 'position-anchor', from: 'implicit', to: '--foo', }); test_no_interpolation({ - property: 'anchor-default', + property: 'position-anchor', from: '--foo', to: '--bar', }); @@ -76,15 +76,4 @@ from: 'most-width', to: 'most-height', }); - - test_no_interpolation({ - property: 'position-fallback-bounds', - from: 'normal', - to: '--foo', - }); - test_no_interpolation({ - property: 'position-fallback-bounds', - from: '--foo', - to: '--bar', - }); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html new file mode 100644 index 0000000000..39595276d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html @@ -0,0 +1,195 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, justify/align-self</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 150px; + width: 100px; + height: 50px; + background-color: coral; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + } + #ref { + background-color: seagreen; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Verify that a given try-tactic + untransformed declaration equals +// a reference element using `transformed` directly. +function test_justify_flip(try_tactic, untransformed, transformed, direction, writing_mode) { + if (direction==undefined) { + direction = 'ltr'; + } + if (writing_mode==undefined) { + writing_mode = 'horizontal-tb'; + } + test((t) => { + t.add_cleanup(() => { + document.documentElement.style = ''; + style.textContent = ''; + }); + document.documentElement.style.direction = direction; + document.documentElement.style.writingMode = writing_mode; + style.textContent = ` + @position-try --pf { + inset: 0; + ${untransformed} + } + #target { + position-try-options: --pf ${try_tactic}; + } + @position-try --ref { + inset: 0; + ${transformed} + } + #ref { + position-try-options: --ref; + } + `; + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${try_tactic}, ${untransformed}, ${transformed}, ${direction}, ${writing_mode}`); +} + +test_justify_flip( + '', + 'justify-self:start;align-self:start', + 'justify-self:start;align-self:start'); + +test_justify_flip( + 'flip-inline', + 'justify-self:start;align-self:start', + 'justify-self:end;align-self:start'); + +test_justify_flip( + 'flip-block', + 'justify-self:start;align-self:start', + 'justify-self:start;align-self:end'); + +test_justify_flip( + 'flip-block flip-inline', + 'justify-self:start;align-self:start', + 'justify-self:end;align-self:end'); + +test_justify_flip( + 'flip-start', + 'justify-self:start;align-self:end', + 'justify-self:end;align-self:start'); + +test_justify_flip( + 'flip-block flip-start', + 'justify-self:start;align-self:start', + 'justify-self:end;align-self:start'); + +test_justify_flip( + 'flip-inline flip-start', + 'justify-self:start;align-self:start', + 'justify-self:start;align-self:end'); + +test_justify_flip( + 'flip-block flip-inline flip-start', + 'justify-self:start;align-self:start', + 'justify-self:end;align-self:end'); + +// left/right are special cases, because they're supported by +// justify-self, but not align-self: + +test_justify_flip( + 'flip-inline', + 'justify-self:left;align-self:start', + 'justify-self:right;align-self:start'); + +test_justify_flip( + 'flip-start', + 'justify-self:left;align-self:end', + 'justify-self:end;align-self:self-start'); + +test_justify_flip( + 'flip-start', + 'justify-self:right;align-self:start', + 'justify-self:start;align-self:self-end'); + + +// That that all relevant computed values can be transformed: + +function test_computed_value(try_tactic, property, value, expected) { + test((t) => { + t.add_cleanup(() => { + style.textContent = ''; + }); + style.textContent = ` + @position-try --pf { + inset: 0; + ${property}:${value}; + } + #target { + position-try-options: --pf ${try_tactic}; + } + `; + assert_equals(getComputedStyle(target).getPropertyValue(property), expected); + }, `${try_tactic}, ${property}:${value}`); +} + +// No flip: +for (let property of ['justify-self', 'align-self']) { + test_computed_value('', property, 'start', 'start'); + test_computed_value('', property, 'end', 'end'); + test_computed_value('', property, 'self-start', 'self-start'); + test_computed_value('', property, 'self-end', 'self-end'); + test_computed_value('', property, 'flex-start', 'flex-start'); + test_computed_value('', property, 'flex-end', 'flex-end'); +} + +test_computed_value('flip-inline', 'justify-self', 'start', 'end'); +test_computed_value('flip-inline', 'justify-self', 'end', 'start'); +test_computed_value('flip-inline', 'justify-self', 'self-start', 'self-end'); +test_computed_value('flip-inline', 'justify-self', 'self-end', 'self-start'); +test_computed_value('flip-inline', 'justify-self', 'flex-start', 'flex-end'); +test_computed_value('flip-inline', 'justify-self', 'flex-end', 'flex-start'); +test_computed_value('flip-inline', 'justify-self', 'left', 'right'); +test_computed_value('flip-inline', 'justify-self', 'right', 'left'); + +test_computed_value('flip-block', 'align-self', 'start', 'end'); +test_computed_value('flip-block', 'align-self', 'end', 'start'); +test_computed_value('flip-block', 'align-self', 'self-start', 'self-end'); +test_computed_value('flip-block', 'align-self', 'self-end', 'self-start'); +test_computed_value('flip-block', 'align-self', 'flex-start', 'flex-end'); +test_computed_value('flip-block', 'align-self', 'flex-end', 'flex-start'); + +test_justify_flip( + 'flip-start', + 'justify-self:left;align-self:end', + 'justify-self:end;align-self:self-start', + 'ltr', + 'vertical-rl'); + +test_justify_flip( + 'flip-start', + 'justify-self:left;align-self:start', + 'justify-self:start;align-self:self-end', + 'rtl'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-anchor.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-anchor.html new file mode 100644 index 0000000000..8dc45dc6e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-anchor.html @@ -0,0 +1,260 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, anchor()</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + :root { + --anchor-left:anchor(left); + } + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 150px; + width: 60px; + height: 70px; + background-color: coral; + anchor-name: --a; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + position-anchor: --a; + } + #ref { + background-color: seagreen; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Verify that a given try-tactic + untransformed declaration equals +// a reference element using `transformed` directly. +function test_anchor_flip(try_tactic, untransformed, transformed) { + test((t) => { + style.textContent = ` + @position-try --pf { + inset: auto; + ${untransformed} + } + #target { + position-try-options: --pf ${try_tactic}; + } + @position-try --ref { + inset: auto; + ${transformed} + } + #ref { + position-try-options: --ref; + } + `; + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${try_tactic}, ${untransformed}, ${transformed}`); +} + +// These are the possible transformations between +// anchor(left/right/top/bottom): +// +// ┌───┬────┬────┬────┬────┐ +// │ - │ L │ R │ T │ B │ +// │ L │ - │ LR │ LT │ LB │ +// │ R │ RL │ - │ RT │ RB │ +// │ T │ TL │ TR │ - │ TB │ +// │ B │ BL │ BR │ BT │ - │ +// └───┴────┴────┴────┴────┘ + +// No flip, no transformation. +test_anchor_flip('', 'right:anchor(left)', 'right:anchor(left)'); + +// flip-block does not affect left-right. +test_anchor_flip('flip-block', 'right:anchor(left)', 'right:anchor(left)'); +// flip-inline does not affect left-right. +test_anchor_flip('flip-inline', 'bottom:anchor(top)', 'bottom:anchor(top)'); + +// Note that the letters represent the arguments to the anchor() functions, +// not the properties. For example, LR: anchor(left) => anchor(right). + +// LR +test_anchor_flip('flip-inline', 'right:anchor(left)', 'left:anchor(right)'); +// RL +test_anchor_flip('flip-inline', 'left:anchor(right)', 'right:anchor(left)'); + +// LT +test_anchor_flip('flip-start', 'right:anchor(left)', 'bottom:anchor(top)'); +// TL +test_anchor_flip('flip-start', 'bottom:anchor(top)', 'right:anchor(left)'); + +// LB +test_anchor_flip('flip-inline flip-start', 'right:anchor(left)', 'top:anchor(bottom)'); +// BL +test_anchor_flip('flip-start flip-inline', 'top:anchor(bottom)', 'right:anchor(left)'); + +// RT +test_anchor_flip('flip-start flip-block', 'left:anchor(right)', 'bottom:anchor(top)'); +// TR +test_anchor_flip('flip-block flip-start', 'bottom:anchor(top)', 'left:anchor(right)'); + +// RB +test_anchor_flip('flip-start', 'left:anchor(right)', 'top:anchor(bottom)'); +// BR +test_anchor_flip('flip-start', 'top:anchor(bottom)', 'left:anchor(right)'); + +// TB +test_anchor_flip('flip-block', 'bottom:anchor(top)', 'top:anchor(bottom)'); +// BT +test_anchor_flip('flip-block', 'top:anchor(bottom)', 'bottom:anchor(top)'); + +// Logical versions. +// +// These tests duplicate the above, but replace the input logical anchor() +// functions. + +// LR +test_anchor_flip('flip-inline', 'right:anchor(start)', 'left:anchor(right)'); +// RL +test_anchor_flip('flip-inline', 'left:anchor(end)', 'right:anchor(left)'); + +// LT +test_anchor_flip('flip-start', 'right:anchor(start)', 'bottom:anchor(top)'); +// TL +test_anchor_flip('flip-start', 'bottom:anchor(start)', 'right:anchor(left)'); + +// LB +test_anchor_flip('flip-inline flip-start', 'right:anchor(start)', 'top:anchor(bottom)'); +// BL +test_anchor_flip('flip-start flip-inline', 'top:anchor(end)', 'right:anchor(left)'); + +// RT +test_anchor_flip('flip-start flip-block', 'left:anchor(end)', 'bottom:anchor(top)'); +// TR +test_anchor_flip('flip-block flip-start', 'bottom:anchor(start)', 'left:anchor(right)'); + +// RB +test_anchor_flip('flip-start', 'left:anchor(end)', 'top:anchor(bottom)'); +// BR +test_anchor_flip('flip-start', 'top:anchor(end)', 'left:anchor(right)'); + +// TB +test_anchor_flip('flip-block', 'bottom:anchor(start)', 'top:anchor(bottom)'); +// BT +test_anchor_flip('flip-block', 'top:anchor(end)', 'bottom:anchor(top)'); + +// The same again, except with self-start/self-end. + +// LR +test_anchor_flip('flip-inline', 'right:anchor(self-start)', 'left:anchor(right)'); +// RL +test_anchor_flip('flip-inline', 'left:anchor(self-end)', 'right:anchor(left)'); + +// LT +test_anchor_flip('flip-start', 'right:anchor(self-start)', 'bottom:anchor(top)'); +// TL +test_anchor_flip('flip-start', 'bottom:anchor(self-start)', 'right:anchor(left)'); + +// LB +test_anchor_flip('flip-inline flip-start', 'right:anchor(self-start)', 'top:anchor(bottom)'); +// BL +test_anchor_flip('flip-start flip-inline', 'top:anchor(self-end)', 'right:anchor(left)'); + +// RT +test_anchor_flip('flip-start flip-block', 'left:anchor(self-end)', 'bottom:anchor(top)'); +// TR +test_anchor_flip('flip-block flip-start', 'bottom:anchor(self-start)', 'left:anchor(right)'); + +// RB +test_anchor_flip('flip-start', 'left:anchor(self-end)', 'top:anchor(bottom)'); +// BR +test_anchor_flip('flip-start', 'top:anchor(self-end)', 'left:anchor(right)'); + +// TB +test_anchor_flip('flip-block', 'bottom:anchor(self-start)', 'top:anchor(bottom)'); +// BT +test_anchor_flip('flip-block', 'top:anchor(self-end)', 'bottom:anchor(top)'); + + +function test_anchor_size_flip(try_tactic, flip_expected) { + test((t) => { + style.textContent = ` + @position-try --pf { + inset: auto; + width: calc(anchor-size(width) + 20px); + height: anchor-size(height); + } + #target { + position-try-options: --pf ${try_tactic}; + } + `; + + let expected_width = anchor.offsetWidth + (flip_expected ? 0 : 20); + let expected_height = anchor.offsetHeight + (flip_expected ? 20 : 0); + + assert_equals(target.offsetWidth, expected_width, 'offsetWidth'); + assert_equals(target.offsetHeight, expected_height, 'offsetHeight'); + }, try_tactic); +} + +// No flip, no transformation. +test_anchor_size_flip('', /* expect_flip */ false); + +// Note: only the cross-axis flips cause width/height to change. +// LR, TB (and their reverse versions) are in-axis, other combinations are +// cross-axis. + +// In-axis: + +// LR, RL +test_anchor_size_flip('flip-inline', /* expect_flip */ false); +// TB, BT +test_anchor_size_flip('flip-block', /* expect_flip */ false); + +// Cross-axis: + +// LT, TL, RB, BR +test_anchor_size_flip('flip-start', /* expect_flip */ true); + +// LB, BL +test_anchor_size_flip('flip-inline flip-start', /* expect_flip */ true); + +// RT, TR +test_anchor_size_flip('flip-start flip-block', /* expect_flip */ true); + + +test((t) => { + style.textContent = ` + @position-try --pf { + inset: auto; + right: var(--anchor-left); + } + #target { + position-try-options: --pf; + } + `; + // Initially positioned to the left of the anchor. + assert_equals(target.offsetLeft, 110, 'offsetLeft'); + + // Now positioned to the right of the anchor. + style.textContent += ` + #target { + position-try-options: --pf flip-inline; + } + `; + assert_equals(target.offsetLeft, 210, 'offsetLeft'); +}, 'Can transform a value post-var-substitution'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-inset-area.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-inset-area.html new file mode 100644 index 0000000000..32af18a149 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-inset-area.html @@ -0,0 +1,251 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, inset-area</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 150px; + width: 100px; + height: 50px; + background-color: coral; + } + #target { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + +function test_computed_value(try_tactic, property, value, expected, direction, writing_mode) { + if (direction==undefined) { + direction = 'ltr'; + } + if (writing_mode==undefined) { + writing_mode = 'horizontal-tb'; + } + test((t) => { + t.add_cleanup(() => { + style.textContent = ''; + document.documentElement.style = ''; + }); + document.documentElement.style.direction = direction; + document.documentElement.style.writingMode = writing_mode; + style.textContent = ` + @position-try --pf { + inset: initial; + ${property}:${value}; + } + #target { + position-try-options: --pf ${try_tactic}; + } + `; + assert_equals(getComputedStyle(target).getPropertyValue(property), expected); + }, `${try_tactic}, ${property}:${value}, ${direction} ${writing_mode}`); +} + + +// Physical: + +test_computed_value('flip-inline', 'inset-area', 'left top', 'right top'); +test_computed_value('flip-inline', 'inset-area', 'left bottom', 'right bottom'); +test_computed_value('flip-inline', 'inset-area', 'right bottom', 'left bottom'); +test_computed_value('flip-inline', 'inset-area', 'right top', 'left top'); + +test_computed_value('flip-block', 'inset-area', 'left top', 'left bottom'); +test_computed_value('flip-block', 'inset-area', 'left bottom', 'left top'); +test_computed_value('flip-block', 'inset-area', 'right bottom', 'right top'); +test_computed_value('flip-block', 'inset-area', 'right top', 'right bottom'); + +test_computed_value('flip-block flip-inline', 'inset-area', 'left top', 'right bottom'); +test_computed_value('flip-block flip-inline', 'inset-area', 'left bottom', 'right top'); +test_computed_value('flip-block flip-inline', 'inset-area', 'right bottom', 'left top'); +test_computed_value('flip-block flip-inline', 'inset-area', 'right top', 'left bottom'); + +test_computed_value('flip-start', 'inset-area', 'left top', 'left top'); +test_computed_value('flip-start', 'inset-area', 'left bottom', 'right top'); +test_computed_value('flip-start', 'inset-area', 'right bottom', 'right bottom'); +test_computed_value('flip-start', 'inset-area', 'right top', 'left bottom'); + +test_computed_value('flip-block flip-start', 'inset-area', 'left top', 'right top'); +test_computed_value('flip-block flip-start', 'inset-area', 'left bottom', 'left top'); +test_computed_value('flip-block flip-start', 'inset-area', 'right bottom', 'left bottom'); +test_computed_value('flip-block flip-start', 'inset-area', 'right top', 'right bottom'); + +test_computed_value('flip-inline flip-start', 'inset-area', 'left top', 'left bottom'); +test_computed_value('flip-inline flip-start', 'inset-area', 'left bottom', 'right bottom'); +test_computed_value('flip-inline flip-start', 'inset-area', 'right bottom', 'right top'); +test_computed_value('flip-inline flip-start', 'inset-area', 'right top', 'left top'); + +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'left top', 'right bottom'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'left bottom', 'left bottom'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'right bottom', 'left top'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'right top', 'right top'); + +// Variations: +test_computed_value('flip-block flip-inline', 'inset-area', 'span-left span-top', 'span-right span-bottom'); + +// XY: + +test_computed_value('flip-inline', 'inset-area', 'x-start y-start', 'x-end y-start'); +test_computed_value('flip-inline', 'inset-area', 'x-start y-end', 'x-end y-end'); +test_computed_value('flip-inline', 'inset-area', 'x-end y-end', 'x-start y-end'); +test_computed_value('flip-inline', 'inset-area', 'x-end y-start', 'x-start y-start'); + +test_computed_value('flip-block', 'inset-area', 'x-start y-start', 'x-start y-end'); +test_computed_value('flip-block', 'inset-area', 'x-start y-end', 'x-start y-start'); +test_computed_value('flip-block', 'inset-area', 'x-end y-end', 'x-end y-start'); +test_computed_value('flip-block', 'inset-area', 'x-end y-start', 'x-end y-end'); + +test_computed_value('flip-block flip-inline', 'inset-area', 'x-start y-start', 'x-end y-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'x-start y-end', 'x-end y-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'x-end y-end', 'x-start y-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'x-end y-start', 'x-start y-end'); + +test_computed_value('flip-start', 'inset-area', 'x-start y-start', 'x-start y-start'); +test_computed_value('flip-start', 'inset-area', 'x-start y-end', 'x-end y-start'); +test_computed_value('flip-start', 'inset-area', 'x-end y-end', 'x-end y-end'); +test_computed_value('flip-start', 'inset-area', 'x-end y-start', 'x-start y-end'); + +test_computed_value('flip-block flip-start', 'inset-area', 'x-start y-start', 'x-end y-start'); +test_computed_value('flip-block flip-start', 'inset-area', 'x-start y-end', 'x-start y-start'); +test_computed_value('flip-block flip-start', 'inset-area', 'x-end y-end', 'x-start y-end'); +test_computed_value('flip-block flip-start', 'inset-area', 'x-end y-start', 'x-end y-end'); + +test_computed_value('flip-inline flip-start', 'inset-area', 'x-start y-start', 'x-start y-end'); +test_computed_value('flip-inline flip-start', 'inset-area', 'x-start y-end', 'x-end y-end'); +test_computed_value('flip-inline flip-start', 'inset-area', 'x-end y-end', 'x-end y-start'); +test_computed_value('flip-inline flip-start', 'inset-area', 'x-end y-start', 'x-start y-start'); + +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-start y-start', 'x-end y-end'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-start y-end', 'x-start y-end'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-end y-end', 'x-start y-start'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-end y-start', 'x-end y-start'); + +// Variations: +test_computed_value('flip-block flip-inline', 'inset-area', 'span-x-start span-y-start', 'span-x-end span-y-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'x-self-start y-self-start', 'x-self-end y-self-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'span-x-self-start span-y-self-start', 'span-x-self-end span-y-self-end'); + +// Logical: + +test_computed_value('flip-inline', 'inset-area', 'block-start inline-start', 'block-start inline-end'); +test_computed_value('flip-inline', 'inset-area', 'block-end inline-start', 'block-end inline-end'); +test_computed_value('flip-inline', 'inset-area', 'block-end inline-end', 'block-end inline-start'); +test_computed_value('flip-inline', 'inset-area', 'block-start inline-end', 'block-start inline-start'); + +test_computed_value('flip-block', 'inset-area', 'block-start inline-start', 'block-end inline-start'); +test_computed_value('flip-block', 'inset-area', 'block-end inline-start', 'block-start inline-start'); +test_computed_value('flip-block', 'inset-area', 'block-end inline-end', 'block-start inline-end'); +test_computed_value('flip-block', 'inset-area', 'block-start inline-end', 'block-end inline-end'); + +test_computed_value('flip-block flip-inline', 'inset-area', 'block-start inline-start', 'block-end inline-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'block-end inline-start', 'block-start inline-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'block-end inline-end', 'block-start inline-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'block-start inline-end', 'block-end inline-start'); + +test_computed_value('flip-start', 'inset-area', 'block-start inline-start', 'block-start inline-start'); +test_computed_value('flip-start', 'inset-area', 'block-end inline-start', 'block-start inline-end'); +test_computed_value('flip-start', 'inset-area', 'block-end inline-end', 'block-end inline-end'); +test_computed_value('flip-start', 'inset-area', 'block-start inline-end', 'block-end inline-start'); + +test_computed_value('flip-block flip-start', 'inset-area', 'block-start inline-start', 'block-start inline-end'); +test_computed_value('flip-block flip-start', 'inset-area', 'block-end inline-start', 'block-start inline-start'); +test_computed_value('flip-block flip-start', 'inset-area', 'block-end inline-end', 'block-end inline-start'); +test_computed_value('flip-block flip-start', 'inset-area', 'block-start inline-end', 'block-end inline-end'); + +test_computed_value('flip-inline flip-start', 'inset-area', 'block-start inline-start', 'block-end inline-start'); +test_computed_value('flip-inline flip-start', 'inset-area', 'block-end inline-start', 'block-end inline-end'); +test_computed_value('flip-inline flip-start', 'inset-area', 'block-end inline-end', 'block-start inline-end'); +test_computed_value('flip-inline flip-start', 'inset-area', 'block-start inline-end', 'block-start inline-start'); + +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-start inline-start', 'block-end inline-end'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-end inline-start', 'block-end inline-start'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-end inline-end', 'block-start inline-start'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-start inline-end', 'block-start inline-end'); + +// Variations: +test_computed_value('flip-block flip-inline', 'inset-area', 'span-block-start span-inline-start', 'span-block-end span-inline-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'self-block-start self-inline-start', 'self-block-end self-inline-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'span-self-block-start span-self-inline-start', 'span-self-block-end span-self-inline-end'); + +// start/end + +test_computed_value('', 'inset-area', 'start end', 'start end'); + +test_computed_value('flip-block', 'inset-area', 'start end', 'end'); + +test_computed_value('flip-inline', 'inset-area', 'start end', 'start'); + +test_computed_value('flip-block flip-inline', 'inset-area', 'start end', 'end start'); + +test_computed_value('flip-start', 'inset-area', 'start', 'start'); +test_computed_value('flip-start', 'inset-area', 'end', 'end'); +test_computed_value('flip-start', 'inset-area', 'start end', 'end start'); + +test_computed_value('flip-block flip-start', 'inset-area', 'start end', 'end'); + +test_computed_value('flip-inline flip-start', 'inset-area', 'start end', 'start'); + +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'start end', 'start end'); + +// Variations: + +test_computed_value('flip-block flip-inline', 'inset-area', 'span-start span-end', 'span-end span-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'self-start self-end', 'self-end self-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'span-self-start span-self-end', 'span-self-end span-self-start'); + +// center +test_computed_value('flip-block', 'inset-area', 'left center', 'left center'); +test_computed_value('flip-block', 'inset-area', 'center top', 'center bottom'); +test_computed_value('flip-block', 'inset-area', 'center', 'center'); +test_computed_value('flip-block', 'inset-area', 'start center', 'end center'); +test_computed_value('flip-block', 'inset-area', 'center start', 'center start'); +test_computed_value('flip-inline', 'inset-area', 'center start', 'center end'); +test_computed_value('flip-start', 'inset-area', 'center start', 'start center'); + +// span-all +test_computed_value('flip-block', 'inset-area', 'left span-all', 'left'); +test_computed_value('flip-block', 'inset-area', 'span-all top', 'bottom'); +test_computed_value('flip-block', 'inset-area', 'span-all', 'span-all'); +test_computed_value('flip-block', 'inset-area', 'start span-all', 'end span-all'); +test_computed_value('flip-block', 'inset-area', 'span-all start', 'span-all start'); +test_computed_value('flip-inline', 'inset-area', 'span-all start', 'span-all end'); +test_computed_value('flip-start', 'inset-area', 'span-all start', 'start span-all'); + +// Span mix: +test_computed_value('flip-block', 'inset-area', 'left span-top', 'left span-bottom'); +test_computed_value('flip-inline', 'inset-area', 'left span-top', 'right span-top'); +test_computed_value('flip-start', 'inset-area', 'span-block-start inline-end', 'block-end span-inline-start'); + +// Writing modes: +test_computed_value('flip-block', 'inset-area', 'left top', 'right top', 'ltr', 'vertical-rl'); + +test_computed_value('', 'inset-area', 'x-start y-start', 'x-start y-start', 'rtl'); +test_computed_value('flip-block', 'inset-area', 'x-start y-start', 'x-start y-end', 'rtl'); +test_computed_value('flip-inline', 'inset-area', 'x-start y-start', 'x-end y-start', 'rtl'); +test_computed_value('flip-block', 'inset-area', 'x-end y-start', 'x-start y-start', 'ltr', 'vertical-rl'); +test_computed_value('flip-inline', 'inset-area', 'x-end y-start', 'x-end y-end', 'ltr', 'vertical-rl'); + +test_computed_value('flip-inline', 'inset-area', 'start end', 'start', 'rtl'); +test_computed_value('flip-inline', 'inset-area', 'start end', 'start', 'ltr', 'vertical-rl'); +test_computed_value('flip-block', 'inset-area', 'start end', 'end', 'rtl'); +test_computed_value('flip-block', 'inset-area', 'start end', 'end', 'ltr', 'vertical-rl'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-margin.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-margin.html new file mode 100644 index 0000000000..ab627315b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-margin.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic (margin)</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @position-try --pf { + left:10px; + top:20px; + margin: 5px 15px 25px 35px; + } + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #target { + position: absolute; + left: 99999px; /* force fallback */ + width: 30px; + height: 40px; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + function test_try_tactic(try_tactic, expected_offsets) { + target.style.positionTryOptions = `--pf ${try_tactic}`; + test(() => { + assert_equals(target.offsetLeft, expected_offsets.left, 'offsetLeft'); + assert_equals(target.offsetTop, expected_offsets.top, 'offsetTop'); + assert_equals(target.offsetWidth, expected_offsets.width, 'offsetWidth'); + assert_equals(target.offsetHeight, expected_offsets.height, 'offsetHeight'); + }, target.style.positionTryOptions); + } + + let w = 30; + let h = 40; + let cbw = 400; + let cbh = 400; + + test_try_tactic('', {left:10+35, top:20+5, width:w, height:h}); + test_try_tactic('flip-block', {left:10+35, top:cbh-h-20-5, width:w, height:h}); + test_try_tactic('flip-inline', {left:cbw-w-10-35, top:20+5, width:w, height:h}); + test_try_tactic('flip-block flip-inline', {left:cbw-w-10-35, top:cbh-h-20-5, width:w, height:h}); + test_try_tactic('flip-start', {left:20+5, top:10+35, width:h, height:w}); + test_try_tactic('flip-block flip-start', {left:cbh-h-20-5, top:10+35, width:h, height:w}); + test_try_tactic('flip-inline flip-start', {left:20+5, top:cbw-w-10-35, width:h, height:w}); + test_try_tactic('flip-block flip-inline flip-start', {left:cbh-h-20-5, top:cbw-w-10-35, width:h, height:w}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html new file mode 100644 index 0000000000..20cf0f87e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, percentage</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 150px; + width: 100px; + height: 50px; + background-color: coral; + anchor-name: --a; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + position-anchor: --a; + } + #ref { + background-color: seagreen; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Verify that a given try-tactic + untransformed declaration equals +// a reference element using `transformed` directly. +function test_anchor_flip(try_tactic, untransformed, transformed) { + test((t) => { + style.textContent = ` + @position-try --pf { + inset: auto; + ${untransformed} + } + #target { + position-try-options: --pf ${try_tactic}; + } + @position-try --ref { + inset: auto; + ${transformed} + } + #ref { + position-try-options: --ref; + } + `; + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${try_tactic}, ${untransformed}, ${transformed}`); +} + +test_anchor_flip('', 'left:anchor(0%)', 'left:anchor(left)'); +test_anchor_flip('', 'left:anchor(100%)', 'left:anchor(right)'); +test_anchor_flip('', 'left:anchor(50%)', 'left:anchor(center)'); +test_anchor_flip('', 'top:anchor(0%)', 'top:anchor(top)'); +test_anchor_flip('', 'top:anchor(100%)', 'top:anchor(bottom)'); +test_anchor_flip('', 'top:anchor(50%)', 'top:anchor(center)'); + +test_anchor_flip('flip-inline', 'left:anchor(10%)', 'right:anchor(90%)'); +test_anchor_flip('flip-inline', 'left:anchor(calc(10% + 20%))', 'right:anchor(70%)'); + +test_anchor_flip('flip-block', 'left:anchor(0%)', 'left:anchor(0%)'); +test_anchor_flip('flip-block', 'left:anchor(100%)', 'left:anchor(100%)'); +test_anchor_flip('flip-block', 'top:anchor(0%)', 'bottom:anchor(100%)'); +test_anchor_flip('flip-block', 'top:anchor(100%)', 'bottom:anchor(0%)'); + +test_anchor_flip('flip-inline', 'left:anchor(0%)', 'right:anchor(100%)'); +test_anchor_flip('flip-inline', 'left:anchor(100%)', 'right:anchor(0%)'); +test_anchor_flip('flip-inline', 'top:anchor(0%)', 'top:anchor(0%)'); +test_anchor_flip('flip-inline', 'top:anchor(100%)', 'top:anchor(100%)'); + +test_anchor_flip('flip-block flip-inline', 'left:anchor(0%)', 'right:anchor(100%)'); +test_anchor_flip('flip-block flip-inline', 'left:anchor(100%)', 'right:anchor(0%)'); +test_anchor_flip('flip-block flip-inline', 'top:anchor(0%)', 'bottom:anchor(100%)'); +test_anchor_flip('flip-block flip-inline', 'top:anchor(100%)', 'bottom:anchor(0%)'); + +test_anchor_flip('flip-start', 'left:anchor(0%)', 'top:anchor(0%)'); +test_anchor_flip('flip-start', 'left:anchor(100%)', 'top:anchor(100%)'); +test_anchor_flip('flip-start', 'bottom:anchor(0%)', 'right:anchor(0%)'); +test_anchor_flip('flip-start', 'bottom:anchor(100%)', 'right:anchor(100%)'); + +test_anchor_flip('flip-block flip-start', 'left:anchor(0%)', 'top:anchor(0%)'); +test_anchor_flip('flip-block flip-start', 'left:anchor(100%)', 'top:anchor(100%)'); +test_anchor_flip('flip-block flip-start', 'bottom:anchor(0%)', 'left:anchor(100%)'); +test_anchor_flip('flip-block flip-start', 'bottom:anchor(100%)', 'left:anchor(0%)'); + +test_anchor_flip('flip-inline flip-start', 'left:anchor(0%)', 'bottom:anchor(100%)'); +test_anchor_flip('flip-inline flip-start', 'left:anchor(100%)', 'bottom:anchor(0%)'); +test_anchor_flip('flip-inline flip-start', 'bottom:anchor(0%)', 'right:anchor(0%)'); +test_anchor_flip('flip-inline flip-start', 'bottom:anchor(100%)', 'right:anchor(100%)'); + +test_anchor_flip('flip-block flip-inline flip-start', 'left:anchor(0%)', 'bottom:anchor(100%)'); +test_anchor_flip('flip-block flip-inline flip-start', 'left:anchor(100%)', 'bottom:anchor(0%)'); +test_anchor_flip('flip-block flip-inline flip-start', 'bottom:anchor(0%)', 'left:anchor(100%)'); +test_anchor_flip('flip-block flip-inline flip-start', 'bottom:anchor(100%)', 'left:anchor(0%)'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-wm.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-wm.html new file mode 100644 index 0000000000..bc1c82c35d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-wm.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic under different writing modes</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @position-try --pf { + left:10px; + top:20px; + } + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #target { + position: absolute; + left: 99999px; /* force fallback */ + width: 30px; + height: 40px; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + + function test_try_tactic_wm(try_tactic, writing_mode, direction, expected_offsets) { + target.style.positionTryOptions = `--pf ${try_tactic}`; + target.style.writingMode = writing_mode; + target.style.direction = direction; + test(() => { + assert_equals(target.offsetLeft, expected_offsets.left, 'offsetLeft'); + assert_equals(target.offsetTop, expected_offsets.top, 'offsetTop'); + assert_equals(target.offsetWidth, expected_offsets.width, 'offsetWidth'); + assert_equals(target.offsetHeight, expected_offsets.height, 'offsetHeight'); + }, `${try_tactic} ${writing_mode} ${direction}`); + } + + test_try_tactic_wm('', 'horizontal-tb', 'ltr', {left:10, top:20, width:30, height:40}); + + // Effectively flips left:10px to right:10px: + test_try_tactic_wm('flip-inline', 'horizontal-tb', 'ltr', {left:360, top:20, width:30, height:40}); + + // Effectively flips top:20px to bottom:20px: + test_try_tactic_wm('flip-inline', 'vertical-lr', 'ltr', {left:10, top:340, width:30, height:40}); + + // Mirror across the [left,top]=>[bottom,right] diagonal: + test_try_tactic_wm('flip-start', 'horizontal-tb', 'ltr', {left:20, top:10, width:40, height:30}); + + // Mirror across the [right,top]=>[bottom,left] diagonal: + test_try_tactic_wm('flip-start', 'horizontal-tb', 'rtl', {left:340, top:360, width:40, height:30}); + +</script> |