[anchor-position] Allow multiple anchor names on the same element

This patch implements the recent CSSWG resolution to change `anchor-name` property into a comma-separated list of names: w3c/csswg-drafts#8837 (comment) Fixed: 1475812 Change-Id: I5d8abb58fa8bfc9ee5dd72a833098ae8685496c1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4811709 Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1188229}
web-platform-tests · Nov 3, 2023 · 1064685 · 1064685
1 parent faee1a6
commit 1064685
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/css/css-anchor-position/anchor-name-004.html b/css/css-anchor-position/anchor-name-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#determining">
+<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>
+.relpos {
+  position: relative;
+}
+.anchor1 {
+  anchor-name: --a1, --a2;
+  width: 30px;
+  height: 10px;
+  background: orange;
+}
+.target {
+  position: absolute;
+  height: 10px;
+  background: lime;
+}
+#target1 {
+  width: anchor-size(--a1 width);
+}
+#target2 {
+  width: anchor-size(--a2 width);
+}
+#target3 {
+  width: anchor-size(--a3 width, 11px);
+}
+</style>
+<body onload="checkLayoutForAnchorPos('.target')">
+  <!--
+    First two targets should find the same anchor via different names.
+    Third target shouldn't find the anchor, as the name is invalid.
+  -->
+  <div class="relpos">
+    <div class="anchor1" style="width: 30px"></div>
+    <div class="target" id="target1" data-expected-width=30></div>
+    <div class="target" id="target2" data-expected-width=30></div>
+    <div class="target" id="target3" data-expected-width=11></div>
+  </div>
+</body>
diff --git a/css/css-anchor-position/anchor-name-basics.html b/css/css-anchor-position/anchor-name-basics.html
@@ -14,18 +14,19 @@
 </div>
 
 <script>
-// anchor-name: none | <dashed-ident>
+// anchor-name: none | <dashed-ident>#
 test_valid_value('anchor-name', 'none');
 test_valid_value('anchor-name', '--foo');
+test_valid_value('anchor-name', '--foo, --bar')
 test_invalid_value('anchor-name', 'foo-bar');
 test_invalid_value('anchor-name', '--foo --bar')
-test_invalid_value('anchor-name', '--foo, --bar')
 test_invalid_value('anchor-name', '100px');
 test_invalid_value('anchor-name', '100%');
 
 // Computed value: as specified
 test_computed_value('anchor-name', 'none');
 test_computed_value('anchor-name', '--foo');
+test_computed_value('anchor-name', '--foo, --bar');
 
 // Initial: none
 // Inherited: no