[anchor-position] Fix when OOFs are not in pre-order
When in a block-fragmentation context, OOF nodes given to
|LayoutFragmentainerDescendants| may not be in the pre-order
of the box tree. This patch sorts the |descendants| in such
cases.
Note the sorting is not cheap that it is limited only when
anchors are on OOF boxes. We haven't found cases where anchors
are on in-flow boxes and |descendants| need to be sorted at
this point.
LOW_COVERAGE_REASON=I think this is an error, all new code is covered.
Bug: 1309178
Change-Id: I2c680a03e97c9525d9f6aa521709c96b55dbafd1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3892536
Commit-Queue: Koji Ishii <kojii@chromium.org>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1047118}
diff --git a/css/css-anchor-position/anchor-position-multicol-005.tentative.html b/css/css-anchor-position/anchor-position-multicol-005.tentative.html
new file mode 100644
index 0000000..50178ba
--- /dev/null
+++ b/css/css-anchor-position/anchor-position-multicol-005.tentative.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>Overflow pushing anchors to later fragmentainers than querying element in multicol</title>
+<link rel="help" href="https://tabatkins.github.io/specs/css-anchor-position/#propdef-anchor-name">
+<link rel="help" href="https://tabatkins.github.io/specs/css-anchor-position/#anchor-pos">
+<link rel="help" href="https://tabatkins.github.io/specs/css-anchor-position/#anchor-size">
+<link rel="author" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+.relpos {
+ position: relative;
+}
+.abspos {
+ position: absolute;
+}
+.columns {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 10px;
+ column-width: 100px;
+ width: 210px;
+ height: 100px;
+}
+.spacer {
+ height: 10px;
+ background: pink;
+}
+.anchor1 {
+ anchor-name: --a1;
+ margin-left: 10px;
+ width: 40px;
+ height: 80px;
+ background: orange;
+}
+.target {
+ position: absolute;
+ background: lime;
+ opacity: 1;
+}
+.target1 {
+ left: anchor(--a1 left);
+ top: anchor(--a1 top);
+ width: anchor-size(--a1 width);
+ height: anchor-size(--a1 height);
+}
+</style>
+<body onload="checkLayout('.target')">
+ <div class="spacer" style="height: 10px"></div>
+ <div class="columns">
+ <div class="relpos">
+ <div style="height: 50px">
+ <div class="spacer" style="height: 110px"></div>
+ <div class="relpos" style="height: 50px">
+ <div class="anchor1 abspos"></div>
+ </div>
+ </div>
+ <div style="height: 50px">
+ <div class="target target1"
+ data-expected-width=40 data-expected-height=80></div>
+ </div>
+ </div>
+ </div>
+</body>
