[css-anchor-position] Allowed properties in @position-try
Align with currently listed properties in the specification
Bug: 329584105
Change-Id: I7f82e16a5412b04b09b497480ec223cb6af39044
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5376491
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1274222}
diff --git a/css/css-anchor-position/at-position-try-allowed-declarations.html b/css/css-anchor-position/at-position-try-allowed-declarations.html
index 622e982..5586000 100644
--- a/css/css-anchor-position/at-position-try-allowed-declarations.html
+++ b/css/css-anchor-position/at-position-try-allowed-declarations.html
@@ -74,12 +74,12 @@
test_allowed_declaration('max-inline-size');
// Box alignment properties are allowed
-test_allowed_declaration('justify-content', 'normal');
-test_allowed_declaration('align-content', 'normal');
-test_allowed_declaration('justify-items', 'normal');
-test_allowed_declaration('align-items', 'normal');
test_allowed_declaration('justify-self', 'normal');
test_allowed_declaration('align-self', 'normal');
+test_allowed_declaration('place-self', 'normal');
+
+// The 'position-anchor' property is allowed
+test_allowed_declaration('position-anchor', '--anchor');
// Custom properties are disallowed
test_disallowed_declaration('--custom');
@@ -91,6 +91,10 @@
test_disallowed_declaration('display');
test_disallowed_declaration('position');
test_disallowed_declaration('float');
+test_disallowed_declaration('justify-content', 'normal');
+test_disallowed_declaration('align-content', 'normal');
+test_disallowed_declaration('justify-items', 'normal');
+test_disallowed_declaration('align-items', 'normal');
// 'revert' and 'revert-layer' are disallowed
test_disallowed_declaration('top', 'revert');
diff --git a/css/css-anchor-position/at-position-try-cssom.html b/css/css-anchor-position/at-position-try-cssom.html
index dc248f4..91172c5 100644
--- a/css/css-anchor-position/at-position-try-cssom.html
+++ b/css/css-anchor-position/at-position-try-cssom.html
@@ -6,7 +6,7 @@
<script src="/resources/testharnessreport.js"></script>
<div id="anchor"></div>
-<div id="not-anchor"></div>
+<div id="other-anchor"></div>
<div id="target"></div>
<script>
@@ -32,11 +32,11 @@
test(t => {
const style = createStyle(t, `
@position-try --pf { top: anchor(top); left: 0; }
- #anchor, #not-anchor, #target {
+ #anchor, #other-anchor, #target {
position: absolute; width: 100px; height: 100px;
}
#anchor { top: 100px; left: 0; anchor-name: --a; }
- #not-anchor { top: 200px; left: 0; anchor-name: --b; }
+ #other-anchor { top: 200px; left: 0; anchor-name: --b; }
#target { position-try-options: --pf; position-anchor: --a; left: 999999px; }
`);
const positionTryRule = style.sheet.cssRules[0];
@@ -50,12 +50,17 @@
assert_equals(target.getBoundingClientRect().left, 100);
assert_equals(target.getBoundingClientRect().top, 100);
- // These properties are disallowed in `@position-try` rule, and hence should not affect
+ // This property are disallowed in `@position-try` rule, and hence should not affect
// position fallback.
- positionTryRule.style.setProperty('position-anchor', '--b');
positionTryRule.style.setProperty('position', 'static');
assert_equals(target.getBoundingClientRect().left, 100);
assert_equals(target.getBoundingClientRect().top, 100);
+
+ // `position-anchor` is an allowed property in `@position-try` and should affect position fallback.
+ positionTryRule.style.setProperty('position-anchor', '--b');
+ assert_equals(target.getBoundingClientRect().left, 100);
+ assert_equals(target.getBoundingClientRect().top, 200);
+
}, 'CSSPositionTryRule.style.setProperty setting allowed and disallowed properties');
</script>
