Bug 1998892 [wpt PR 55933] - Add flip-x/flip-y tests for anchored(fallback), a=testonly

Automatic update from web-platform-tests
Add flip-x/flip-y tests for anchored(fallback)

The new keywords were introduced for <try-tactic> in
position-try-fallbacks and should be queryable by anchored() queries
too.

Change-Id: I5a6cb05f9779544bcbfbc11660c46e2a0e287ec5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7129979
Auto-Submit: Rune Lillesveen <futharkchromium.org>
Commit-Queue: Rune Lillesveen <futharkchromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruudchromium.org>
Cr-Commit-Position: refs/heads/main{#1541662}

--

wpt-commits: 26d1c29ed2cdd34123dc1c1fdfe8f4a3dd7380ac
wpt-pr: 55933

UltraBlame original commit: 0c01778b476a7079e33d9fb298a7add4c7faa623

Author: marco-c

testing/web-platform/tests/css/css-anchor-position/container-queries/anchored-fallback-try-tactic.html

@@ -25,15 +25,26 @@
   #a2 {
     position-try-fallbacks: flip-inline flip-block;
   }
-  #t1, #t2 {
+  #a3 {
+    position-try-fallbacks: flip-x flip-y;
+  }
+  #t1, #t2, #t3 {
     --flip-block: no;
     --flip-inline: no;
     --flip-inline-block: no;
     --flip-block-inline: no;
+    --flip-x: no;
+    --flip-y: no;
+    --flip-x-y: no;
+    --flip-y-x: no;
     @container anchored(fallback: flip-block) { --flip-block: yes; }
     @container anchored(fallback: flip-inline) { --flip-inline: yes; }
     @container anchored(fallback: flip-inline flip-block) { --flip-inline-block: yes; }
     @container anchored(fallback: flip-block flip-inline) { --flip-block-inline: yes; }
+    @container anchored(fallback: flip-x) { --flip-x: yes; }
+    @container anchored(fallback: flip-y) { --flip-y: yes; }
+    @container anchored(fallback: flip-x flip-y) { --flip-x-y: yes; }
+    @container anchored(fallback: flip-y flip-x) { --flip-y-x: yes; }
   }
 </style>
 <div id="anchor"></div>
@@ -43,13 +54,20 @@
 <div id="a2" class="anchored">
   <div id="t2"></div>
 </div>
+<div id="a3" class="anchored">
+  <div id="t3"></div>
+</div>
 <script>
   test(() => {
     const style = getComputedStyle(t1);
     assert_equals(style.getPropertyValue("--flip-block"), "yes");
     assert_equals(style.getPropertyValue("--flip-inline"), "no");
     assert_equals(style.getPropertyValue("--flip-inline-block"), "no");
     assert_equals(style.getPropertyValue("--flip-block-inline"), "no");
+    assert_equals(style.getPropertyValue("--flip-x"), "no");
+    assert_equals(style.getPropertyValue("--flip-y"), "no");
+    assert_equals(style.getPropertyValue("--flip-x-y"), "no");
+    assert_equals(style.getPropertyValue("--flip-y-x"), "no");
   }, "@container anchored(fallback) matching flip-block");
 
   test(() => {
@@ -58,5 +76,21 @@
     assert_equals(style.getPropertyValue("--flip-inline"), "no");
     assert_equals(style.getPropertyValue("--flip-inline-block"), "yes");
     assert_equals(style.getPropertyValue("--flip-block-inline"), "no");
+    assert_equals(style.getPropertyValue("--flip-x"), "no");
+    assert_equals(style.getPropertyValue("--flip-y"), "no");
+    assert_equals(style.getPropertyValue("--flip-x-y"), "no");
+    assert_equals(style.getPropertyValue("--flip-y-x"), "no");
   }, "@container anchored(fallback) matching flip-inline flip-block");
+
+  test(() => {
+    const style = getComputedStyle(t3);
+    assert_equals(style.getPropertyValue("--flip-block"), "no");
+    assert_equals(style.getPropertyValue("--flip-inline"), "no");
+    assert_equals(style.getPropertyValue("--flip-inline-block"), "no");
+    assert_equals(style.getPropertyValue("--flip-block-inline"), "no");
+    assert_equals(style.getPropertyValue("--flip-x"), "no");
+    assert_equals(style.getPropertyValue("--flip-y"), "no");
+    assert_equals(style.getPropertyValue("--flip-x-y"), "yes");
+    assert_equals(style.getPropertyValue("--flip-y-x"), "no");
+  }, "@container anchored(fallback) matching flip-x flip-y");
 </script>

testing/web-platform/tests/css/css-anchor-position/container-queries/at-container-anchored-parsing.html

@@ -12,6 +12,7 @@
   test_cq_condition_known('anchored(fallback: none)');
   test_cq_condition_known('(anchored(fallback: inline-start block-end))');
   test_cq_condition_known('anchored(not ((fallback: --foo) or (fallback: --bar flip-inline)))');
+  test_cq_condition_known('anchored(fallback: flip-x flip-y flip-start flip-block flip-inline)');
 
   test_cq_condition_unknown('anchored(fallback < none)');
   test_cq_condition_unknown('anchored((fallback = none))');