[css-anchor-position] Rename position-try-options to *fallbacks

The position-try-options property was renamed in the specification. The
values are still the same.

The position-try-options name will still be an alternative one until it
is unshipped.

Bug: 349600667
Change-Id: I9886c8f592e283f2b72be21153d376f1d848e0a4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5667406
Commit-Queue: Philip Jägenstedt <foolip@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Auto-Submit: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1323315}

css/css-anchor-position/anchor-getComputedStyle-003.html

@@ -32,7 +32,7 @@
   width: 100px;
   height: 100px;
   background: lime;
-  position-try-options: --pf, --pf2;
+  position-try-fallbacks: --pf, --pf2;
 }
 
 @position-try --pf {

css/css-anchor-position/anchor-invalid-fallback.html

@@ -214,7 +214,7 @@
 
     #target {
       left: 9999px; /* Force overflow. */
-      position-try-options: --pt flip-block;
+      position-try-fallbacks: --pt flip-block;
     }
   `;
 

css/css-anchor-position/anchor-scroll-chained-fallback.html

@@ -29,7 +29,7 @@
   position: absolute;
   position-anchor: --a1;
   background: green;
-  position-try-options: --fallback;
+  position-try-fallbacks: --fallback;
   anchor-name: --a2;
   left: anchor(left);
   bottom: anchor(top);

css/css-anchor-position/anchor-scroll-position-try-001.html

@@ -36,7 +36,7 @@
   position: absolute;
   background: green;
   position-anchor: --a;
-  position-try-options: --f1, --f2;
+  position-try-fallbacks: --f1, --f2;
   width: 100px; height: 100px;
   /* Above the anchor */
   left: anchor(left);

css/css-anchor-position/anchor-scroll-position-try-002.html

@@ -34,7 +34,7 @@
   position-anchor: --a;
   top: anchor(top);
   left: anchor(right);
-  position-try-options: --pf;
+  position-try-fallbacks: --pf;
 }
 
 @position-try --pf {

css/css-anchor-position/anchor-scroll-position-try-003.html

@@ -40,7 +40,7 @@
   height: 100px;
   background: green;
   position-anchor: --a;
-  position-try-options: --pf;
+  position-try-fallbacks: --pf;
 }
 
 @position-try --pf {

css/css-anchor-position/anchor-scroll-position-try-004.html

@@ -34,7 +34,7 @@
   height: 100px;
   background: green;
   position-anchor: --a;
-  position-try-options: --pf1, --pf2;
+  position-try-fallbacks: --pf1, --pf2;
   /* Top of the anchor */
   bottom: anchor(top);
   left: anchor(left);

css/css-anchor-position/anchor-scroll-position-try-005.html

@@ -35,7 +35,7 @@
   position-anchor: --a;
   top: anchor(top);
   left: anchor(right);
-  position-try-options: --pf;
+  position-try-fallbacks: --pf;
 }
 
 @position-try --pf {

css/css-anchor-position/anchor-scroll-position-try-007.html

@@ -33,7 +33,7 @@
   height: 100px;
   background: green;
   position-anchor: --a;
-  position-try-options: --pf1, --pf2, --pf3;
+  position-try-fallbacks: --pf1, --pf2, --pf3;
   inset-block-start: anchor(end);
   inset-inline-start: anchor(end);
 }

css/css-anchor-position/anchor-scroll-position-try-008.html

@@ -34,7 +34,7 @@
   height: 100px;
   background: green;
   position-anchor: --a;
-  position-try-options: --pf1, --pf2, --pf3;
+  position-try-fallbacks: --pf1, --pf2, --pf3;
   inset-block-start: anchor(end);
   inset-inline-start: anchor(end);
 }

css/css-anchor-position/anchor-scroll-position-try-009.html

@@ -33,7 +33,7 @@
   height: 100px;
   background: green;
   position-anchor: --a;
-  position-try-options: --pf1, --pf2, --pf3;
+  position-try-fallbacks: --pf1, --pf2, --pf3;
   inset-block-start: anchor(end);
   inset-inline-start: anchor(end);
 }

css/css-anchor-position/anchor-scroll-position-try-010.html

@@ -34,7 +34,7 @@
   height: 100px;
   background: green;
   position-anchor: --a;
-  position-try-options: --pf1, --pf2, --pf3;
+  position-try-fallbacks: --pf1, --pf2, --pf3;
   inset-block-start: anchor(end);
   inset-inline-start: anchor(end);
 }

css/css-anchor-position/anchor-scroll-position-try-011.html

@@ -46,7 +46,7 @@
   height: 100px;
   background: green;
   position-anchor: --a;
-  position-try-options: --pf1, --pf2, --pf3;
+  position-try-fallbacks: --pf1, --pf2, --pf3;
   bottom: anchor(top);
   left: anchor(right);
 }

css/css-anchor-position/anchor-scroll-position-try-012.html

@@ -29,7 +29,7 @@
   height: 100px;
   background: green;
   position-anchor: --a;
-  position-try-options: --pf;
+  position-try-fallbacks: --pf;
 }
 
 @position-try --pf {

css/css-anchor-position/anchor-scroll-position-try-013.html

@@ -25,7 +25,7 @@
   height: 50px;
 
   inset-area: bottom;
-  position-try-options: flip-block;
+  position-try-fallbacks: flip-block;
   position-anchor: --a;
 }
 

css/css-anchor-position/anchor-scroll-position-try-014.html

@@ -27,7 +27,7 @@
   height: 50px;
 
   inset-area: top;
-  position-try-options: flip-block;
+  position-try-fallbacks: flip-block;
   position-anchor: --a;
 }
 

css/css-anchor-position/at-position-try-cssom.html

@@ -37,7 +37,7 @@
     }
     #anchor { top: 100px; left: 0; anchor-name: --a; }
     #other-anchor { top: 200px; left: 0; anchor-name: --b; }
-    #target { position-try-options: --pf; position-anchor: --a; left: 999999px; }
+    #target { position-try-fallbacks: --pf; position-anchor: --a; left: 999999px; }
   `);
   const positionTryRule = style.sheet.cssRules[0];
 

