Fix OOF positioning when they appear in nested multi-columns
This patch fixes OOF positioning when they appear in nested
multi-columns, with some specific conditions as seen in the
attached test.
This change is a partial revert of crrev.com/c/3714109.
Bug: 1343167, 1343746
Change-Id: I9afc8972f2d20eb271c7a7c3d9d06beeedcaa51a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3752215
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Auto-Submit: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1023250}
diff --git a/css/css-multicol/oof-in-nested-multicol.html b/css/css-multicol/oof-in-nested-multicol.html
new file mode 100644
index 0000000..44c2869
--- /dev/null
+++ b/css/css-multicol/oof-in-nested-multicol.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/oof-in-nested-multicol-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#propdef-column-count">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<style>
+.outer {
+ position: relative;
+ margin-left: 100px;
+ width: 400px;
+ height: 400px;
+ column-count: 2;
+ overflow: hidden;
+ background: yellow;
+}
+.nested {
+ height: 400px;
+ column-count: 2;
+ background: purple;
+}
+.cb {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background: red;
+}
+img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 400px;
+ background: green;
+}
+</style>
+<body>
+ <div class="outer">
+ <div class="nested">
+ <div class="cb">
+ <img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7">
+ </div>
+ </div>
+ </div>
+</body>
diff --git a/css/css-multicol/reference/oof-in-nested-multicol-ref.html b/css/css-multicol/reference/oof-in-nested-multicol-ref.html
new file mode 100644
index 0000000..5d8208e
--- /dev/null
+++ b/css/css-multicol/reference/oof-in-nested-multicol-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+.outer {
+ position: relative;
+ margin-left: 100px;
+}
+img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background: green;
+}
+</style>
+<body>
+ <div class="outer">
+ <img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7">
+ </div>
+</body>
