[LayoutReloaded] Find the correct left edge for a line when floating boxes are in...
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 5 Apr 2018 15:50:26 +0000 (15:50 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 5 Apr 2018 15:50:26 +0000 (15:50 +0000)
https://bugs.webkit.org/show_bug.cgi?id=184330

Reviewed by Antti Koivisto.

In inline formatting context, the floating boxes can come from the parent (block) formatting context. Let's
take them into account when computing the line edges.

* LayoutReloaded/FormattingContext/FloatingContext.js:
(FloatingContext.prototype.left):
(FloatingContext.prototype.right):
* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext.prototype._createNewLine):
(InlineFormattingContext.prototype._mapFloatingVerticalPosition):
(InlineFormattingContext.prototype._mapFloatingHorizontalPosition):
(InlineFormattingContext.prototype._mapFloatingPosition): Deleted.
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html: Added.

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

Tools/ChangeLog
Tools/LayoutReloaded/FormattingContext/FloatingContext.js
Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js
Tools/LayoutReloaded/test/index.html
Tools/LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html [new file with mode: 0644]

index 8feb0e0..dd1ce0b 100644 (file)
@@ -1,5 +1,26 @@
 2018-04-05  Zalan Bujtas  <zalan@apple.com>
 
+        [LayoutReloaded] Find the correct left edge for a line when floating boxes are in parent formatting context.
+        https://bugs.webkit.org/show_bug.cgi?id=184330
+
+        Reviewed by Antti Koivisto.
+
+        In inline formatting context, the floating boxes can come from the parent (block) formatting context. Let's
+        take them into account when computing the line edges.
+
+        * LayoutReloaded/FormattingContext/FloatingContext.js:
+        (FloatingContext.prototype.left):
+        (FloatingContext.prototype.right):
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext.prototype._createNewLine):
+        (InlineFormattingContext.prototype._mapFloatingVerticalPosition):
+        (InlineFormattingContext.prototype._mapFloatingHorizontalPosition):
+        (InlineFormattingContext.prototype._mapFloatingPosition): Deleted.
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html: Added.
+
+2018-04-05  Zalan Bujtas  <zalan@apple.com>
+
         [LayoutReloaded] Collect floating boxes in inline formatting context and layout them first.
         https://bugs.webkit.org/show_bug.cgi?id=184329
 
