Bug 1923675 [wpt PR 48542] - [css-anchor-position] Allow anchor-size(…

…) for insets and margins, a=testonly

Automatic update from web-platform-tests
[css-anchor-position] Allow anchor-size() for insets and margins

Per resolution in [1]

Added tests for actually checking that anchor-size() function does
apply to margins and insets.

[1] w3c/csswg-drafts#9827 (comment)

Bug: 346521300
Change-Id: I1d47feb6d4a3bd41c8860c3a5982025ee18fe0c4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5916307
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1366397}

--

wpt-commits: c8bf0721b97644be612635c67c66275f8aa2c0c4
wpt-pr: 48542

testing/web-platform/tests/css/css-anchor-position/anchor-invalid-fallback.html

@@ -139,7 +139,6 @@
 test_ref('top:anchor(--a left)', ' cross-axis query (horizontal)');
 
 // Wrong query for the given property:
-test_ref('top:anchor-size(--a width)', 'anchor-size() in inset');
 test_ref('width:anchor(--a left)', 'anchor() in sizing property');
 
 // Invalid anchor*() deeper within calc():

testing/web-platform/tests/css/css-anchor-position/anchor-parse-invalid.html

@@ -35,11 +35,11 @@
 test_invalid_value('top', 'anchor(--foo top, 100s)');
 test_invalid_value('top', 'anchor(--foo top, bottom)');
 test_invalid_value('top', 'anchor(--foo top, anchor(bar top))');
-test_invalid_value('top', 'anchor(--foo top, anchor-size(--bar height))');
+test_invalid_value('top', 'anchor(--foo top, anchor-size(bar height))');
 test_invalid_value('top', 'anchor(--foo top, auto');
 
 // Invalid anchor values in calc tree
 test_invalid_value('top', 'calc(anchor(foo top) + 10px + 10%)');
 test_invalid_value('top', 'calc(10px + 100 * anchor(--foo top, anchor(bar bottom)))');
-test_invalid_value('top', 'min(anchor(--foo top), anchor(--bar bottom), anchor-size(--baz height))');
+test_invalid_value('top', 'min(anchor(--foo top), anchor(--bar bottom), anchor-size(baz height))');
 </script>

testing/web-platform/tests/css/css-anchor-position/anchor-size-001.html

@@ -40,8 +40,26 @@
     <div class="target" style="height: anchor-size(--a1 self-inline)" data-expected-height=5></div>
     <div class="target" style="width: anchor-size(--a1 self-block)" data-expected-width=7></div>
 
+    <!-- anchor-size() in insets -->
+    <div class="target" style="left: anchor-size(--a1 width)" data-offset-x=5></div>
+    <div class="target" style="top: anchor-size(--a1 height)" data-offset-y=7></div>
+    <div class="target" style="left: anchor-size(--a1 height)" data-offset-x=7></div>
+    <div class="target" style="top: anchor-size(--a1 width" data-offset-y=5></div>
+
+    <!-- anchor-size() in margins -->
+    <div class="target" style="margin-left: anchor-size(--a1 width)" data-expected-margin-left=5></div>
+    <div class="target" style="margin-top: anchor-size(--a1 height)" data-expected-margin-top=7></div>
+    <div class="target" style="margin-right: anchor-size(--a1 height)" data-expected-margin-right=7></div>
+    <div class="target" style="margin-bottom: anchor-size(--a1 width" data-expected-margin-bottom=5></div>
+
     <!-- Implicit <anchor-size> -->
     <div class="target" style="width: anchor-size(--a1)" data-expected-width=5></div>
     <div class="target" style="height: anchor-size(--a1)" data-expected-height=7></div>
+    <div class="target" style="left: anchor-size(--a1)" data-offset-x=5></div>
+    <div class="target" style="top: anchor-size(--a1)" data-offset-y=7></div>
+    <div class="target" style="margin-left: anchor-size(--a1)" data-expected-margin-left=5></div>
+    <div class="target" style="margin-right: anchor-size(--a1)" data-expected-margin-right=5></div>
+    <div class="target" style="margin-top: anchor-size(--a1)" data-expected-margin-top=7></div>
+    <div class="target" style="margin-bottom: anchor-size(--a1)" data-expected-margin-bottom=7></div>
   </div>
 </body>