diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position')
68 files changed, 1844 insertions, 759 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-default-001.html index 8bb59851ee..1700a84aa8 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-default-001.html @@ -13,16 +13,15 @@ .target { position: fixed; background: lime; - position-fallback: --pf; + position-try-options: --pf; + left: 999999px; /* force fallback */ } -@position-fallback --pf { - @try { - top: anchor(bottom, 0px); - left: anchor(left, 0px); - width: anchor-size(width, 0px); - height: anchor-size(height, 0px); - } +@position-try --pf { + top: anchor(bottom, 0px); + left: anchor(left, 0px); + width: anchor-size(width, 0px); + height: anchor-size(height, 0px); } body { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-default-002.html index 261119e017..c0a962ad36 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-default-002.html @@ -13,16 +13,15 @@ .target { position: fixed; background: lime; - position-fallback: --pf; + position-try-options: --pf; + left: 999999px; /* force fallback */ } -@position-fallback --pf { - @try { - top: anchor(bottom, 0px); - left: anchor(left, 0px); - width: anchor-size(width, 0px); - height: anchor-size(height, 0px); - } +@position-try --pf { + top: anchor(bottom, 0px); + left: anchor(left, 0px); + width: anchor-size(width, 0px); + height: anchor-size(height, 0px); } body { 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 f9fca97654..da9ec4a145 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 @@ -28,22 +28,21 @@ body { .target { position: absolute; + left: 999999px; width: 100px; height: 100px; background: lime; - position-fallback: --pf; + position-try-options: --pf, --pf2; } -@position-fallback --pf { - @try { - top: anchor(top); - left: anchor(right); - } - - @try { - top: anchor(top); - right: anchor(left); - } +@position-try --pf { + top: anchor(top); + left: anchor(right); +} +@position-try --pf2 { + top: anchor(top); + right: anchor(left); + left: auto; } #anchor1 { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-non-oof-inherit.html b/testing/web-platform/tests/css/css-anchor-position/anchor-non-oof-inherit.html deleted file mode 100644 index 75f98a1ebf..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-non-oof-inherit.html +++ /dev/null @@ -1,117 +0,0 @@ -<!DOCTYPE html> -<title>Tests that anchor functions can be inherited from in-flow elements</title> -<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> -<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1382151"> -<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> -.cb { - width: 200px; - height: 200px; - transform: scale(1); -} - -.anchor { - width: 100px; - height: 100px; - top: 50px; - left: 50px; - position: relative; - background: red; - anchor-name: --a; -} - -.target { - position: absolute; - background: green; - top: inherit; - bottom: inherit; - left: inherit; - right: inherit; - width: inherit; - min-width: inherit; - max-width: inherit; - height: inherit; - min-height: inherit; - max-height: inherit; -} - -.inset-parent { - top: anchor(--a top); - bottom: anchor(--a bottom); - left: anchor(--a left); - right: anchor(--a right); -} - -.size-parent { - width: anchor-size(--a width); - height: anchor-size(--a height); - top: 50px; - left: 50px; -} - -.min-size-parent { - min-width: anchor-size(--a width); - min-height: anchor-size(--a height); - top: 50px; - left: 50px; - bottom: 200px; - right: 200px; -} - -.max-size-parent { - max-width: anchor-size(--a width); - max-height: anchor-size(--a height); - top: 50px; - left: 50px; - bottom: 0px; - right: 0px; -} - -</style> - -<body onload="checkLayoutForAnchorPos('.target')"> - -<p>In each test case, we should see a filled green square with no red.</p> - -<div class=cb> - <div class="anchor"></div> - <div class="inset-parent"> - <div class="target" - data-offset-x=50 data-offset-y=50 - data-expected-width=100 data-expected-height=100></div> - </div> -</div> - -<div class=cb> - <div class="anchor"></div> - <div class="size-parent"> - <div class="target" - data-offset-x=50 data-offset-y=50 - data-expected-width=100 data-expected-height=100></div> - </div> -</div> - -<div class=cb> - <div class="anchor"></div> - <div class="min-size-parent"> - <div class="target" - data-offset-x=50 data-offset-y=50 - data-expected-width=100 data-expected-height=100></div> - </div> -</div> - -<div class=cb> - <div class="anchor"></div> - <div class="max-size-parent"> - <div class="target" - data-offset-x=50 data-offset-y=50 - data-expected-width=100 data-expected-height=100></div> - </div> -</div> - -</body> 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 new file mode 100644 index 0000000000..8efbeb09e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>Tests circular anchor relasionship</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-position-circular-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#anchored1 { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: orange; + anchor-name: --a2; +} + +#anchored2 { + position: absolute; + anchor-default: --a2; + left: anchor(--a2 left); + top: anchor(--a2 bottom); + background: green; + anchor-name: --a1; +} + +</style> + +<div id="anchored1"></div> +<div id="anchored2"></div> 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 new file mode 100644 index 0000000000..60ad128022 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to another anchored element</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-chained-001.tentative-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; +} + +#anchor { + anchor-name: --a1; + height: 20px; + background: orange; +} + +#anchored1 { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: green; + anchor-name: --a2; +} + +#anchored2 { + position: absolute; + anchor-default: --a2; + left: anchor(--a2 left); + top: anchor(--a2 bottom); + background: lime; +} + +</style> + +<div id="scroller"> + <div style="height: 230px"></div> + <div id="anchor"></div> + <div style="height: 230px"></div> +</div> +<div id="anchored1"></div> +<div id="anchored2"></div> + +<script> +scroller.scrollTop = 200; +</script> 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 new file mode 100644 index 0000000000..e180c56468 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to another anchored element</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-chained-002.tentative-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller1 { + width: 200px; + height: 200px; + position: relative; +} + +#scroller1,#scroller2 { + overflow: scroll; +} + +#anchor { + anchor-name: --a1; + height: 20px; + background: orange; +} + +#anchored1 { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: green; + anchor-name: --a2; +} + +#anchored2 { + position: absolute; + anchor-default: --a2; + left: anchor(--a2 left); + top: anchor(--a2 bottom); + background: lime; +} + +</style> + +<div id="scroller1"> + <div style="height: 100px"></div> + <div id="scroller2"> + <div style="height: 230px"></div> + <div id="anchor"></div> + <div style="height: 230px"></div> + </div> + <div style="height: 100px"></div> + <div id="anchored1"></div> +</div> +<div id="anchored2"></div> + +<script> +scroller1.scrollTop = 80; +scroller2.scrollTop = 200; +</script> 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 new file mode 100644 index 0000000000..8912fcb699 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to another anchored element</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-chained-002.tentative-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller1 { + width: 200px; + height: 200px; + position: relative; +} + +#scroller1,#scroller2 { + overflow: scroll; +} + +#anchor { + anchor-name: --a1; + height: 20px; + background: orange; +} + +#anchored1 { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: green; + anchor-name: --a2; + z-index: 1; +} + +#anchored2 { + position: absolute; + anchor-default: --a2; + left: anchor(--a2 left); + top: anchor(--a2 bottom); + background: lime; + z-index: 1; +} + +</style> + +<div id="anchored2"></div> +<div id="scroller1"> + <div id="anchored1"></div> + <div style="height: 100px"></div> + <div id="scroller2"> + <div style="height: 230px"></div> + <div id="anchor"></div> + <div style="height: 230px"></div> + </div> + <div style="height: 100px"></div> +</div> + +<script> +scroller1.scrollTop = 80; +scroller2.scrollTop = 200; +</script> 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 new file mode 100644 index 0000000000..5834eb1f4c --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to another anchored element</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-chained-004.tentative-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller1 { + width: 200px; + height: 200px; + position: relative; +} + +#scroller1,#scroller2,#scroller3 { + overflow: scroll; +} + +#anchor1 { + anchor-name: --a1; + height: 20px; + background: orange; +} + +#anchor2 { + anchor-name: --a2; + height: 20px; + background: cyan; +} + +#anchored1 { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: green; +} + +#anchored2 { + position: absolute; + anchor-default: --a2; + left: anchor(--a2 left); + top: anchor(--a2 bottom); + background: lime; +} + +</style> + +<div id="scroller1"> + <div style="height: 100px"></div> + <div id="scroller2"> + <div style="height: 230px"></div> + <div id="anchor1"></div> + <div style="height: 230px"></div> + </div> + <div style="height: 100px"></div> + <div id="anchored1"> + <div id="scroller3"> + <div style="height: 230px"></div> + <div id="anchor2"></div> + <div style="height: 230px"></div> + </div> + </div> +</div> +<div id="anchored2"></div> + +<script> +scroller1.scrollTop = 80; +scroller2.scrollTop = 200; +scroller3.scrollTop = 200; +</script> 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 new file mode 100644 index 0000000000..4000eb54a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to another anchored element with fallback</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-chained-fallback.tentative-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; + width: 300px; + height: 300px; +} + +#anchor { + anchor-name: --a1; + background: orange; + margin: 250px 0; +} + +#anchored1 { + position: absolute; + anchor-default: --a1; + background: green; + position-try-options: --fallback; + anchor-name: --a2; + left: anchor(--a1 left); + bottom: anchor(--a1 top); +} + +#anchored2 { + position: absolute; + anchor-default: --a2; + left: anchor(--a2 left); + top: anchor(--a2 bottom); + background: lime; +} + +@position-try --fallback { + left: anchor(--a1 right); + top: anchor(--a1 top); + bottom: auto; +} + +</style> + +<div id="scroller"> + <div id="anchor"></div> +</div> +<div id="anchored1"></div> +<div id="anchored2"></div> + +<script> +scroller.scrollTop = 200; +</script> 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 new file mode 100644 index 0000000000..5b2aa2dd50 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Tests that scroll adjustments of fixed-positioned elements are applied correctly</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-fixedpos-002-ref.html"> +<style> +body { + margin: 0; + height: 2000px; +} + +div { + width: 100px; + height: 100px; +} + +#anchor { + position: fixed; + anchor-name: --a1; + margin: 300px; + background: orange; +} + +#anchored { + position: fixed; + anchor-default: --a1; + left: anchor(--a1 right); + top: anchor(--a1 top); + background: green; +} + +</style> + +<div id="anchor"></div> +<div id="anchored"></div> + +<script> +document.documentElement.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html index 04518e5019..b696ae0060 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html @@ -36,29 +36,28 @@ position: absolute; background: green; anchor-default: --a; - position-fallback: --fallback; + position-try-options: --f1, --f2; + width: 100px; height: 100px; + /* Above the anchor */ + left: anchor(--a left); + bottom: anchor(--a top); } -@position-fallback --fallback { - /* Above the anchor */ - @try { - width: 100px; height: 100px; - left: anchor(--a left); - bottom: anchor(--a top); - } +@position-try --f1 { /* Left of the anchor */ - @try { - width: 100px; height: 100px; - right: anchor(--a left); - top: anchor(--a top); - } + right: anchor(--a left); + top: anchor(--a top); + bottom: auto; + left: auto; +} + +@position-try --f2 { /* Right of the anchor */ - @try { - width: 100px; height: 100px; - left: anchor(--a right); - top: anchor(--a top); - } + left: anchor(--a right); + top: anchor(--a top); + bottom: auto; } + </style> <div id="cb"> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html index f30c35d390..3b84124705 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html @@ -33,12 +33,13 @@ body { background: green; anchor-default: --a; top: anchor(--a top); - position-fallback: --pf; + left: anchor(--a right); + position-try-options: --pf; } -@position-fallback --pf { - @try { left: anchor(--a right); } - @try { right: anchor(--a left); } +@position-try --pf { + left: auto; + right: anchor(--a left); } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html index 60bc9b919a..dd9fdc92c2 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html @@ -35,16 +35,17 @@ #anchored { position: absolute; + top: anchor(--a bottom); width: 100px; height: 100px; background: green; anchor-default: --a; - position-fallback: --pf; + position-try-options: --pf; } -@position-fallback --pf { - @try { top: anchor(--a bottom); } - @try { bottom: anchor(--a top); } +@position-try --pf { + top: auto; + bottom: anchor(--a top); } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html index 99e4f9c30d..0aab60b7a8 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html @@ -34,16 +34,23 @@ body { height: 100px; background: green; anchor-default: --a; - position-fallback: --pf; + position-try-options: --pf1, --pf2; + /* Top of the anchor */ + bottom: anchor(--a top); + left: anchor(--a left); } -@position-fallback --pf { - /* Top of the anchor */ - @try { bottom: anchor(--a top); left: anchor(--a left); } +@position-try --pf1 { /* Bottom of the anchor */ - @try { top: anchor(--a bottom); left: anchor(--a left); } + top: anchor(--a bottom); + bottom: auto; +} +@position-try --pf2 { /* Left of the anchor */ - @try { top: anchor(--a top); right: anchor(--a left); } + top: anchor(--a top); + right: anchor(--a left); + bottom: auto; + left: auto; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html index 0adfe0834d..e2dac13abd 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html @@ -34,12 +34,13 @@ body { background: green; anchor-default: --a; top: anchor(--a top); - position-fallback: --pf; + left: anchor(--a right); + position-try-options: --pf; } -@position-fallback --pf { - @try { left: anchor(--a right); } - @try { right: anchor(--a left); } +@position-try --pf { + left: auto; + right: anchor(--a left); } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html index b4a1a24de6..1f9004de54 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html @@ -29,26 +29,25 @@ body { height: 100px; background: green; anchor-default: --a; - position-fallback: --pf; + position-try: --pf1, --pf2, --pf3; + inset-block-start: anchor(--a end); + inset-inline-start: anchor(--a end); } -@position-fallback --pf { - @try { - inset-block-start: anchor(--a end); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-start: anchor(--a end); - inset-inline-end: anchor(--a start); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-end: anchor(--a start); - } +@position-try --pf1 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-start: anchor(--a end); +} +@position-try --pf2 { + inset: auto; + inset-block-start: anchor(--a end); + inset-inline-end: anchor(--a start); +} +@position-try --pf3 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-end: anchor(--a start); } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-007.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html index baa283ba94..32b7f64173 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-007.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html @@ -33,26 +33,25 @@ html { height: 100px; background: green; anchor-default: --a; - position-fallback: --pf; + position-try-options: --pf1, --pf2, --pf3; + inset-block-start: anchor(--a end); + inset-inline-start: anchor(--a end); } -@position-fallback --pf { - @try { - inset-block-start: anchor(--a end); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-start: anchor(--a end); - inset-inline-end: anchor(--a start); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-end: anchor(--a start); - } +@position-try --pf1 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-start: anchor(--a end); +} +@position-try --pf2 { + inset: auto; + inset-block-start: anchor(--a end); + inset-inline-end: anchor(--a start); +} +@position-try --pf3 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-end: anchor(--a start); } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-008.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html index ae625d5823..99f180bb46 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-008.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html @@ -34,26 +34,25 @@ html { height: 100px; background: green; anchor-default: --a; - position-fallback: --pf; + position-try-options: --pf1, --pf2, --pf3; + inset-block-start: anchor(--a end); + inset-inline-start: anchor(--a end); } -@position-fallback --pf { - @try { - inset-block-start: anchor(--a end); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-start: anchor(--a end); - inset-inline-end: anchor(--a start); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-end: anchor(--a start); - } +@position-try --pf1 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-start: anchor(--a end); +} +@position-try --pf2 { + inset: auto; + inset-block-start: anchor(--a end); + inset-inline-end: anchor(--a start); +} +@position-try --pf3 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-end: anchor(--a start); } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-009.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html index b355d476e6..0267d1987b 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-009.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html @@ -33,26 +33,25 @@ html { height: 100px; background: green; anchor-default: --a; - position-fallback: --pf; + position-try-options: --pf1, --pf2, --pf3; + inset-block-start: anchor(--a end); + inset-inline-start: anchor(--a end); } -@position-fallback --pf { - @try { - inset-block-start: anchor(--a end); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-start: anchor(--a end); - inset-inline-end: anchor(--a start); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-end: anchor(--a start); - } +@position-try --pf1 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-start: anchor(--a end); +} +@position-try --pf2 { + inset: auto; + inset-block-start: anchor(--a end); + inset-inline-end: anchor(--a start); +} +@position-try --pf3 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-end: anchor(--a start); } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-010.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html index a0dd599b3b..133649c720 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-010.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html @@ -34,26 +34,25 @@ html { height: 100px; background: green; anchor-default: --a; - position-fallback: --pf; + position-try-options: --pf1, --pf2, --pf3; + inset-block-start: anchor(--a end); + inset-inline-start: anchor(--a end); } -@position-fallback --pf { - @try { - inset-block-start: anchor(--a end); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-start: anchor(--a end); - } - @try { - inset-block-start: anchor(--a end); - inset-inline-end: anchor(--a start); - } - @try { - inset-block-end: anchor(--a start); - inset-inline-end: anchor(--a start); - } +@position-try --pf1 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-start: anchor(--a end); +} +@position-try --pf2 { + inset: auto; + inset-block-start: anchor(--a end); + inset-inline-end: anchor(--a start); +} +@position-try --pf3 { + inset: auto; + inset-block-end: anchor(--a start); + inset-inline-end: anchor(--a start); } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-011.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html index 98fa4b5f86..005a4ee728 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fallback-position-011.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html @@ -46,26 +46,25 @@ height: 100px; background: green; anchor-default: --a; - position-fallback: --pf; + position-try-options: --pf1, --pf2, --pf3; + bottom: anchor(--a top); + left: anchor(--a right); } -@position-fallback --pf { - @try { - bottom: anchor(--a top); - left: anchor(--a right); - } - @try { - top: anchor(--a bottom); - left: anchor(--a right); - } - @try { - bottom: anchor(--a top); - right: anchor(--a left); - } - @try { - top: anchor(--a bottom); - right: anchor(--a left); - } +@position-try --pf1 { + inset: auto; + top: anchor(--a bottom); + left: anchor(--a right); +} +@position-try --pf2 { + inset: auto; + bottom: anchor(--a top); + right: anchor(--a left); +} +@position-try --pf3 { + inset: auto; + top: anchor(--a bottom); + right: anchor(--a left); } </style> 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 new file mode 100644 index 0000000000..abab944751 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to a sticky-position element</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-to-sticky-001-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; +} + +#anchor { + anchor-name: --a1; + position: sticky; + top: 0; + height: 20px; + background: orange; +} + +#anchored { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: green; +} + +</style> + +<div id="scroller"> + <div style="height: 50px"></div> + <div id="anchor"></div> + <div style="height: 300px"></div> +</div> +<div id="anchored"></div> + +<script> +scroller.scrollTop = 200; +</script> 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 new file mode 100644 index 0000000000..357421ecf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to a sticky-position element</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-to-sticky-002-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; + position: relative; +} + +#anchor { + anchor-name: --a1; + position: sticky; + top: 0; + height: 20px; + background: orange; +} + +#anchored { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: green; +} + +</style> + +<!-- Anchored to sibling sticky-positioned. --> +<div id="scroller"> + <div style="height: 50px"></div> + <div id="anchor"></div> + <div style="height: 300px"></div> + <div id="anchored"></div> +</div> + +<script> +scroller.scrollTop = 200; +</script> 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 new file mode 100644 index 0000000000..0e77004491 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to a sticky-position element</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-to-sticky-001-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; +} + +#anchor { + anchor-name: --a1; + position: sticky; + top: 0; + height: 20px; + background: orange; +} + +#anchored { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: green; +} + +</style> + +<!-- Anchored to later sticky-positioned. --> +<div id="anchored"></div> +<div id="scroller"> + <div style="height: 50px"></div> + <div id="anchor"></div> + <div style="height: 300px"></div> +</div> + +<script> +scroller.scrollTop = 200; +</script> 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 new file mode 100644 index 0000000000..f7878ae8df --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>Tests scroll adjustments of element anchored to a sticky-position element</title> +<link rel="author" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="reference/anchor-scroll-to-sticky-004-ref.html"> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; +} + +.sticky { + position: sticky; + top: 0; +} + +#anchor { + anchor-name: --a1; + height: 20px; + background: orange; +} + +#anchored { + position: absolute; + anchor-default: --a1; + left: anchor(--a1 left); + top: anchor(--a1 bottom); + background: green; +} + +</style> + +<!-- Anchored to later nested sticky elements. --> +<div id="anchored"></div> +<div id="scroller"> + <div style="height: 50px"></div> + <div class="sticky"> + <div style="height: 50px"></div> + <div id="anchor" class="sticky"></div> + <div style="height: 50px"></div> + </div> + <div style="height: 300px"></div> +</div> + +<script> +scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/at-fallback-position-parse.html b/testing/web-platform/tests/css/css-anchor-position/at-fallback-position-parse.html deleted file mode 100644 index 942d9a2984..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/at-fallback-position-parse.html +++ /dev/null @@ -1,39 +0,0 @@ -<!DOCTYPE html> -<title>Tests parsing of @fallback-position rule</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> -<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> -test_valid_rule('@position-fallback --foo {\n}'); -test_valid_rule(`@position-fallback --foo { - @try { } -}`); - -// @position-fallback needs exactly one <dashed-ident> as its name -test_invalid_rule('@position-fallback {\n}'); -test_invalid_rule('@position-fallback foo {\n}'); -test_invalid_rule('@position-fallback --foo --bar {\n}'); -test_invalid_rule('@position-fallback --foo, --bar {\n}'); - -// @position-fallback accepts only @try blocks as its child rules. Other -// contents should be ignored. -test_valid_rule('@position-fallback --foo { top: 1px; }', - '@position-fallback --foo {\n}'); -test_valid_rule('@position-fallback --foo { --bar: 1px; }', - '@position-fallback --foo {\n}'); -test_valid_rule('@position-fallback --foo { @keyframes bar {} }', - '@position-fallback --foo {\n}'); -test_valid_rule('@position-fallback --foo { @font-face {} }', - '@position-fallback --foo {\n}'); -test_valid_rule('@position-fallback --foo { arbitrary garbage }', - '@position-fallback --foo {\n}'); - -// @try accepts only regular style declarations. Other contents should be -// ignored. -test_valid_rule('@position-fallback --foo { @try { @keyframes bar { } } }', - '@position-fallback --foo {\n @try { }\n}'); -test_valid_rule('@position-fallback --foo { @try { @font-face { } } }', - '@position-fallback --foo {\n @try { }\n}'); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-cssom.html b/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-cssom.html deleted file mode 100644 index df295bf2d0..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-cssom.html +++ /dev/null @@ -1,81 +0,0 @@ -<!DOCTYPE html> -<title>Tests the CSSOM interfaces of @position-fallback and @try rules</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#interfaces"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> - -<div id="anchor"></div> -<div id="not-anchor"></div> -<div id="target"></div> - -<script> -function createStyle(t, text) { - const style = document.createElement('style'); - style.textContent = text; - t.add_cleanup(() => style.remove()); - document.head.appendChild(style); - return style; -} - -test(t => { - const style = createStyle( - t, '@position-fallback --pf { @try { left: anchor(right); } }'); - const positionFallbackRule = style.sheet.cssRules[0]; - assert_true(positionFallbackRule instanceof CSSPositionFallbackRule); - assert_equals(positionFallbackRule.name, '--pf'); - assert_equals(positionFallbackRule.cssRules.length, 1); - - const tryRule = positionFallbackRule.cssRules[0]; - assert_true(tryRule instanceof CSSTryRule); - assert_true(tryRule.style instanceof CSSStyleDeclaration); - assert_equals(tryRule.style.length, 1); - assert_equals(tryRule.style.left, 'anchor(right)'); -}, 'CSSPositionFallbackRule and CSSTryRule attribute values'); - -test(t => { - const style = createStyle(t, '@position-fallback --pf {}'); - const positionFallbackRule = style.sheet.cssRules[0]; - - assert_equals(positionFallbackRule.insertRule('@try {}', 0), 0, - '@try rules can be inserted'); - assert_throws_dom('HierarchyRequestError', - () => positionFallbackRule.insertRule('#target { color: red; }', 1), - 'style rules cannot be inserted'); - assert_throws_dom('HierarchyRequestError', - () => positionFallbackRule.insertRule('@keyframes foo {}', 1), - 'other at-rules cannot be inserted'); -}, 'CSSPositionFallbackRule.insertRule can insert @try rules only'); - - -test(t => { - const style = createStyle(t, ` - @position-fallback --pf { @try { top: anchor(top); } } - #anchor, #not-anchor, #target { - position: absolute; width: 100px; height: 100px; left: 0; - } - #anchor { top: 100px; anchor-name: --a; } - #not-anchor { top: 200px; anchor-name: --b; } - #target { position-fallback: --pf; anchor-default: --a; } - `); - const positionFallbackRule = style.sheet.cssRules[0]; - const tryRule = positionFallbackRule.cssRules[0]; - - // Check the initial position fallback result - assert_equals(target.getBoundingClientRect().left, 0); - assert_equals(target.getBoundingClientRect().top, 100); - - // `left` is an allowed property in `@try` and should affect position fallback. - tryRule.style.setProperty('left', 'anchor(right)'); - assert_equals(target.getBoundingClientRect().left, 100); - assert_equals(target.getBoundingClientRect().top, 100); - - // These properties are disallowed in `@try` rule, and hence should not affect - // position fallback. - tryRule.style.setProperty('anchor-default', '--b'); - tryRule.style.setProperty('position', 'static'); - assert_equals(target.getBoundingClientRect().left, 100); - assert_equals(target.getBoundingClientRect().top, 100); -}, 'CSSTryRule.style.setProperty setting allowed and disallowed properties'); - -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/at-fallback-position-allowed-declarations.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html index cca222ac6d..622e9827b4 100644 --- a/testing/web-platform/tests/css/css-anchor-position/at-fallback-position-allowed-declarations.html +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<title>Tests which properties are allowed in @fallback-position</title> +<title>Tests which properties are allowed in @position-try</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <script src="/resources/testharness.js"></script> @@ -15,21 +15,21 @@ function test_allowed_declaration(property, value = '1px') { test(t => { t.add_cleanup(cleanup); const serialization = `${property}: ${value}`; - const rule = `@position-fallback --foo { @try { ${property}: ${value}; } }`; + const rule = `@position-try --foo { ${property}: ${value}; }`; const index = style.sheet.insertRule(rule); - const parsed = style.sheet.cssRules[index].cssRules[0]; - assert_equals(parsed.cssText, `@try { ${serialization}; }`); - }, `${property}: ${value} is allowed in @fallback-position`); + const parsed = style.sheet.cssRules[index]; + assert_equals(parsed.cssText, `@position-try --foo { ${serialization}; }`); + }, `${property}: ${value} is allowed in @position-try`); } function test_disallowed_declaration(property, value = '1px') { test(t => { t.add_cleanup(cleanup); - const rule = `@position-fallback --foo { @try { ${property}: ${value}; } }`; + const rule = `@position-try --foo { ${property}: ${value}; }`; const index = style.sheet.insertRule(rule); - const parsed = style.sheet.cssRules[index].cssRules[0]; - assert_equals(parsed.cssText, `@try { }`); - }, `${property}: ${value} is disallowed in @fallback-position`); + const parsed = style.sheet.cssRules[index]; + assert_equals(parsed.cssText, `@position-try --foo { }`); + }, `${property}: ${value} is disallowed in @position-try`); } // Inset properties are allowed 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 new file mode 100644 index 0000000000..d4a1f4fa24 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<title>Tests the CSSOM interfaces of @position-try rules</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#interfaces"> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="anchor"></div> +<div id="not-anchor"></div> +<div id="target"></div> + +<script> +function createStyle(t, text) { + const style = document.createElement('style'); + style.textContent = text; + t.add_cleanup(() => style.remove()); + document.head.appendChild(style); + return style; +} + +test(t => { + const style = createStyle( + t, '@position-try --pf { left: anchor(right); }'); + const positionTryRule = style.sheet.cssRules[0]; + assert_true(positionTryRule instanceof CSSPositionTryRule); + assert_equals(positionTryRule.name, '--pf'); + assert_true(positionTryRule.style instanceof CSSStyleDeclaration); + assert_equals(positionTryRule.style.length, 1); + assert_equals(positionTryRule.style.left, 'anchor(right)'); +}, 'CSSPositionTryRule attribute values'); + +test(t => { + const style = createStyle(t, ` + @position-try --pf { top: anchor(top); left: 0; } + #anchor, #not-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; } + `); + const positionTryRule = style.sheet.cssRules[0]; + + // Check the initial position fallback result + assert_equals(target.getBoundingClientRect().left, 0); + assert_equals(target.getBoundingClientRect().top, 100); + + // `left` is an allowed property in `@position-try` and should affect position fallback. + positionTryRule.style.setProperty('left', 'anchor(right)'); + 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 + // 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); +}, 'CSSPositionTryRule.style.setProperty setting allowed and disallowed properties'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation-shadow-dom.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation-shadow-dom.html index 066cba1dac..50e67de1ae 100644 --- a/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation-shadow-dom.html +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation-shadow-dom.html @@ -1,18 +1,20 @@ <!DOCTYPE html> -<title>CSS Anchor Positioning Test: Dynamically change @position-fallback rules in Shadow DOM</title> +<title>CSS Anchor Positioning Test: Dynamically change @position-try rules in Shadow DOM</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> body { margin: 0; } + #host { width: 200px } </style> <div id="host"> <template shadowrootmode="open"> <style> ::slotted(#slotted), :host { - position-fallback: --pf; + position-try-options: --pf; position: absolute; + left: 999999px; /* force fallback */ } </style> <slot></slot> @@ -22,24 +24,22 @@ <script> test(() => { - assert_equals(host.offsetLeft, 0); - }, "#host is initially left:auto"); + assert_equals(host.offsetLeft, 999999); + }, "#host is initially left: 999999px"); test(() => { - assert_equals(slotted.offsetLeft, 0); - }, "#slotted is initially left:auto"); + assert_equals(slotted.offsetLeft, 999999); + }, "#slotted is initially left: 999999px"); host.shadowRoot.styleSheets[0].insertRule(` - @position-fallback --pf { - @try { left: 100px; } - } + @position-try --pf { left: 100px; } `); test(() => { assert_equals(host.offsetLeft, 100); - }, "#host with inserted @position-fallback applied"); + }, "#host with inserted @position-try applied"); test(() => { assert_equals(slotted.offsetLeft, 100); - }, "#slotted with inserted @position-fallback applied"); + }, "#slotted with inserted @position-try applied"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation.html index 68a0874931..3f7c5062f2 100644 --- a/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation.html +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<title>CSS Anchor Positioning Test: Dynamically change @position-fallback rules</title> +<title>CSS Anchor Positioning Test: Dynamically change @position-try rules</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -10,17 +10,21 @@ anchor-name: --a; margin-left: 100px; width: 100px; + height: 100px; } #anchored { position: absolute; - position-fallback: --pf; + width: 100px; + height: 100px; + position-try-options: --pf; + left: 999999px; /* force fallback */ } </style> <style id="to-enable" media="print"> - @position-fallback --pf { - @try { left: anchor(--a left); } + @position-try --pf { + left: anchor(--a left); } </style> @@ -31,27 +35,27 @@ <script> test(() => { - assert_equals(anchored.offsetLeft, 0); - }, "Position-fallback initially not matching any rules"); + assert_equals(anchored.offsetLeft, 999999); + }, "position-try-options initially not matching any rules"); test(() => { document.getElementById("to-enable").media = ""; assert_equals(anchored.offsetLeft, 100); - }, "Enable @position-fallback rule stylesheet"); + }, "Enable @position-try rule stylesheet"); const sheet = document.getElementById("to-enable").sheet; test(() => { sheet.insertRule( - `@position-fallback --pf { - @try { left: anchor(--a right); } + `@position-try --pf { + left: anchor(--a right); }`, 1); assert_equals(anchored.offsetLeft, 200); - }, "Insert overriding @position-fallback rule"); + }, "Insert overriding @position-try rule"); test(() => { sheet.disabled = "true"; - assert_equals(anchored.offsetLeft, 0); - }, "Disable the @position-fallback rules"); + assert_equals(anchored.offsetLeft, 999999); + }, "Disable the @position-try rules"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-parse.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-parse.html new file mode 100644 index 0000000000..27f5c8687b --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-parse.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: parsing of @position-try rules</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> +test_valid_rule('@position-try --foo { }'); +test_valid_rule(`@position-try --foo { top: 1px; }`); + +// @position-try needs exactly one <dashed-ident> as its name +test_invalid_rule('@position-try { }'); +test_invalid_rule('@position-try foo { }'); +test_invalid_rule('@position-try --foo --bar { }'); +test_invalid_rule('@position-try --foo, --bar { }'); + +// @position-try only accepts a limited set of properties. +test_valid_rule('@position-try --foo { backround-color: green; }', + '@position-try --foo { }'); + +// @position-try accepts only regular style declarations. Other +// contents should be ignored. +test_valid_rule('@position-try --foo { @keyframes bar {} }', + '@position-try --foo { }'); +test_valid_rule('@position-try --foo { @font-face {} }', + '@position-try --foo { }'); +test_valid_rule('@position-try --foo { @media print {} }', + '@position-try --foo { }'); +test_valid_rule('@position-try --foo { & {} }', + '@position-try --foo { }'); +test_valid_rule('@position-try --foo { arbitrary garbage }', + '@position-try --foo { }'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/chrome-1512373-2-crash.html b/testing/web-platform/tests/css/css-anchor-position/chrome-1512373-2-crash.html index ac27d8c264..433609766c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/chrome-1512373-2-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/chrome-1512373-2-crash.html @@ -1,15 +1,12 @@ <!DOCTYPE html> -<title>Chrome crash bug 1512373 with @try fallback</title> +<title>Chrome crash bug 1512373 with @position-try fallback</title> <link rel="help" href="https://crbug.com/1512373"> <style> - @position-fallback --foo { - @try { - left: 0; - } - } + @position-try --foo { left: 0; } #t { position: absolute; - position-fallback: --foo; + left: 999999px; /* force fallback */ + position-try-options: --foo; } </style> <div id="t"></div> 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 d6423c164b..f0944b7faa 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 @@ -16,7 +16,9 @@ test_computed_value("position-try-options", "flip-start"); test_computed_value("position-try-options", "flip-block, flip-inline"); test_computed_value("position-try-options", "--foo, --bar"); - test_computed_value("position-try-options", "flip-start flip-inline flip-block", "flip-block flip-inline flip-start"); + 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"); 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 dfc9997e9f..303cc4d0dd 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 @@ -13,17 +13,28 @@ test_valid_value("position-try-options", "revert"); test_valid_value("position-try-options", "none"); test_valid_value("position-try-options", "flip-block"); + test_valid_value("position-try-options", "flip-block ", 'flip-block'); test_valid_value("position-try-options", "flip-start, flip-block"); test_valid_value("position-try-options", "flip-start flip-inline, flip-block"); test_valid_value("position-try-options", "flip-start, flip-start"); + test_valid_value("position-try-options", "flip-start flip-inline flip-block"); test_valid_value("position-try-options", "flip-block, --foo"); test_valid_value("position-try-options", "--bar, flip-block flip-start"); test_valid_value("position-try-options", "--foo, --bar, --baz"); + test_valid_value("position-try-options", "--bar flip-block"); + 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_invalid_value("position-try-options", "none, flip-start"); test_invalid_value("position-try-options", "flip-block flip-block"); - test_invalid_value("position-try-options", "flip-block --foo"); + test_invalid_value("position-try-options", "flip-block flip-inline flip-inline"); + test_invalid_value("position-try-options", "flip-block, flip-inline flip-inline"); + test_invalid_value("position-try-options", "--bar flip-block --foo"); test_invalid_value("position-try-options", "--foo --bar"); + test_invalid_value("position-try-options", "flip-inline --bar flip-block"); test_invalid_value("position-try-options", "-foo"); test_invalid_value("position-try-options", "foo"); + test_invalid_value("position-try-options", "flip-start 123"); + test_invalid_value("position-try-options", "--foo 123"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-parsing.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-parsing.html new file mode 100644 index 0000000000..7f50459710 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-parsing.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: Parsing of position-try shorthand</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +<script> + test_valid_value("position-try", "flip-inline"); + test_valid_value("position-try", "most-height none"); + test_valid_value("position-try", "--bar, --baz"); + test_valid_value("position-try", "most-inline-size --baz, flip-inline"); + test_valid_value("position-try", "most-block-size flip-inline flip-block, --bar, --baz"); + test_valid_value("position-try", "normal none", "none"); + test_valid_value("position-try", "most-width none"); + test_valid_value("position-try", "normal --foo", "--foo"); + + test_invalid_value("position-try", "normal --foo, most-width --bar"); + test_invalid_value("position-try", "none normal"); + test_invalid_value("position-try", "flip-block most-height"); + test_invalid_value("position-try", "most-height, flip-start"); + + test_shorthand_value("position-try", "flip-inline", { + "position-try-order": "normal", + "position-try-options": "flip-inline", + }); + test_shorthand_value("position-try", "most-width none", { + "position-try-order": "most-width", + "position-try-options": "none", + }); + test_shorthand_value("position-try", "--foo, --bar", { + "position-try-order": "normal", + "position-try-options": "--foo, --bar", + }); + test_shorthand_value("position-try", "most-inline-size --foo, flip-inline", { + "position-try-order": "most-inline-size", + "position-try-options": "--foo, flip-inline", + }); + test_shorthand_value("position-try", "most-inline-size flip-inline flip-block, --foo, --bar", { + "position-try-order": "most-inline-size", + "position-try-options": "flip-inline flip-block, --foo, --bar", + }); +</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 index 7735115e59..ebd1e78fb9 100644 --- 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 @@ -49,20 +49,22 @@ body { #target1 { anchor-default: --a1; - position-fallback: --top-then-bottom; + bottom: anchor(top); + position-try-options: --bottom; } #target2 { anchor-default: --a2; - position-fallback: --bottom-then-top; + top: anchor(bottom); + position-try-options: --top; } -@position-fallback --top-then-bottom { - @try { bottom: anchor(top); } - @try { top: anchor(bottom); } +@position-try --bottom { + bottom: auto; + top: anchor(bottom); } -@position-fallback --bottom-then-top { - @try { top: anchor(bottom); } - @try { bottom: anchor(top); } +@position-try --top { + top: auto; + bottom: anchor(top); } </style> 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 index 7bd71216e7..159484ad33 100644 --- 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 @@ -49,23 +49,25 @@ body { #target1 { anchor-default: --a1; - position-fallback: --top-then-bottom; + bottom: anchor(top); + position-try: --bottom; writing-mode: vertical-rl; } #target2 { anchor-default: --a2; - position-fallback: --bottom-then-top; + top: anchor(bottom); + position-try: --top; writing-mode: vertical-lr; direction: rtl; } -@position-fallback --top-then-bottom { - @try { bottom: anchor(top); } - @try { top: anchor(bottom); } +@position-try --bottom { + bottom: auto; + top: anchor(bottom); } -@position-fallback --bottom-then-top { - @try { top: anchor(bottom); } - @try { bottom: anchor(top); } +@position-try --top { + top: auto; + bottom: anchor(top); } </style> 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 index 0e0e243a16..9da7bf9ccd 100644 --- 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 @@ -39,26 +39,25 @@ body { background-color: lime; anchor-default: --a; position-fallback-bounds: --bounds; - position-fallback: --corners; + position-try-options: --corner1, --corner2, --corner3; + bottom: anchor(top); + right: anchor(left); } -@position-fallback --corners { - @try { - bottom: anchor(top); - right: anchor(left); - } - @try { - top: anchor(bottom); - right: anchor(left); - } - @try { - bottom: anchor(top); - left: anchor(right); - } - @try { - top: anchor(bottom); - left: anchor(right); - } +@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> 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 index ff982ea93e..eeee710e0f 100644 --- 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 @@ -57,12 +57,13 @@ body { left: anchor(left); anchor-default: --a; position-fallback-bounds: --bounds; - position-fallback: --top-then-bottom; + position-try-options: --bottom; + bottom: anchor(top); } -@position-fallback --top-then-bottom { - @try { bottom: anchor(top); } - @try { top: anchor(bottom); } +@position-try --bottom { + top: anchor(bottom); + bottom: auto; } </style> 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 index deb546a1e2..fecd4328a5 100644 --- 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 @@ -42,14 +42,15 @@ height: 100px; background: lime; left: anchor(left); + bottom: anchor(top); anchor-default: --a; - position-fallback: --top-then-bottom; + position-try-options: --bottom; position-fallback-bounds: --bounds1; } -@position-fallback --top-then-bottom { - @try { bottom: anchor(top); } - @try { top: anchor(bottom); } +@position-try --bottom { + bottom: auto; + top: anchor(bottom); } </style> 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 index 5a19c59f31..023c650cfc 100644 --- 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 @@ -36,13 +36,14 @@ body { width: 100px; height: 100px; background: lime; - position-fallback: --top-then-bottom; + position-try-options: --bottom; position-fallback-bounds: --bounds; + bottom: anchor(--a top); } -@position-fallback --top-then-bottom { - @try { bottom: anchor(--a top); } - @try { top: anchor(--a bottom); } +@position-try --bottom { + top: anchor(--a bottom); + bottom: auto; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-001.html b/testing/web-platform/tests/css/css-anchor-position/position-try-001.html index d28c71ec68..47fcbb8393 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-001.html @@ -26,39 +26,44 @@ } .target { position: absolute; - position-fallback: --fallback1; + position-try-options: --f1, --f2, --f3, --f4; width: 40px; height: 15px; margin: 5px; background: orange; + /* Position to the right of the anchor. */ + left: anchor(--a1 right); + top: anchor(--a1 top); } -@position-fallback --fallback1 { - @try { /* 1: Position to the right of the anchor. */ - left: anchor(--a1 right); - top: anchor(--a1 top); - } - @try { /* 2: Position to the left of the anchor. */ - right: anchor(--a1 left); - top: anchor(--a1 top); - } - @try { /* 3: Position to the bottom of the anchor. */ - left: anchor(--a1 left); - top: anchor(--a1 bottom); - } - @try { /* 4: Position to the top of the anchor. */ - left: anchor(--a1 left); - bottom: anchor(--a1 top); - } - @try { /* 5: Position to the left with the narrower width. */ - left: anchor(--a1 right); - top: anchor(--a1 top); - width: 35px; - height: 40px; - } +@position-try --f1 { + inset: auto; + /* Position to the left of the anchor. */ + right: anchor(--a1 left); + top: anchor(--a1 top); +} +@position-try --f2 { + inset: auto; + /* Position to the bottom of the anchor. */ + left: anchor(--a1 left); + top: anchor(--a1 bottom); +} +@position-try --f3 { + inset: auto; + /* Position to the top of the anchor. */ + left: anchor(--a1 left); + bottom: anchor(--a1 top); +} +@position-try --f4 { + inset: auto; + /* Position to the left with the narrower width. */ + left: anchor(--a1 right); + top: anchor(--a1 top); + width: 35px; + height: 40px; } </style> <body onload="checkLayoutForAnchorPos('.target')"> - <!-- If the `cb` is wider, the 1st `@try` fits. --> + <!-- If the `cb` is wider, the base style fits. --> <div class="cb" style="width: 195px"> <div class="spacer"></div> <div class="anchor1"></div> @@ -66,7 +71,7 @@ data-offset-x=150 data-offset-y=25 data-expected-width=40 data-expected-height=15></div> </div> - <!-- If the `margin-left` is wider, the 2nd `@try` fits. --> + <!-- If the `margin-left` is wider, the first `@position-try` fits. --> <div class="cb"> <div class="spacer"></div> <div class="anchor1" style="margin-left: 50px"></div> @@ -74,14 +79,14 @@ data-offset-x=5 data-offset-y=25 data-expected-width=40 data-expected-height=15></div> </div> - <!-- Without a spacer, the 3rd `@try` fits. --> + <!-- Without a spacer, the 2nd `@position-try` fits. --> <div class="cb"> <div class="anchor1"></div> <div class="target" data-offset-x=50 data-offset-y=35 data-expected-width=40 data-expected-height=15></div> </div> - <!-- With two spacers, the 4th `@try` fits. --> + <!-- With two spacers, the 3rd `@position-try` fits. --> <div class="cb"> <div class="spacer"></div> <div class="spacer"></div> @@ -90,7 +95,7 @@ data-offset-x=50 data-offset-y=20 data-expected-width=40 data-expected-height=15></div> </div> - <!-- With a spacer, the last `@try` fits. --> + <!-- With a spacer, the last `@position-try` fits. --> <div class="cb"> <div class="spacer"></div> <div class="anchor1"></div> @@ -98,12 +103,12 @@ data-offset-x=150 data-offset-y=25 data-expected-width=35 data-expected-height=40></div> </div> - <!-- If the `cb` is narrower, no rules fit. The last rule is used. --> + <!-- If the `cb` is narrower, no rules fit. The base style is used. --> <div class="cb" style="width: 185px"> <div class="spacer"></div> <div class="anchor1"></div> <div class="target" data-offset-x=150 data-offset-y=25 - data-expected-width=35 data-expected-height=40></div> + data-expected-width=40 data-expected-height=15></div> </div> </body> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-002.html b/testing/web-platform/tests/css/css-anchor-position/position-try-002.html index ea6ff11479..c3d550adb1 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-002.html @@ -22,35 +22,34 @@ } .target { position: absolute; - position-fallback: --fallback; + position-try-options: --f1, --f2; width: min-content; height: 100px; background: orange; + /* 1: Position to the left of the anchor. */ + left: 0; + right: anchor(--a left); + top: anchor(--a top); } .inline-spacer { display: inline-block; width: 200px; height: 100px; } -@position-fallback --fallback { - @try { /* 1: Position to the left of the anchor. */ - left: 0; - right: anchor(--a left); - top: anchor(--a top); - } - @try { /* 2: Position to the right of the anchor. */ - left: anchor(--a right); - right: 0; - top: anchor(--a top); - } - @try { /* 3: Placeholder fallback that shouldn't be selected when the previous - ones do not overflow the available space. */ - inset: 0; - } +@position-try --f1 { + /* 2: Position to the right of the anchor. */ + left: anchor(--a right); + right: 0; + top: anchor(--a top); +} +@position-try --f2 { + /* 3: Placeholder fallback that shouldn't be selected when the previous + ones do not overflow the available space. */ + inset: 0; } </style> <body onload="checkLayoutForAnchorPos('.target')"> - <!-- The first `@try` overflows the inset-modifed containing block --> + <!-- The first base style overflows the inset-modifed containing block --> <div class="cb"> <div class="anchor1"></div> <div class="target" diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html b/testing/web-platform/tests/css/css-anchor-position/position-try-003.html index 531dc303d6..196b7b0304 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-003.html @@ -38,83 +38,79 @@ body { margin: 0; } background: lime; } -.exceeds-end { - position-fallback: --exceeds-end; -} - /* Used on a element whose block and inline axes are the same with its containing block, so that the first two positions will exceed the end edges of the IMCB, and the last position will be used. */ -@position-fallback --exceeds-end { - @try { - left: 0; - right: anchor(--a left); - width: 100px; - } - - @try { - top: 0; - bottom: anchor(--a top); - height: 100px; - } - - @try { - top: 11px; - left: 22px; - } +.exceeds-end { + position-try-options: --exceeds-end-1, --exceeds-end-2; + left: 0; + right: anchor(--a left); + width: 100px; } -.exceeds-start { - position-fallback: --exceeds-start; +@position-try --exceeds-end-1 { + inset: auto; + top: 0; + bottom: anchor(--a top); + width: auto; + height: 100px; +} + +@position-try --exceeds-end-2 { + inset: auto; + top: 11px; + left: 22px; + width: auto; + height: auto; } /* Used on a element whose block and inline axes are in the opposite directions of its containing block, so that the first two positions will exceed the start edges of the IMCB, and the last position will be used. */ -@position-fallback --exceeds-start { - @try { - bottom: 0; - top: anchor(--a bottom); - height: 100px; - } - - @try { - right: 0; - left: anchor(--a right); - width: 100px; - } - - @try { - top: 11px; - left: 22px; - } +.exceeds-start { + position-try-options: --exceeds-start-1, --exceeds-start-2; + bottom: 0; + top: anchor(--a bottom); + height: 100px; } -.exceeds-size { - position-fallback: --exceeds-size; +@position-try --exceeds-start-1 { + inset: auto; + right: 0; + left: anchor(--a right); + width: 100px; + height: auto; +} + +@position-try --exceeds-start-2 { + inset: auto; + top: 11px; + left: 22px; + height: auto; } /* Both inset sides are `auto`, but the size is too big to fit in the containing block. */ -@position-fallback --exceeds-size { - @try { - top: anchor(--a bottom); - left: auto; - right: auto; - width: 300px; - } - - @try { - left: anchor(--a right); - top: auto; - bottom: auto; - height: 300px; - } - - @try { - top: 11px; - left: 22px; - } +.exceeds-size { + position-try-options: --exceeds-size-1, --exceeds-size-2; + top: anchor(--a bottom); + left: auto; + right: auto; + width: 300px; +} + +@position-try --exceeds-size-1 { + inset: auto; + left: anchor(--a right); + width: auto; + height: 300px; +} + +@position-try --exceeds-size-2 { + inset: auto; + width: auto; + top: 11px; + left: 22px; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-004.html b/testing/web-platform/tests/css/css-anchor-position/position-try-004.html index e4dbd71866..b172f2e8bf 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-004.html @@ -33,23 +33,20 @@ body { width: 100px; height: 100px; background: lime; - position-fallback: --fallbacks; + position-try-options: --fallback; + top: anchor(--a top); + right: anchor(--a left); + margin-top: 10px; + margin-right: 10px; } -@position-fallback --fallbacks { - @try { - top: anchor(--a top); - right: anchor(--a left); - margin-top: 10px; - margin-right: 10px; - } - - @try { - bottom: anchor(--a bottom); - left: anchor(--a right); - margin-bottom: 10px; - margin-left: 10px; - } +@position-try --fallback { + inset: auto; + bottom: anchor(--a bottom); + left: anchor(--a right); + margin: 0; + margin-bottom: 10px; + margin-left: 10px; } </style> @@ -57,7 +54,7 @@ body { <div class=cb> <div class=anchor style="left: 110px"></div> - <!-- Chooses 1st @try block. --> + <!-- Chooses base style. --> <div class=target data-offset-x=0 data-expected-margin-left=0 data-expected-margin-right=10 data-expected-margin-top=10 data-expected-margin-bottom=0></div> @@ -65,7 +62,7 @@ body { <div class=cb> <div class=anchor style="right: 110px"></div> - <!-- Chooses 2nd @try block. --> + <!-- Chooses @position-try block. --> <div class=target data-offset-x=200 data-expected-margin-left=10 data-expected-margin-right=0 data-expected-margin-top=0 data-expected-margin-bottom=10></div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-cascade-layer-reorder.html b/testing/web-platform/tests/css/css-anchor-position/position-try-cascade-layer-reorder.html index ec1a64205c..4f38806f60 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-cascade-layer-reorder.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-cascade-layer-reorder.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<title>Tests that @position-fallback rules are reordered by cascade layers</title> +<title>Tests that @position-try rules are reordered by cascade layers</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering"> <link rel="author" href="mailto:xiaochengh@chromium.org"> @@ -21,7 +21,8 @@ body { margin: 0; } width: 100px; height: 100px; color: lime; - position-fallback: --fallback; + position-try-options: --fallback; + left: 999999px; /* force fallback */ } </style> @@ -46,11 +47,12 @@ function createTargetWithStyle(test, style) { test(t => { const target = createTargetWithStyle(t, ` - @position-fallback --fallback { - @try { right: anchor(--a left); } + @position-try --fallback { + left: auto; + right: anchor(--a left); } - @position-fallback --fallback { - @try { left: anchor(--a right); } + @position-try --fallback { + left: anchor(--a right); } `); assert_equals(target.offsetLeft, 300); @@ -58,12 +60,14 @@ test(t => { test(t => { const target = createTargetWithStyle(t, ` - @position-fallback --fallback { - @try { bottom: anchor(--a top); } + @position-try --fallback { + left: auto; + bottom: anchor(--a top); } @layer { - @position-fallback --fallback { - @try { top: anchor(--a bottom); } + @position-try --fallback { + left: auto; + top: anchor(--a bottom); } } `); diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-container-query.html b/testing/web-platform/tests/css/css-anchor-position/position-try-container-query.html index b4ef806206..528217c917 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-container-query.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-container-query.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<title>@position-fallback with container query responding to fallback widths</title> +<title>@position-try with container query responding to fallback widths</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -13,20 +13,18 @@ #target1 { container-type: inline-size; container-name: target1; - position-fallback: --fallback1; + position-try-options: --fallback1; background: green; position: absolute; top: 0px; - left: 100px; + left: 999999px; /* force fallback */ width: 100px; height: 100px; } - @position-fallback --fallback1 { - @try { - top: 100px; - left: 0px; - width: 150px; - } + @position-try --fallback1 { + top: 100px; + left: 0px; + width: 150px; } @container (width > 100px) { #inner1 { @@ -39,24 +37,22 @@ #target2 { container-type: inline-size; container-name: target2; - position-fallback: --fallback2; + position-try-options: --fallback2, --fallback3; background: orange; position: absolute; top: 0px; - left: 100px; + left: 999999px; /* force fallback */ width: 100px; } - @position-fallback --fallback2 { - @try { - top: 100px; - left: 0px; - width: 150px; - } - @try { - top: 0px; - left: 0px; - width: 150px; - } + @position-try --fallback2 { + top: 100px; + left: 0px; + width: 150px; + } + @position-try --fallback3 { + top: 0px; + left: 0px; + width: 150px; } @container target2 (width = 150px) { #inner2 { diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-custom-property.html b/testing/web-platform/tests/css/css-anchor-position/position-try-custom-property.html index edb7efc7ed..69ca0d12f4 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-custom-property.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-custom-property.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<title>Variable substitution in @try rules</title> +<title>Variable substitution in @position-try rules</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> @@ -26,7 +26,7 @@ } .target { position: absolute; - position-fallback: --fallback1; + position-try-options: --fallback1; width: 40px; height: 15px; margin: 5px; @@ -35,22 +35,19 @@ --top: anchor(--a1 top); } .fallback1 { - position-fallback: --fallback1; + position-try-options: --fallback1; } .fallback2 { - position-fallback: --fallback2; + position-try-options: --fallback2; } -@position-fallback --fallback1 { - @try { /* Position to the right of the anchor. */ - left: var(--left); - top: var(--top); - } +@position-try --fallback1 { + /* Position to the right of the anchor. */ + left: var(--left); + top: var(--top); } /* Same as above, but using a shorthand. */ -@position-fallback --fallback2 { - @try { - inset: var(--top) 0px 0px var(--left); - } +@position-try --fallback2 { + inset: var(--top) 0px 0px var(--left); } </style> <body onload="checkLayoutForAnchorPos('.target')"> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-dynamic.html b/testing/web-platform/tests/css/css-anchor-position/position-try-dynamic.html index f6d8210427..fad3db62a3 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-dynamic.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-dynamic.html @@ -1,15 +1,13 @@ <!DOCTYPE html> -<title>CSS Anchor Positioning Test: Dynamically change position via position-fallback property</title> +<title>CSS Anchor Positioning Test: Dynamically change position via position-try-options property</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> <style> body { margin: 0; } - @position-fallback --fallback1 { - @try { - left: anchor(--a1 right); - } + @position-try --fallback1 { + left: anchor(--a1 right); } #anchor { anchor-name: --a1; @@ -18,6 +16,7 @@ } #anchored { position: absolute; + left: 999999px; /* Force fallback */ width: 100px; height: 100px; } @@ -26,11 +25,11 @@ <div id="anchored"></div> <script> test(() => { - assert_equals(anchored.offsetLeft, 0); + assert_equals(anchored.offsetLeft, 999999); }, "Initial static left position is 0"); test(() => { - anchored.style.positionFallback = "--fallback1"; + anchored.style.positionTryOptions = "--fallback1"; assert_equals(anchored.offsetLeft, 100); - }, "Left position set to right edge of anchor with @position-fallback"); + }, "Left position set to right edge of anchor with @position-try"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-grid-001.html b/testing/web-platform/tests/css/css-anchor-position/position-try-grid-001.html index abe80bf51e..87a30e26ec 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-grid-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-grid-001.html @@ -33,33 +33,36 @@ grid-column: 2 / 4; grid-row: 2 / 4; position: absolute; - position-fallback: --fallback1; + position-try-options: --f1, --f2, --f3; width: 100px; height: 100px; background: lime; opacity: .2; -} -@position-fallback --fallback1 { - @try { /* Position to the left of the anchor. */ - right: anchor(--a1 left); - top: anchor(--a1 top); - } - @try { /* Position to the right of the anchor with the wider width than CB. */ - left: anchor(--a1 right); - top: anchor(--a1 top); - width: 250px; - } - @try { /* Position to the right of the anchor. This entry should succeed. */ - left: anchor(--a1 right); - top: anchor(--a1 top); - } - @try { /* Zero-sized, the last entry wins if none succeeded. */ - left: 0; - top: 0; - width: 0; - height: 0; + /* Position to the left of the anchor. */ + right: anchor(--a1 left); + top: anchor(--a1 top); } } +@position-try --f1 { + inset: auto; + left: anchor(--a1 right); + top: anchor(--a1 top); + width: 250px; +} +@position-try --f2 { + /* Position to the right of the anchor. This entry should succeed. */ + inset: auto; + left: anchor(--a1 right); + top: anchor(--a1 top); +} +@position-try --f3 { + /* Zero-sized, the last entry wins if none succeeded. */ + inset: auto; + left: 0; + top: 0; + width: 0; + height: 0; +} </style> <body onload="checkLayoutForAnchorPos('.target')"> <div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-pseudo-element.html b/testing/web-platform/tests/css/css-anchor-position/position-try-pseudo-element.html index e2f95b9a24..5895f2a407 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-pseudo-element.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-pseudo-element.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<title>@position-fallback for ::before and ::after pseudo elements</title> +<title>@position-try for ::before and ::after pseudo elements</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -9,9 +9,10 @@ position: relative; width: 195px; height: 200px; + left: 999999px; /* force fallback */ } #target::before { - position-fallback: --fallback; + position-try-options: --f1, --f2; background: lime; position: absolute; left: 200px; @@ -21,7 +22,7 @@ content: ""; } #target::after { - position-fallback: --fallback; + position-try-options: --f1, --f2; background: green; position: absolute; left: 100px; @@ -29,15 +30,13 @@ height: 100px; content: ""; } - @position-fallback --fallback { - @try { - top: 100px; - left: 50px; - } - @try { - top: 0px; - left: 0px; - } + @position-try --f1 { + top: 100px; + left: 50px; + } + @position-try --f2 { + top: 0px; + left: 0px; } </style> <div id="container"> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-tree-scoped.html b/testing/web-platform/tests/css/css-anchor-position/position-try-tree-scoped.html index 2650a32f60..d0c94fd679 100644 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-tree-scoped.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-tree-scoped.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<title>CSS Anchor Positioning Test: @position-fallback - tree scoped names</title> +<title>CSS Anchor Positioning Test: @position-try - tree scoped names</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> <link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> <script src="/resources/testharness.js"></script> @@ -8,17 +8,19 @@ <style> body { margin: 0; } - @position-fallback --doc { - @try { - left: 100px; - } + @position-try --doc { + left: 100px; } - .abs { position: absolute; } + .abs { + width: 100px; + position: absolute; + left: 999999px; /* force fallback */ + } - #doc_pf_doc { position-fallback: --doc; } - #doc_pf_outer { position-fallback: --outer; } - #doc_pf_inner { position-fallback: --inner; } + #doc_pf_doc { position-try-options: --doc; } + #doc_pf_outer { position-try-options: --outer; } + #doc_pf_inner { position-options: --inner; } </style> <div id="doc_pf_doc" class="abs"></div> @@ -27,17 +29,18 @@ <div id="outer_host"> <template shadowrootmode="open"> <style> - @position-fallback --outer { - @try { - left: 200px; - } + @position-try --outer { + left: 200px; } - .abs { position: absolute; } + .abs { + position: absolute; + left: 999999px; /* force fallback */ + } - #outer_pf_doc { position-fallback: --doc; } - #outer_pf_outer { position-fallback: --outer; } - #outer_pf_inner { position-fallback: --inner; } + #outer_pf_doc { position-try-options: --doc; } + #outer_pf_outer { position-try-options: --outer; } + #outer_pf_inner { position-try-options: --inner; } </style> <div id="outer_pf_doc" class="abs"></div> <div id="outer_pf_outer" class="abs"></div> @@ -45,17 +48,18 @@ <div id="inner_host"> <template shadowrootmode="open"> <style> - @position-fallback --inner { - @try { - left: 300px; - } + @position-try --inner { + left: 300px; } - .abs { position: absolute; } + .abs { + position: absolute; + left: 999999px; /* force fallback */ + } - #inner_pf_doc { position-fallback: --doc; } - #inner_pf_outer { position-fallback: --outer; } - #inner_pf_inner { position-fallback: --inner; } + #inner_pf_doc { position-try-options: --doc; } + #inner_pf_outer { position-try-options: --outer; } + #inner_pf_inner { position-try-options: --inner; } </style> <div id="inner_pf_doc" class="abs"></div> <div id="inner_pf_outer" class="abs"></div> @@ -67,29 +71,30 @@ <style> - @position-fallback --host-slot-part { - @try { - left: 1px; - } + #host_slotted_part { + width: 100px; + } + @position-try --host-slot-part { + left: 1px; } #host_slotted_part::part(part) { - position-fallback: --host-slot-part; + position-try-options: --host-slot-part; } </style> <div id="host_slotted_part"> <template shadowrootmode="open"> <style> - @position-fallback --host-slot-part { - @try { - left: 2px; - } + @position-try --host-slot-part { + left: 2px; } ::slotted(#slotted), :host { position: absolute; - position-fallback: --host-slot-part; + left: 999999px; /* force fallback */ + position-try-options: --host-slot-part; } #part { position: absolute; + left: 999999px; /* force fallback */ } </style> <div id="part" part="part"></div> @@ -102,52 +107,52 @@ <script> test(() => { assert_equals(doc_pf_doc.offsetLeft, 100); - }, "Document position-fallback matches @position-fallback in document scope"); + }, "Document position-try-options matches @position-try in document scope"); test(() => { - assert_equals(doc_pf_outer.offsetLeft, 0); - }, "Document position-fallback does not match @position-fallback in #outer_host scope"); + assert_equals(doc_pf_outer.offsetLeft, 999999); + }, "Document position-try-options does not match @position-try in #outer_host scope"); test(() => { - assert_equals(doc_pf_inner.offsetLeft, 0); - }, "Document position-fallback does not match @position-fallback in #inner_host scope"); + assert_equals(doc_pf_inner.offsetLeft, 999999); + }, "Document position-try-options does not match @position-try in #inner_host scope"); const outer_root = outer_host.shadowRoot; const inner_root = outer_root.querySelector("#inner_host").shadowRoot; test(() => { assert_equals(outer_root.querySelector("#outer_pf_doc").offsetLeft, 100); - }, "Outer position-fallback matches @position-fallback in document scope"); + }, "Outer position-try-options matches @position-try in document scope"); test(() => { assert_equals(outer_root.querySelector("#outer_pf_outer").offsetLeft, 200); - }, "Outer position-fallback matches @position-fallback in #outer_host scope"); + }, "Outer position-try-options matches @position-try in #outer_host scope"); test(() => { - assert_equals(outer_root.querySelector("#outer_pf_inner").offsetLeft, 0); - }, "Outer position-fallback does not match @position-fallback in #inner_host scope"); + assert_equals(outer_root.querySelector("#outer_pf_inner").offsetLeft, 999999); + }, "Outer position-try-options does not match @position-try in #inner_host scope"); test(() => { assert_equals(inner_root.querySelector("#inner_pf_doc").offsetLeft, 100) - }, "Inner position-fallback matches @position-fallback in document scope"); + }, "Inner position-try-options matches @position-try in document scope"); test(() => { assert_equals(inner_root.querySelector("#inner_pf_outer").offsetLeft, 200); - }, "Inner position-fallback matches @position-fallback in #outer_host scope"); + }, "Inner position-try-options matches @position-try in #outer_host scope"); test(() => { assert_equals(inner_root.querySelector("#inner_pf_inner").offsetLeft, 300); - }, "Inner position-fallback matches @position-fallback in #inner_host scope"); + }, "Inner position-try-options matches @position-try in #inner_host scope"); test(() => { assert_equals(host_slotted_part.offsetLeft, 2); - }, "@position-fallback from same scope as :host rule"); + }, "@position-try from same scope as :host rule"); test(() => { assert_equals(slotted.offsetLeft, 2); - }, "@position-fallback from same scope as ::slotted() rule"); + }, "@position-try from same scope as ::slotted() rule"); test(() => { assert_equals(host_slotted_part.shadowRoot.querySelector("#part").offsetLeft, 1); - }, "@position-fallback from same scope as ::part() rule"); + }, "@position-try from same scope as ::part() rule"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-position-circular-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-position-circular-ref.html new file mode 100644 index 0000000000..6beb7c77e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-position-circular-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 100px; +} + +#anchored1 { + position: absolute; + left: 0; + top: 0; + background: orange; +} + +#anchored2 { + position: absolute; + left: 0; + top: 100px; + background: green; +} +</style> + +<div id="anchored1"></div> +<div id="anchored2"></div> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-001.tentative-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-001.tentative-ref.html new file mode 100644 index 0000000000..fb858cc105 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-001.tentative-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; +} + +#anchor { + height: 20px; + background: orange; +} + +#anchored1 { + position: absolute; + top: 50px; + left: 0; + background: green; +} + +#anchored2 { + position: absolute; + top: 150px; + left: 0; + background: lime; +} + +</style> + +<div id="scroller"> + <div style="height: 230px"></div> + <div id="anchor"></div> + <div style="height: 230px"></div> +</div> +<div id="anchored1"></div> +<div id="anchored2"></div> + +<script> +scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-002.tentative-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-002.tentative-ref.html new file mode 100644 index 0000000000..9dde5d00f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-002.tentative-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller1 { + width: 200px; + height: 200px; +} + +#scroller1,#scroller2 { + overflow: scroll; +} + +#anchor { + height: 20px; + background: orange; +} + +#anchored1 { + position: absolute; + top: 70px; + background: green; +} + +#anchored2 { + position: absolute; + top: 170px; + background: lime; +} + +</style> + +<div id="scroller1"> + <div style="height: 100px"></div> + <div id="scroller2"> + <div style="height: 230px"></div> + <div id="anchor"></div> + <div style="height: 230px"></div> + </div> + <div style="height: 250px"></div> +</div> +<div id="anchored1"></div> +<div id="anchored2"></div> + +<script> +scroller1.scrollTop = 80; +scroller2.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-004.tentative-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-004.tentative-ref.html new file mode 100644 index 0000000000..22c2270dde --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-004.tentative-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; + height: 700px; +} + +div { + width: 100px; + height: 100px; +} + +#scroller1 { + width: 200px; + height: 200px; + position: relative; +} + +#scroller1,#scroller2,#scroller3 { + overflow: scroll; +} + +#anchor1 { + height: 20px; + background: orange; +} + +#anchor2 { + height: 20px; + background: cyan; +} + +#anchored1 { + position: absolute; + top: 70px; + background: green; +} + +#anchored2 { + position: absolute; + top: 120px; + background: lime; +} +</style> + +<div id="scroller1"> + <div style="height: 100px"></div> + <div id="scroller2"> + <div style="height: 230px"></div> + <div id="anchor1"></div> + <div style="height: 230px"></div> + </div> + <div style="height: 250px"></div> +</div> +<div id="anchored1"> + <div id="scroller3"> + <div style="height: 230px"></div> + <div id="anchor2"></div> + <div style="height: 230px"></div> + </div> +</div> +<div id="anchored2"></div> + +<script> +scroller1.scrollTop = 80; +scroller2.scrollTop = 200; +scroller3.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-fallback.tentative-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-fallback.tentative-ref.html new file mode 100644 index 0000000000..0933430fc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-fallback.tentative-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; + width: 300px; + height: 300px; +} + +#anchor { + background: orange; + margin: 250px 0; +} + +#anchored1 { + position: absolute; + background: green; + top: 50px; + left: 100px; +} + +#anchored2 { + position: absolute; + background: lime; + top: 150px; + left: 100px; +} +</style> + +<div id="scroller"> + <div id="anchor"></div> +</div> +<div id="anchored1"></div> +<div id="anchored2"></div> + +<script> +scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-fixedpos-002-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-fixedpos-002-ref.html new file mode 100644 index 0000000000..7bae7bfbb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-fixedpos-002-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; + height: 2000px; +} + +div { + width: 100px; + height: 100px; +} + +#anchor { + position: fixed; + left: 300px; + top: 300px; + background: orange; +} + +#anchored { + position: fixed; + left: 400px; + top: 300px; + background: green; +} + +</style> + +<div id="anchor"></div> +<div id="anchored"></div> + +<script> +document.documentElement.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-001-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-001-ref.html new file mode 100644 index 0000000000..2327b50607 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; +} + +#anchor { + height: 20px; + background: orange; +} + +#anchored { + position: absolute; + top: 20px; + left: 0; + background: green; +} + +</style> + +<div id="scroller"> + <div style="height: 200px"></div> + <div id="anchor"></div> + <div style="height: 150px"></div> +</div> +<div id="anchored"></div> + +<script> +scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-002-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-002-ref.html new file mode 100644 index 0000000000..d08d3545d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-002-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; +} + +#anchor { + height: 20px; + background: orange; +} + +#anchored { + background: green; +} + +</style> + +<div id="scroller"> + <div style="height: 200px"></div> + <div id="anchor"></div> + <div id="anchored"></div> + <div style="height: 50px"></div> +</div> + +<script> +scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-004-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-004-ref.html new file mode 100644 index 0000000000..d97b4ffc14 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-to-sticky-004-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; +} + +div { + width: 100px; + height: 100px; +} + +#scroller { + overflow: scroll; +} + +#anchor { + height: 20px; + background: orange; +} + +#anchored { + position: absolute; + top: 70px; + left: 0; + background: green; +} + +</style> + +<div id="scroller"> + <div style="height: 250px"></div> + <div id="anchor"></div> + <div style="height: 180px"></div> +</div> +<div id="anchored"></div> + +<script> +scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/sticky-anchor-position-invalid-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/sticky-anchor-position-invalid-ref.html index 3a48755874..c4a5dd3735 100644 --- a/testing/web-platform/tests/css/css-anchor-position/reference/sticky-anchor-position-invalid-ref.html +++ b/testing/web-platform/tests/css/css-anchor-position/reference/sticky-anchor-position-invalid-ref.html @@ -15,6 +15,7 @@ position: sticky; height: 150px; background: green; + top: 42px; } </style> <div id="scroll-container"> diff --git a/testing/web-platform/tests/css/css-anchor-position/sticky-anchor-position-invalid.html b/testing/web-platform/tests/css/css-anchor-position/sticky-anchor-position-invalid.html index f7c1e1a374..d1efeed5f2 100644 --- a/testing/web-platform/tests/css/css-anchor-position/sticky-anchor-position-invalid.html +++ b/testing/web-platform/tests/css/css-anchor-position/sticky-anchor-position-invalid.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <title>Anchor queries in sticky positioning is invalid</title> <link rel="author" href="mailto:xiaochengh@chromium.org"> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#queries"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#valid-anchor-function"> <link rel="match" href="reference/sticky-anchor-position-invalid-ref.html"> <style> #scroll-container { @@ -18,7 +18,7 @@ position: sticky; height: 150px; background: green; - top: anchor(--invalid top); /* should be invalid and treated as auto */ + top: anchor(--invalid top, 42px); /* Should use the fallback */ } </style> <div id="scroll-container"> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-base.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-base.html new file mode 100644 index 0000000000..b52c3d15e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-base.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, base values</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: 200px; + border: 1px solid black; + } + #target { + position: absolute; + /* Does not fit initially */ + width: 150px; + height: 300px; + border: 3px solid skyblue; + } +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + test(() => { + let cs = getComputedStyle(target); + assert_equals(cs.width, '150px'); + assert_equals(cs.height, '300px'); + + target.style.positionTryOptions = 'flip-start'; + + assert_equals(cs.width, '300px'); + assert_equals(cs.height, '150px'); + }, 'flip-start affects base values'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-basic.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-basic.html new file mode 100644 index 0000000000..472e204096 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-basic.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic</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(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); + } + + test_try_tactic('', {left:10, top:20, width:30, height:40}); + + // bottom:20px + test_try_tactic('flip-block', {left:10, top:340, width:30, height:40}); + + // right:10px + test_try_tactic('flip-inline', {left:360, top:20, width:30, height:40}); + + // right:10px; bottom:20px + test_try_tactic('flip-block flip-inline', {left:360, top:340, width:30, height:40}); + test_try_tactic('flip-inline flip-block', {left:360, top:340, width:30, height:40}); + + // left:20px; top:10px; width:40px; height:30px + test_try_tactic('flip-start', {left:20, top:10, width:40, height:30}); + test_try_tactic('flip-block flip-start flip-inline', {left:20, top:10, width:40, height:30}); + test_try_tactic('flip-inline flip-start flip-block', {left:20, top:10, width:40, height:30}); + + // left:20px; bottom:10px; width:40px; height:30px + test_try_tactic('flip-start flip-block', {left:20, top:360, width:40, height:30}); + test_try_tactic('flip-inline flip-start', {left:20, top:360, width:40, height:30}); + + // right:20px; top:10px; width:40px; height:30px + test_try_tactic('flip-start flip-inline', {left:340, top:10, width:40, height:30}); + test_try_tactic('flip-block flip-start', {left:340, top:10, width:40, height:30}); + + // right:20px; bottom:10px; width:40px; height:30px + test_try_tactic('flip-start flip-block flip-inline', {left:340, top:360, width:40, height:30}); + test_try_tactic('flip-start flip-inline flip-block', {left:340, top:360, width:40, height:30}); + test_try_tactic('flip-inline flip-block flip-start', {left:340, top:360, width:40, height:30}); + test_try_tactic('flip-block flip-inline flip-start', {left:340, top:360, width:40, height:30}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-sizing.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-sizing.html new file mode 100644 index 0000000000..432992491d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-sizing.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, sizing properties</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:50px; + top:50px; + + min-width: 1px; + min-height: 2px; + max-width: 100px; + max-height: 200px; + } + #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> + test(() => { + target.style.positionTryOptions = '--pf flip-block'; + let cs = getComputedStyle(target); + assert_equals(cs.width, '30px'); + assert_equals(cs.height, '40px'); + assert_equals(cs.minWidth, '1px'); + assert_equals(cs.minHeight, '2px'); + assert_equals(cs.maxWidth, '100px'); + assert_equals(cs.maxHeight, '200px'); + }, 'flip-block does not affect sizing'); + + test(() => { + target.style.positionTryOptions = '--pf flip-inline'; + let cs = getComputedStyle(target); + assert_equals(cs.width, '30px'); + assert_equals(cs.height, '40px'); + assert_equals(cs.minWidth, '1px'); + assert_equals(cs.minHeight, '2px'); + assert_equals(cs.maxWidth, '100px'); + assert_equals(cs.maxHeight, '200px'); + }, 'flip-inline does not affect sizing'); + + test(() => { + target.style.positionTryOptions = '--pf flip-start'; + let cs = getComputedStyle(target); + assert_equals(cs.width, '40px'); + assert_equals(cs.height, '30px'); + assert_equals(cs.minWidth, '2px'); + assert_equals(cs.minHeight, '1px'); + assert_equals(cs.maxWidth, '200px'); + assert_equals(cs.maxHeight, '100px'); + }, 'flip-start affects sizing'); +</script> |