css/css-anchor-position/at-position-try-invalidation-shadow-dom.html

@@ -12,7 +12,7 @@
   <template shadowrootmode="open">
     <style>
       ::slotted(#slotted), :host {
-        position-try-options: --pf;
+        position-try-fallbacks: --pf;
         position: absolute;
         left: 999999px; /* force fallback */
       }

css/css-anchor-position/at-position-try-invalidation.html

@@ -17,7 +17,7 @@
     position: absolute;
     width: 100px;
     height: 100px;
-    position-try-options: --pf;
+    position-try-fallbacks: --pf;
     left: 999999px; /* force fallback */
   }
 </style>
@@ -36,7 +36,7 @@
 <script>
   test(() => {
     assert_equals(anchored.offsetLeft, 999999);
-  }, "position-try-options initially not matching any rules");
+  }, "position-try-fallbacks initially not matching any rules");
 
   test(() => {
     document.getElementById("to-enable").media = "";

css/css-anchor-position/base-style-invalidation.html

@@ -26,7 +26,7 @@
   #anchored {
     position: absolute;
     position-anchor: --a;
-    position-try-options: --pt flip-start;
+    position-try-fallbacks: --pt flip-start;
     inset: 0;
     top: anchor(top);
     bottom: anchor(bottom);
@@ -60,5 +60,5 @@
     anchored.classList.toggle('flip');
     assert_equals(anchored.offsetLeft, 20);
     assert_equals(anchored.offsetTop, 75);
-  }, 'The chosen position options changes when the base style differs');
+  }, 'The chosen position fallbacks changes when the base style differs');
 </script>

css/css-anchor-position/chrome-1512373-2-crash.html

@@ -6,7 +6,7 @@
   #t {
     position: absolute;
     left: 999999px; /* force fallback */
-    position-try-options: --foo;
+    position-try-fallbacks: --foo;
   }
 </style>
 <div id="t"></div>

css/css-anchor-position/chrome-40286059-crash.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <link rel="help" href="https://crbug.com/40286059">
 <p>Pass if no crash</p>
-<div id="pop" style="position-try-options: --foo" popover></div>
+<div id="pop" style="position-try-fallbacks: --foo" popover></div>
 <script>
   getComputedStyle(pop).left;
 </script>

css/css-anchor-position/inline-grid-try-options-crash.html → css/css-anchor-position/inline-grid-try-fallbacks-crash.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html class=test-wait>
-  <title>CSS Anchor Positioning: Don't crash when animating position and position-try-options in grid</title>
+  <title>CSS Anchor Positioning: Don't crash when animating position and position-try-fallbacks in grid</title>
   <link rel="help" href="https://crbug.com/339686368">
   <style>
     @keyframes --anim {
       from {
         position: absolute;
-        position-try-options: flip-block;
+        position-try-fallbacks: flip-block;
       }
     }
     #parent {

css/css-anchor-position/inset-area-in-position-try.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <title>CSS Anchor Positioning: inset-area in @position-try</title>
-<link rel="help" href='https://drafts.csswg.org/css-anchor-position-1/#position-try-options'>
+<link rel="help" href='https://drafts.csswg.org/css-anchor-position-1/#position-try-fallbacks'>
 <script src='/resources/testharness.js'></script>
 <script src='/resources/testharnessreport.js'></script>
 <style>
