[LayoutNG] Text indent with leading float

This change avoids breaking after leading floats in the case where there is a text indentation. Doing so fixes the following scenario: <div style="width: 100px; text-indent: 40px;"> <div style="float: left; width: 60px; height: 10px;"></div> <div style="display: inline-block; width: 60px; height: 20px;"></div> </div> In the above example, the following steps will happen: 1. The inline div will attempt to fit on the same line as the float. It does not, and a new line opportunity will be created on the next line. 2. The inline div overflows this new line opportunity due to the indent. 3. HandleOverflow() checks if the previous element (ie. the float) can break after. The float can, so it will attempt to rewind. 4. This causes a break in a later DCHECK. Not allowing breaks after leading floats in the case of an indentation fixes the above issue, and appears to match the behavior of other browsers. Bug: 1014247 Change-Id: Icf551f5908a0fcb8e0b80a8b9329c965435dd805
web-platform-tests · Feb 5, 2020 · e77b166 · e77b166
1 parent 856a776
commit e77b166
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/css/CSS2/positioning/line-break-after-leading-float.html b/css/CSS2/positioning/line-break-after-leading-float.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS Test: Line wrapping after leading floating objects</title>
+<link rel="help" href="https://crbug.com/1014247">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<div id="parent" style="width: 100px; text-indent: 40px;">
+  <div style="float: left; width: 60px; height: 10px; background: hotpink;"></div>
+  <div id="lime" style="display: inline-block; width: 60px; height: 20px; background: lime;"></div>
+</div>
+</body>
+<script>
+  test(function(){
+    parent_rect = document.getElementById("parent").getBoundingClientRect();
+    rect = document.getElementById("lime").getBoundingClientRect();
+    assert_equals(rect.left - parent_rect.left, 40);
+  }, "Checks line wrapping after leading floating objects.");
+</script>