Block-start of a float must be >= that of previous floats.

Final layout would eventually end up being correct anyway, but during layout we need to calculate the inline-size of the float, before we can tell whether it's going to fit next to the current line or not. This piece of code forgot to check with the block-start of preceding floats, so that it would temporarily be put at the wrong offset, triggering a DCHECK failure during block fragmentation. Move some code out of LayoutBlockFlow::PlaceNewFloats() into a new utility method. Note that the test included also passes without this fix (except for the DCHECK failure). Bug: 961516 Change-Id: I3bbd37c7affcb5fa7143e951f9f1bba78a2a4a0a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1649477 Reviewed-by: Emil A Eklund <eae@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#667467}
web-platform-tests · Jun 8, 2019 · e7b1c6e · e7b1c6e
1 parent a2ed321
commit e7b1c6e
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/css/css-break/floats-and-text-narrow-and-short-dynamic-ref.html b/css/css-break/floats-and-text-narrow-and-short-dynamic-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>
+  .float {
+    float: left;
+    width: 2em;
+    height: 2em;
+  }
+  .yellow {
+    background: yellow;
+  }
+  .blue {
+    background: blue;
+  }
+</style>
+<p>Below there should be two yellow and two blue squares.</p>
+<div class="float yellow"></div>
+<div class="float blue"></div>
+<div class="float yellow"></div>
+<div class="float blue"></div>
diff --git a/css/css-break/floats-and-text-narrow-and-short-dynamic.html b/css/css-break/floats-and-text-narrow-and-short-dynamic.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=961516">
+<link rel="match" href="floats-and-text-narrow-and-short-dynamic-ref.html">
+<style>
+  #container {
+    columns: 4;
+    height: 2em;
+    column-fill: auto;
+    column-gap: 0;
+    line-height: 2em;
+    background: yellow;
+  }
+
+  .float {
+    float: left;
+    width: 2em;
+    height: 2em;
+    break-inside: avoid;
+    background: blue;
+  }
+</style>
+<p>Below there should be two yellow and two blue squares.</p>
+<div id="container">
+  <div style="width:1em;">
+    <div style="height:1em;"></div>
+    <div class="float"></div>
+    &nbsp;
+    <div class="float"></div>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "8em";
+</script>