[LayoutReloaded] Introduce floating to InlineFormattingContext

https://bugs.webkit.org/show_bug.cgi?id=184288 Reviewed by Antti Koivisto. * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js: (BlockFormattingContext.prototype._computeFloatingWidth): Deleted. (BlockFormattingContext.prototype._computeFloatingHeight): Deleted. * LayoutReloaded/FormattingContext/FormattingContext.js: (FormattingContext.prototype._computeFloatingWidth): (FormattingContext.prototype._computeFloatingHeight): * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js: (InlineFormattingContext.prototype.layout): (InlineFormattingContext.prototype._handleFloatingBox): * LayoutReloaded/FormattingContext/InlineFormatting/Line.js: (Line.prototype.addFloatingBox): (Line): * LayoutReloaded/test/float-is-inside-inline-formatting-context-simple.html: Added. * LayoutReloaded/test/index.html: Canonical link: https://commits.webkit.org/199840@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@230243 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Apr 4, 2018 · 25138e5 · 25138e5
1 parent 8777c92
commit 25138e5
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 12 deletions.
diff --git a/Tools/ChangeLog b/Tools/ChangeLog
@@ -1,3 +1,25 @@
+2018-04-03  Zalan Bujtas  <zalan@apple.com>
+
+        [LayoutReloaded] Introduce floating to InlineFormattingContext
+        https://bugs.webkit.org/show_bug.cgi?id=184288
+
+        Reviewed by Antti Koivisto.
+
+        * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
+        (BlockFormattingContext.prototype._computeFloatingWidth): Deleted.
+        (BlockFormattingContext.prototype._computeFloatingHeight): Deleted.
+        * LayoutReloaded/FormattingContext/FormattingContext.js:
+        (FormattingContext.prototype._computeFloatingWidth):
+        (FormattingContext.prototype._computeFloatingHeight):
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext.prototype.layout):
+        (InlineFormattingContext.prototype._handleFloatingBox):
+        * LayoutReloaded/FormattingContext/InlineFormatting/Line.js:
+        (Line.prototype.addFloatingBox):
+        (Line):
+        * LayoutReloaded/test/float-is-inside-inline-formatting-context-simple.html: Added.
+        * LayoutReloaded/test/index.html:
+
 2018-04-03  Youenn Fablet  <youenn@apple.com>
 
         NetworkResourceLoader does not need to expose all redirect response headers

diff --git a/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js b/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js
@@ -178,11 +178,6 @@ class BlockFormattingContext extends FormattingContext {
         this.displayBox(layoutBox).setWidth(width);
     }
 
-    _computeFloatingWidth(layoutBox) {
-        // FIXME: missing cases
-        this.displayBox(layoutBox).setWidth(Utils.width(layoutBox) + Utils.computedHorizontalBorderAndPadding(layoutBox.node()));
-    }
-
     _computeInFlowWidth(layoutBox) {
         if (Utils.isWidthAuto(layoutBox))
             return this.displayBox(layoutBox).setWidth(this._horizontalConstraint(layoutBox));
@@ -226,11 +221,6 @@ class BlockFormattingContext extends FormattingContext {
         this.displayBox(layoutBox).setHeight(height);
     }
 
-    _computeFloatingHeight(layoutBox) {
-        // FIXME: missing cases
-        this.displayBox(layoutBox).setHeight(Utils.height(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox.node()));
-    }
-
     _computeInFlowHeight(layoutBox) {
         if (Utils.isHeightAuto(layoutBox)) {
             // Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored,

diff --git a/Tools/LayoutReloaded/FormattingContext/FormattingContext.js b/Tools/LayoutReloaded/FormattingContext/FormattingContext.js
@@ -105,6 +105,16 @@ class FormattingContext {
         return this.formattingState().displayBox(layoutBox);
     }
 
+    _computeFloatingWidth(layoutBox) {
+        // FIXME: missing cases
+        this.displayBox(layoutBox).setWidth(Utils.width(layoutBox) + Utils.computedHorizontalBorderAndPadding(layoutBox.node()));
+    }
+
+    _computeFloatingHeight(layoutBox) {
+        // FIXME: missing cases
+        this.displayBox(layoutBox).setHeight(Utils.height(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox.node()));
+    }
+
     _outOfFlowDescendants() {
         // FIXME: This is highly inefficient but will do for now.
         // 1. Collect all the out-of-flow descendants first.

diff --git a/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js b/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js
@@ -52,7 +52,10 @@ class InlineFormattingContext extends FormattingContext {
             }
             while (this._descendantNeedsLayout()) {
                 let layoutBox = this._nextInLayoutQueue();
-                this._handleInlineBox(layoutBox);
+                if (layoutBox instanceof Layout.InlineBox)
+                    this._handleInlineBox(layoutBox);
+                else if (layoutBox.isFloatingPositioned())
+                    this._handleFloatingBox(layoutBox);
                 // We are done with laying out this box.
                 this._removeFromLayoutQueue(layoutBox);
                 if (layoutBox.nextSibling()) {
@@ -85,6 +88,13 @@ class InlineFormattingContext extends FormattingContext {
         }
     }
 
+    _handleFloatingBox(floatingBox) {
+        this._computeFloatingWidth(floatingBox);
+        this._computeFloatingHeight(floatingBox);
+        this.floatingContext().computePosition(floatingBox);
+        this._line().addFloatingBox(this.displayBox(floatingBox).size());
+    }
+
     _commitLine() {
         if (this._line().isEmpty())
             return;

diff --git a/Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js b/Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js
@@ -53,4 +53,10 @@ class Line {
         this.m_lineBoxes.push({startPosition, endPosition, lineBoxRect});
         this.m_lineRect.growBy(new LayoutSize(size.width(), 0));
     }
+
+    addFloatingBox(size) {
+        // TODO: Add missing cases.
+        this.m_availableWidth -= size.width();
+        this.m_lineRect.moveBy(new LayoutSize(size.width(), 0));
+    }
 }
diff --git a/Tools/LayoutReloaded/test/float-is-inside-inline-formatting-context-simple.html b/Tools/LayoutReloaded/test/float-is-inside-inline-formatting-context-simple.html
@@ -0,0 +1 @@
+<div style="height: 1000px;"><div style="float: left; width: 50px; height: 50px;"></div>foobar</div>
diff --git a/Tools/LayoutReloaded/test/index.html b/Tools/LayoutReloaded/test/index.html
@@ -66,7 +66,8 @@
     "simple-multiline-text.html",
     "inline-formatting-context-with-floats.html",
     "inline-with-floats-right-left-simple.html",
-    "inline-formatting-context-with-floats2.html"
+    "inline-formatting-context-with-floats2.html",
+    "float-is-inside-inline-formatting-context-simple.html"
 ];
 
 let debugThis = [];