[LayoutReloaded] Right floating box reduces available line width.
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 1 Apr 2018 16:47:59 +0000 (16:47 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 1 Apr 2018 16:47:59 +0000 (16:47 +0000)
https://bugs.webkit.org/show_bug.cgi?id=184226

Reviewed by Antti Koivisto.

* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext.prototype._createNewLine):
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/inline-with-floats-right-left-simple.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@230142 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Tools/ChangeLog
Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js
Tools/LayoutReloaded/test/index.html
Tools/LayoutReloaded/test/inline-with-floats-right-left-simple.html [new file with mode: 0644]

index 5c8adce2ac653e1359640cc82f538069fdf51bf1..fbd372fb68a692924feca36c9aaeda5ba823cfa5 100644 (file)
@@ -1,3 +1,15 @@
+2018-04-01  Zalan Bujtas  <zalan@apple.com>
+
+        [LayoutReloaded] Right floating box reduces available line width.
+        https://bugs.webkit.org/show_bug.cgi?id=184226
+
+        Reviewed by Antti Koivisto.
+
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext.prototype._createNewLine):
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/inline-with-floats-right-left-simple.html: Added.
+
 2018-03-31  Zalan Bujtas  <zalan@apple.com>
 
         [LayoutReloaded] Floating box reduces line with in inline formatting context
index cdc5b0850b9510a80347e9c205f382b7d8c495c2..1f4406707964e3bd342dc4406a8249eca4656b3f 100644 (file)
@@ -97,19 +97,23 @@ class InlineFormattingContext extends FormattingContext {
     }
 
     _createNewLine() {
-        // TODO: Floats need to be taken into account.
-        let contentBoxRect = this.displayBox(this.formattingRoot()).contentBox();
-        let lineWidth = contentBoxRect.width();
-        let topLeft = contentBoxRect.topLeft();
+        let lineRect = this.displayBox(this.formattingRoot()).contentBox();
         let floatingLeft = this._mapFloatingPosition(this.floatingContext().left());
-        if (!Number.isNaN(floatingLeft)) {
-            topLeft.setLeft(floatingLeft);
-            lineWidth -= floatingLeft;
-        }
+        let floatingRight = this._mapFloatingPosition(this.floatingContext().right());
+        // TODO: Check the case when the containing block is narrower than the floats.
+        if (!Number.isNaN(floatingLeft) && !Number.isNaN(floatingRight)) {
+            // Floats on both sides.
+            lineRect.setLeft(floatingLeft);
+            lineRect.setWidth(floatingRight - floatingLeft);
+        } else if (!Number.isNaN(floatingLeft))
+            lineRect.setLeft(floatingLeft);
+        else if (!Number.isNaN(floatingRight))
+            lineRect.setRight(floatingRight);
+
         let lines = this.formattingState().lines();
         if (lines.length)
-            topLeft.setTop(lines[lines.length - 1].rect().bottom());
-        return new Line(topLeft, Utils.computedLineHeight(this.formattingRoot().node()), lineWidth);
+            lineRect.setTop(lines[lines.length - 1].rect().bottom());
+        return new Line(lineRect.topLeft(), Utils.computedLineHeight(this.formattingRoot().node()), lineRect.width());
     }
 
     _mapFloatingPosition(verticalPosition) {
index 3571a402324f5397fd7ddb720912bb541f4bab06..2d022e140dd115d050b700acecc7aa5c0d2fa5b4 100644 (file)
@@ -64,7 +64,8 @@ let testFiles = [
     "intruding-left-float-simple.html",
     "simple-inline-text.html",
     "simple-multiline-text.html",
-    "inline-formatting-context-with-floats.html"
+    "inline-formatting-context-with-floats.html",
+    "inline-with-floats-right-left-simple.html"
 ];
 
 let debugThis = [];
diff --git a/Tools/LayoutReloaded/test/inline-with-floats-right-left-simple.html b/Tools/LayoutReloaded/test/inline-with-floats-right-left-simple.html
new file mode 100644 (file)
index 0000000..30d390f
--- /dev/null
@@ -0,0 +1,8 @@
+<div style="padding: 20px; width: 200px; height: 800px;">
+  <div style="float: left; width: 10px; height: 100px;"></div>
+  <div>
+    <div style="float: left; width: 20px; height: 60px"></div>
+    <div style="float: right; width: 60px; height: 60px"></div>
+  </div>
+  <div>foobar foobar foobar</div>
+</div>