Reland: Floats and out-of-flow objects may not be adjacent to anonymous blocks.

mstensho · chromium-wpt-export-bot · commit 28b5323e3727 · 2018-06-18T18:51:50.000-04:00
Floats and out-of-flow objects need to be true layout siblings of the inlines, or rendering will be wrong. This means that such objects should never be siblings of anonymous blocks, but rather inside them. This already works correctly for initial layout tree building, and also for many DOM manipulations. However, code was missing to satisfy this requirement if we removed a regular block that was a sibling of an anonymous block and either a float or out-of-flow positioned object. This even caused a crash triggered by ruby code, which ended up mixing inline and block children within the same container. That is not allowed. This happened in the MoveAllChildrenIncludingFloatsTo() call inside LayoutRubyBase::MoveBlockChildren(). Added a DCHECK to MoveAllChildrenIncludingFloatsTo() (which could fail prior to this fix); When moving children from one container to another, either both or none of the containers must have inline children. This is a reland of https://chromium-review.googlesource.com/1102690 with some modifications to avoid bug 853552. Bug: 852640 Change-Id: I0f8a0aa5523e8fe60c841164d25aad088f4b728f Reviewed-on: https://chromium-review.googlesource.com/1104900 Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Emil A Eklund <eae@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Cr-Commit-Position: refs/heads/master@{#568196}
diff --git a/css/CSS2/abspos/remove-block-between-inline-and-abspos.html b/css/CSS2/abspos/remove-block-between-inline-and-abspos.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>Removing block between inline and float should put the two on the same line</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#absolute-positioning" title="9.6 Absolute positioning">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<!-- This is a block with block children, so inlines need to be wrapped inside
+     anonymous blocks. A float and out-of-flow positioned box is neutral here,
+     in that it can either live among block children OR among inline
+     children. If it is (or becomes) sibling of an inline child, though, it
+     should be wrapped inside the same anonymous block as the inline, or layout
+     will be wrong. -->
+<div style="width:200px; background:red;">
+  <div style="height:50px; background:green;"></div>
+  <div style="display:inline-block; vertical-align:top; width:100px; height:150px; background:green;"></div>
+  <div id="removeMe" style="height:100px;"></div>
+  <span style="position:absolute; width:100px; height:150px; background:green;"></span>
+</div>
+<script>
+  document.body.offsetTop; // Trigger layout.
+  document.getElementById("removeMe").style.display = "none";
+</script>
diff --git a/css/CSS2/floats/remove-block-between-inline-and-float.html b/css/CSS2/floats/remove-block-between-inline-and-float.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>Removing block between inline and float should put the two on the same line</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats" title="9.5 Floats">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<!-- This is a block with block children, so inlines need to be wrapped inside
+     anonymous blocks. A float and out-of-flow positioned box is neutral here,
+     in that it can either live among block children OR among inline
+     children. If it is (or becomes) sibling of an inline child, though, it
+     should be wrapped inside the same anonymous block as the inline, or layout
+     will be wrong. -->
+<div style="width:200px; background:red;">
+  <div style="height:50px; background:green;"></div>
+  <div style="display:inline-block; vertical-align:top; width:100px; height:150px; background:green;"></div>
+  <div id="removeMe" style="height:100px;"></div>
+  <div style="float:left; width:100px; height:150px; background:green;"></div>
+</div>
+<script>
+  document.body.offsetTop; // Trigger layout.
+  document.getElementById("removeMe").style.display = "none";
+</script>
