[anchor] Handle flipping anchor(inside) and anchor(outside) values.

If position-try-fallbacks on an anchored element says to flip, we didn't handle anchor(inside) and anchor(outside) insets (and therefore trigger a NOTREACHED()). They are very easy to flip, though. Just return the same value. Change-Id: Ia63df58e72de29ed837bb12040e46ed493694386 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6218370 Commit-Queue: Morten Stenshorne <[email protected]> Reviewed-by: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1414703}
web-platform-tests · Feb 2, 2025 · 28af658 · 28af658
1 parent f630424
commit 28af658
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/css/css-anchor-position/position-try-fallbacks-001.html b/css/css-anchor-position/position-try-fallbacks-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<title>position-try-fallbacks:flip-block on bottom:anchor(outside)</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-try-fallbacks">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="position:relative; width:100px; height:100px; background:red;">
+  <div style="anchor-name:--a; height:20px; background:green;"></div>
+  <div style="position:absolute; position-anchor:--a; bottom:anchor(outside); position-try-fallbacks:flip-block; width:100px; height:80px; background:green;"></div>
+</div>
diff --git a/css/css-anchor-position/position-try-fallbacks-002.html b/css/css-anchor-position/position-try-fallbacks-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<title>position-try-fallbacks:flip-block on bottom:anchor(inside)</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-try-fallbacks">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="position:relative; width:100px; height:100px; background:red;">
+  <div style="anchor-name:--a; height:20px;"></div>
+  <div style="position:absolute; position-anchor:--a; bottom:anchor(inside); position-try-fallbacks:flip-block; width:100px; height:100px; background:green;"></div>
+</div>