Add a "top" scroller position for customizable-<select>

This updates the way we do scrollable fallback positions, using the
`max-block-size: stretch` property. That eliminates the need for
extra fallbacks for scrolling vs. non-scrolling, and gets the total
list of fallbacks down to three. With this change, the picker will
show up in one of four positions (above/below and right/left) either
with or without scrollbars depending on available space. The
`position-try-order: most-block-size` property is also added so that
the fallback with the most space for options gets selected.

Note: while working on this, I also discovered two tests that had
implicit dependencies on the number of supported fallback positions,
assuming it was exactly 5. I fixed these tests so that they should
pass even if more than 5 are supported.

Bug: 363205525,362536387
Change-Id: Ica125275d3fcb6e1a3bd32634261084fffd15d82
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6071443
Reviewed-by: Ian Kilpatrick <[email protected]>
Auto-Submit: Mason Freed <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1393860}

css/css-anchor-position/position-try-order-basic.html

@@ -184,14 +184,22 @@
 test_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
 test_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');
 
+// NOTE: the css-anchor-position-1 spec requires that only a minimum of five
+// fallback positions be respected. So this test, while intended to test across
+// all 8 fallbacks, intentionally leaves off 3 of them.
 test_order(`most-inline-size
   --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
-  --right, --left, --bottom, --top
-  `, '--left-sweep');
+  /*  --right, --left, --bottom, --top */
+  --bottom
+  `, '--bottom');
 
+// NOTE: the css-anchor-position-1 spec requires that only a minimum of five
+// fallback positions be respected. So this test, while intended to test across
+// all 8 fallbacks, intentionally leaves off 3 of them.
 test_order(`most-block-size
   --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
-  --right, --left, --bottom, --top
+  /*  --right, --left, --bottom, --top */
+  --right
   `, '--right');
 
 </script>

css/css-anchor-position/position-try-order-position-area.html

@@ -183,14 +183,22 @@
 test_position_area_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
 test_position_area_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');
 
+// NOTE: the css-anchor-position-1 spec requires that only a minimum of five
+// fallback positions be respected. So this test, while intended to test across
+// all 8 fallbacks, intentionally leaves off 3 of them.
 test_position_area_order(`most-inline-size
   --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
-  --right, --left, --bottom, --top
-  `, '--left-sweep');
+  /* --right, --left, --bottom, --top */
+  --bottom
+  `, '--bottom');
 
+// NOTE: the css-anchor-position-1 spec requires that only a minimum of five
+// fallback positions be respected. So this test, while intended to test across
+// all 8 fallbacks, intentionally leaves off 3 of them.
 test_position_area_order(`most-block-size
   --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
-  --right, --left, --bottom, --top
+  /* --right, --left, --bottom, --top */
+  --right
   `, '--right');
 
 </script>