index 01fa850..f3f6449 100644 (file)
@@ -46,18 +46,18 @@ class FloatingContext {
 
     left(verticalPosition) {
         // Relative to the formatting context's root.
-        let leftFloatings = this._leftFloatings();
-        if (!leftFloatings.length)
+        let leftFloating = this._findFloatingAtVerticalPosition(verticalPosition, this._leftFloatings());
+        if (!leftFloating)
             return Number.NaN;
-        return this._mapDisplayMarginBoxToFormattingRoot(leftFloatings[leftFloatings.length - 1]).right();
+        return this._mapDisplayMarginBoxToFormattingRoot(leftFloating).right();
     }
 
     right(verticalPosition) {
         // Relative to the formatting context's root.
-        let rightFloatings = this._rightFloatings();
-        if (!rightFloatings.length)
+        let rightFloating = this._findFloatingAtVerticalPosition(verticalPosition, this._rightFloatings());
+        if (!rightFloating)
             return Number.NaN;
-        return this._mapDisplayMarginBoxToFormattingRoot(rightFloatings[rightFloatings.length - 1]).left();
+        return this._mapDisplayMarginBoxToFormattingRoot(rightFloating).left();
     }
 
     bottom() {
index 89c1471..2a034d0 100644 (file)
@@ -119,9 +119,14 @@ class InlineFormattingContext extends FormattingContext {
 
     _createNewLine() {
         let lineRect = this.displayBox(this.formattingRoot()).contentBox();
-        let floatingLeft = this._mapFloatingPosition(this.floatingContext().left());
-        let floatingRight = this._mapFloatingPosition(this.floatingContext().right());
-        // TODO: Check the case when the containing block is narrower than the floats.
+        let lines = this.formattingState().lines();
+        if (lines.length)
+            lineRect.setTop(lines[lines.length - 1].rect().bottom());
+        // Find floatings on this line.
+        // Offset the vertical position if the floating context belongs to the parent formatting context.
+        let lineTopInFloatingPosition = this._mapFloatingVerticalPosition(lineRect.top());
+        let floatingLeft = this._mapFloatingHorizontalPosition(this.floatingContext().left(lineTopInFloatingPosition));
+        let floatingRight = this._mapFloatingHorizontalPosition(this.floatingContext().right(lineTopInFloatingPosition));
         if (!Number.isNaN(floatingLeft) && !Number.isNaN(floatingRight)) {
             // Floats on both sides.
             lineRect.setLeft(floatingLeft);
@@ -131,26 +136,33 @@ class InlineFormattingContext extends FormattingContext {
         else if (!Number.isNaN(floatingRight))
             lineRect.setRight(floatingRight);
 
-        let lines = this.formattingState().lines();
-        if (lines.length)
-            lineRect.setTop(lines[lines.length - 1].rect().bottom());
         return new Line(lineRect.topLeft(), Utils.computedLineHeight(this.formattingRoot().node()), lineRect.width());
     }
 
-    _mapFloatingPosition(verticalPosition) {
-        if (Number.isNaN(verticalPosition))
-            return verticalPosition;
+    _mapFloatingVerticalPosition(verticalPosition) {
         // Floats position are relative to their formatting root (which might not be this formatting root).
         let root = this.displayBox(this.formattingRoot());
         let floatFormattingRoot = this.displayBox(this.floatingContext().formattingRoot());
         if (root == floatFormattingRoot)
             return verticalPosition;
+        let rootTop = Utils.mapPosition(root.topLeft(), root, floatFormattingRoot).top();
+        return rootTop += root.contentBox().top();
+    }
+
+    _mapFloatingHorizontalPosition(horizontalPosition) {
+        if (Number.isNaN(horizontalPosition))
+            return horizontalPosition;
+        // Floats position are relative to their formatting root (which might not be this formatting root).
+        let root = this.displayBox(this.formattingRoot());
+        let floatFormattingRoot = this.displayBox(this.floatingContext().formattingRoot());
+        if (root == floatFormattingRoot)
+            return horizontalPosition;
         let rootLeft = Utils.mapPosition(root.topLeft(), root, floatFormattingRoot).left();
         rootLeft += root.contentBox().left();
         // The left most float is to the right of the root.
-        if (rootLeft >= verticalPosition)
+        if (rootLeft >= horizontalPosition)
             return root.contentBox().left();
-        return verticalPosition - rootLeft;
+        return horizontalPosition - rootLeft;
      }
 
     _floatingBoxes() {
index 3279b1a..2f74079 100644 (file)
@@ -68,7 +68,8 @@ let testFiles = [
     "inline-with-floats-right-left-simple.html",
     "inline-formatting-context-with-floats2.html",
     "float-is-inside-inline-formatting-context-simple.html",
-    "multiple-left-floats-on-line-simple.html"
+    "multiple-left-floats-on-line-simple.html",
+    "multiple-left-floats-on-line-from-parent-formatting-context.html"
 ];
 
 let debugThis = [];
diff --git a/Tools/LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html b/Tools/LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html
new file mode 100644 (file)
index 0000000..cf1e158
--- /dev/null
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div>foobar foobar<div style="float: left; width: 10px; height: 10px;"></div><div style="float: left; width: 10px; height: 10px;"></div><div style="float: left; width: 10px; height: 10px;"></div></div>
+<div><div style="float: left; width: 10px; height: 10px;"></div>foobar foobar<div style="float: left; width: 10px; height: 10px;"></div><div style="float: left; width: 10px; height: 10px;"></div></div>
+<div><div style="float: left; width: 10px; height: 10px;"></div><div style="float: left; width: 10px; height: 10px;"></div>foobar foobar<div style="float: left; width: 10px; height: 10px;"></div></div>
+</body>
+</html>