[anchor-position] Generally allow out-of-flow anchors
As decided in https://github.com/w3c/csswg-drafts/issues/8165, anchoring
to out-of-flow anchors should be generally allowed, as long as the
anchor comes earlier in the tree order. This patch implements the
change.
Since we are already calling NGLogicalAnchorQuery::Set() for out-of-flow
anchors, this patch only changes the insertion algorithm to not filter
then out, and the query algorithm to consider out-of-flow anchors.
Existing support of top-layer target elements is covered by this change,
and hence its special handling code is remove.
This patch also reveals an existing issue of discovering OOF anchors
in block fragmentation, which caused the failure of some tests. As
this is an edge case, we only track the failure with the block fragmentation meta bug crbug.com/1378460.
Bug: 1378460, 1442752
Change-Id: I81e80a143447369d1fb3c5a4aee587760cfb913f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4518512
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1145042}
diff --git a/css/css-anchor-position/anchor-name-002.html b/css/css-anchor-position/anchor-name-002.html
index 4c14e1d..63b5d66 100644
--- a/css/css-anchor-position/anchor-name-002.html
+++ b/css/css-anchor-position/anchor-name-002.html
@@ -29,20 +29,26 @@
<div class="relpos">
<div>
<div class="relpos">
+ <!-- This target should not find the anchor, because the last containing
+ block has `position: absolute` and is after in tree order. -->
+ <div class="target" data-expected-width=0></div>
<div class="abspos">
<div class="relpos">
- <div class="anchor1" style="position: absolute"></div>
<!-- This target should not find the anchor, because the anchor is
- positioned. -->
+ absolutely positioned after it. -->
<div class="target" data-expected-width=0></div>
+ <div class="anchor1" style="position: absolute"></div>
+ <!-- This target should find the anchor, because the anchor is
+ absolutely positioned before it. -->
+ <div class="target" data-expected-width=10></div>
</div>
<!-- This target should find the anchor, because the last containing
block has `position: relative`. -->
<div class="target" data-expected-width=10></div>
</div>
- <!-- This target should not find the anchor, because the last containing
- block has `position: absolute`. -->
- <div class="target" data-expected-width=0></div>
+ <!-- This target should find the anchor, because the last containing
+ block has `position: absolute` and is before in tree order. -->
+ <div class="target" data-expected-width=10></div>
</div>
</div>
<!-- This target should find the anchor, because the last containing block
diff --git a/css/css-anchor-position/anchor-name-003.html b/css/css-anchor-position/anchor-name-003.html
index 91ff5bc..19cb6b6 100644
--- a/css/css-anchor-position/anchor-name-003.html
+++ b/css/css-anchor-position/anchor-name-003.html
@@ -31,17 +31,19 @@
<div class="relpos">
<div>
<div class="relpos">
+ <div class="target" data-expected-width=0></div>
<div class="abspos">
<div class="relpos">
+ <div class="target" data-expected-width=20></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
<div class="anchor1" style="position: absolute; width: 30px"></div>
<div class="anchor1" style="width: 40px"></div>
- <div class="target" data-expected-width=20></div>
+ <div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=10></div>
</div>
- <div class="target" data-expected-width=0></div>
+ <div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=10></div>
</div>
@@ -52,16 +54,18 @@
<div class="relpos">
<div>
<div class="relpos">
+ <div class="target" data-expected-width=0></div>
<div class="abspos">
<div class="relpos">
+ <div class="target" data-expected-width=20></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
- <div class="target" data-expected-width=20></div>
+ <div class="target" data-expected-width=10></div>
</div>
<div class="anchor1" style="width: 50px"></div>
<div class="target" data-expected-width=10></div>
</div>
- <div class="target" data-expected-width=0></div>
+ <div class="target" data-expected-width=10></div>
</div>
<div class="anchor1" style="width: 60px"></div>
<div class="target" data-expected-width=10></div>
@@ -74,16 +78,18 @@
<div class="relpos">
<div>
<div class="relpos">
+ <div class="target" data-expected-width=0></div>
<div class="abspos">
<div class="relpos">
+ <div class="target" data-expected-width=20></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
- <div class="target" data-expected-width=20></div>
+ <div class="target" data-expected-width=10></div>
</div>
<div class="anchor1" style="position: absolute; width: 110px"></div>
<div class="target" data-expected-width=10></div>
</div>
- <div class="target" data-expected-width=0></div>
+ <div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=10></div>
</div>
@@ -100,9 +106,10 @@
<div class="abspos">
<div class="anchor1" style="width: 120px"></div>
<div class="relpos">
+ <div class="target" data-expected-width=20></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
- <div class="target" data-expected-width=20></div>
+ <div class="target" data-expected-width=10></div>
</div>
<div class="target" data-expected-width=120></div>
</div>
@@ -115,23 +122,28 @@
<!-- Out-of-flow boxes in ancestors, before the propagated ones. -->
<div class="relpos">
+ <div class="target" data-expected-width=110></div>
<div class="anchor1" style="position: absolute; width: 100px"></div>
<div>
+ <div class="target" data-expected-width=100></div>
<div class="relpos">
+ <div class="target" data-expected-width=0></div>
<div class="anchor1" style="position: absolute; width: 110px"></div>
<div class="abspos">
+ <div class="target" data-expected-width=10></div>
<div class="anchor1" style="position: absolute; width: 120px"></div>
<div class="relpos">
+ <div class="target" data-expected-width=20></div>
<div class="anchor1" style="position: absolute; width: 10px"></div>
<div class="anchor1" style="width: 20px"></div>
- <div class="target" data-expected-width=20></div>
+ <div class="target" data-expected-width=10></div>
</div>
- <div class="target" data-expected-width=10></div>
+ <div class="target" data-expected-width=120></div>
</div>
- <div class="target" data-expected-width=0></div>
+ <div class="target" data-expected-width=110></div>
</div>
- <div class="target" data-expected-width=110></div>
+ <div class="target" data-expected-width=100></div>
</div>
- <div class="target" data-expected-width=110></div>
+ <div class="target" data-expected-width=100></div>
</div>
</body>
diff --git a/css/css-anchor-position/anchor-name-multicol-003.html b/css/css-anchor-position/anchor-name-multicol-003.html
index 8b06b4c..b16ddef 100644
--- a/css/css-anchor-position/anchor-name-multicol-003.html
+++ b/css/css-anchor-position/anchor-name-multicol-003.html
@@ -43,6 +43,7 @@
}
</style>
<body onload="checkLayoutForAnchorPos('.target')">
+ <!-- All targets should find the abspos anchor -->
<div class="spacer"></div>
<div class="relpos">
<div class="columns relpos">
@@ -52,7 +53,7 @@
<div class="anchor abspos" style="top: 120px; height: 100px"></div>
<div class="anchor" style="height: 60px"></div>
<div class="target"
- data-expected-width=40 data-expected-height=50></div>
+ data-expected-width=70 data-expected-height=50></div>
</div>
<div class="target"
data-expected-width=70 data-expected-height=50></div>
diff --git a/css/css-anchor-position/anchor-position-multicol-003.html b/css/css-anchor-position/anchor-position-multicol-003.html
index bf3e48e..d23779a 100644
--- a/css/css-anchor-position/anchor-position-multicol-003.html
+++ b/css/css-anchor-position/anchor-position-multicol-003.html
@@ -40,7 +40,7 @@
<div class="relpos">
<div class="spacer" style="height: 30px"></div>
<div class="anchor1"></div>
- <div class="target" data-expected-height=0></div>
+ <div class="target" data-expected-height=50></div>
</div>
<div class="target" data-expected-height=50></div>
</div>
@@ -56,7 +56,7 @@
<div class="relpos">
<div class="spacer" style="height: 10px"></div>
<div class="anchor1"></div>
- <div class="target" data-expected-height=0></div>
+ <div class="target" data-expected-height=50></div>
</div>
<div class="target" data-expected-height=50></div>
</div>
diff --git a/css/css-anchor-position/anchor-position-multicol-fixed-001.html b/css/css-anchor-position/anchor-position-multicol-fixed-001.html
index 6fca40d..c3ba7bd 100644
--- a/css/css-anchor-position/anchor-position-multicol-fixed-001.html
+++ b/css/css-anchor-position/anchor-position-multicol-fixed-001.html
@@ -50,6 +50,7 @@
}
</style>
<body onload="checkLayoutForAnchorPos('.target')">
+ <!-- All targets should find the fixed positioned anchor -->
<div class="transform">
<div class="spacer" style="height: 10px"></div>
<div class="columns">
@@ -61,7 +62,7 @@
<div class="anchor"></div>
<div class="target"
data-offset-x="10" data-offset-y="20"
- data-expected-width=40 data-expected-height=10></div>
+ data-expected-width=130 data-expected-height=50></div>
</div>
<div class="target"
data-offset-x="20" data-offset-y="0"