@@ -56,14 +56,14 @@
         inset-area: ${inset_area};
       }
       #target {
-        position-try-options: --pt;
+        position-try-fallbacks: --pt;
       }
       #ref {
         inset-area: ${inset_area};
       }
     `;
     assert_true(CSS.supports('inset-area', 'top left'));
-    assert_true(CSS.supports('position-try-options', '--x'));
+    assert_true(CSS.supports('position-try-fallbacks', '--x'));
     assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
     assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
   }, `${inset_area}`);
@@ -138,29 +138,29 @@
 </style>
 <script>
 
-// Test that an element with the specified position-try-options is placed
+// Test that an element with the specified position-try-fallbacks is placed
 // at the same position as a reference element with inset-area:`expected`.
 // This test uses #target/#ref size of 60x60px, which causes overflow if
 // if we attempt the --right and --bottom positions.
-function test_inset_area_placement(position_try_options, expected) {
+function test_inset_area_placement(position_try_fallbacks, expected) {
   test((t) => {
     style.textContent = `
       #target, #ref {
         width: 60px;
         height: 60px;
       }
       #target {
-        position-try-options: ${position_try_options};
+        position-try-fallbacks: ${position_try_fallbacks};
       }
       #ref {
         inset-area: ${expected};
       }
     `;
     assert_true(CSS.supports('inset-area', 'top left'));
-    assert_true(CSS.supports('position-try-options', '--x'));
+    assert_true(CSS.supports('position-try-fallbacks', '--x'));
     assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
     assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
-  }, `Placement: ${position_try_options}`);
+  }, `Placement: ${position_try_fallbacks}`);
 }
 
 test_inset_area_placement('--top', 'top');

css/css-anchor-position/inset-area-value.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <title>CSS Anchor Positioning: <'inset-area'> value</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-options">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-fallbacks">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <style>
@@ -49,7 +49,7 @@
     });
     style.textContent = `
       #target {
-        position-try-options: ${inset_area};
+        position-try-fallbacks: ${inset_area};
       }
       #ref {
         inset-area: ${inset_area};

css/css-anchor-position/last-successful-basic.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: basic last successful position option</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-option">
+<title>CSS Anchor Positioning: basic last successful position fallback</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/test-common.js"></script>
@@ -22,7 +22,7 @@
   }
   #anchored {
     position-anchor: --a;
-    position-try-options: flip-block;
+    position-try-fallbacks: flip-block;
     position: absolute;
     width: 100px;
     height: 200px;
@@ -53,5 +53,5 @@
     await waitUntilNextAnimationFrame();
     await waitUntilNextAnimationFrame();
     assert_equals(anchored.offsetTop, 0);
-  }, "Base position without option now successful");
+  }, "Base position without fallback now successful");
 </script>

css/css-anchor-position/last-successful-change-options.html → css/css-anchor-position/last-successful-change-fallbacks.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: changing position-try-options invalidates last successful position option</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-option">
+<title>CSS Anchor Positioning: changing position-try-fallbacks invalidates last successful position fallback</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/test-common.js"></script>
@@ -22,7 +22,7 @@
   }
   #anchored {
     position-anchor: --a;
-    position-try-options: flip-block;
+    position-try-fallbacks: flip-block;
     position: absolute;
     width: 100px;
     height: 200px;
@@ -49,9 +49,9 @@
   }, "No successful position, keep flip-block");
 
   promise_test(async () => {
-    anchored.style.positionTryOptions = "flip-block, --foo";
+    anchored.style.positionTryFallbacks = "flip-block, --foo";
     await waitUntilNextAnimationFrame();
     await waitUntilNextAnimationFrame();
     assert_equals(anchored.offsetTop, -50);
-  }, "No successful position, last successful invalidated by position-try-options change");
+  }, "No successful position, last successful invalidated by position-try-fallbacks change");
 </script>

css/css-anchor-position/last-successful-change-try-rule.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: changing @position-try rules invalidates last successful position option</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-option">
+<title>CSS Anchor Positioning: changing @position-try rules invalidates last successful position fallback</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/test-common.js"></script>
@@ -22,7 +22,7 @@
   }
   #anchored {
     position-anchor: --a;
-    position-try-options: --try;
+    position-try-fallbacks: --try;
     position: absolute;
     width: 100px;
     height: 200px;

css/css-anchor-position/last-successful-intermediate-ignored.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <title>CSS Anchor Positioning: last successful updated on resizeObserver timing</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-option">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/test-common.js"></script>
@@ -22,7 +22,7 @@
   }
   #anchored {
     position-anchor: --a;
-    position-try-options: flip-block;
+    position-try-fallbacks: flip-block;
     position: absolute;
     width: 100px;
     height: 200px;