Title: [230299] trunk/Tools
Revision
230299
Author
za...@apple.com
Date
2018-04-05 08:21:15 -0700 (Thu, 05 Apr 2018)

Log Message

[LayoutReloaded] Collect floating boxes in inline formatting context and layout them first.
https://bugs.webkit.org/show_bug.cgi?id=184329

Reviewed by Antti Koivisto.

Let's do this for now. There might be some cases where this violates layout.

* LayoutReloaded/FormattingContext/FormattingContext.js:
(FormattingContext.prototype._outOfFlowDescendants):
(FormattingContext):
* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext.prototype.layout):
(InlineFormattingContext.prototype._handleFloatingBoxes):
(InlineFormattingContext.prototype._handleFloatingBox):
(InlineFormattingContext.prototype._floatingBoxes):
(InlineFormattingContext):
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/multiple-left-floats-on-line-simple.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/Tools/ChangeLog (230298 => 230299)


--- trunk/Tools/ChangeLog	2018-04-05 09:01:26 UTC (rev 230298)
+++ trunk/Tools/ChangeLog	2018-04-05 15:21:15 UTC (rev 230299)
@@ -1,3 +1,24 @@
+2018-04-05  Zalan Bujtas  <za...@apple.com>
+
+        [LayoutReloaded] Collect floating boxes in inline formatting context and layout them first.
+        https://bugs.webkit.org/show_bug.cgi?id=184329
+
+        Reviewed by Antti Koivisto.
+
+        Let's do this for now. There might be some cases where this violates layout.
+
+        * LayoutReloaded/FormattingContext/FormattingContext.js:
+        (FormattingContext.prototype._outOfFlowDescendants):
+        (FormattingContext):
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext.prototype.layout):
+        (InlineFormattingContext.prototype._handleFloatingBoxes):
+        (InlineFormattingContext.prototype._handleFloatingBox):
+        (InlineFormattingContext.prototype._floatingBoxes):
+        (InlineFormattingContext):
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/multiple-left-floats-on-line-simple.html: Added.
+
 2018-04-04  Youenn Fablet  <you...@apple.com>
 
         WebRTC data channel only applications require capture permissions for direct connections

Modified: trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js (230298 => 230299)


--- trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js	2018-04-05 09:01:26 UTC (rev 230298)
+++ trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js	2018-04-05 15:21:15 UTC (rev 230299)
@@ -148,5 +148,4 @@
         }
         return outOfFlowBoxes;
     }
-
 }

Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (230298 => 230299)


--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js	2018-04-05 09:01:26 UTC (rev 230298)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js	2018-04-05 15:21:15 UTC (rev 230299)
@@ -37,7 +37,10 @@
         // This is a post-order tree traversal layout.
         // The root container layout is done in the formatting context it lives in, not that one it creates, so let's start with the first child.
         this.m_line = this._createNewLine();
-        this._addToLayoutQueue(this.formattingRoot().firstChild());
+        // Collect floating boxes and layout them first.
+        this._handleFloatingBoxes();
+        //
+        this._addToLayoutQueue(this.formattingRoot().firstInFlowChild());
         while (this._descendantNeedsLayout()) {
             // Travers down on the descendants until we find a leaf node.
             while (true) {
@@ -48,18 +51,16 @@
                 }
                 if (!layoutBox.isContainer() || !layoutBox.hasChild())
                     break;
-                this._addToLayoutQueue(layoutBox.firstChild());
+                this._addToLayoutQueue(layoutBox.firstInFlowChild());
             }
             while (this._descendantNeedsLayout()) {
                 let layoutBox = this._nextInLayoutQueue();
                 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()) {
-                    this._addToLayoutQueue(layoutBox.nextSibling());
+                if (layoutBox.nextInFlowSibling()) {
+                    this._addToLayoutQueue(layoutBox.nextInFlowSibling());
                     break;
                 }
             }
@@ -88,7 +89,17 @@
         }
     }
 
+    _handleFloatingBoxes() {
+        let floatingBoxes = this._floatingBoxes();
+        for (let floatingBox of floatingBoxes) {
+            this._addToLayoutQueue(floatingBox);
+            this._handleFloatingBox(floatingBox);
+            this._removeFromLayoutQueue(floatingBox);
+        }
+    }
+
     _handleFloatingBox(floatingBox) {
+        this.layoutState().layout(floatingBox);
         this._computeFloatingWidth(floatingBox);
         this._computeFloatingHeight(floatingBox);
         this.floatingContext().computePosition(floatingBox);
@@ -141,5 +152,33 @@
             return root.contentBox().left();
         return verticalPosition - rootLeft;
      }
+
+    _floatingBoxes() {
+        ASSERT(this.formattingRoot().firstChild());
+        // FIXME: This is highly inefficient but will do for now.
+        let floatingBoxes = new Array();
+        let stack = new Array();
+        stack.push(this.formattingRoot().firstChild());
+        while (stack.length) {
+            while (true) {
+                let box = stack[stack.length - 1];
+                if (box.isFloatingPositioned())
+                    floatingBoxes.push(box);
+                if (box.establishesFormattingContext())
+                    break;
+                if (!box.isContainer() || !box.hasChild())
+                    break;
+                stack.push(box.firstChild());
+            }
+            while (stack.length) {
+                let box = stack.pop();
+                if (box.nextSibling()) {
+                    stack.push(box.nextSibling());
+                    break;
+                }
+            }
+        }
+        return floatingBoxes;
+    }
 }
 

Modified: trunk/Tools/LayoutReloaded/test/index.html (230298 => 230299)


--- trunk/Tools/LayoutReloaded/test/index.html	2018-04-05 09:01:26 UTC (rev 230298)
+++ trunk/Tools/LayoutReloaded/test/index.html	2018-04-05 15:21:15 UTC (rev 230299)
@@ -67,7 +67,8 @@
     "inline-formatting-context-with-floats.html",
     "inline-with-floats-right-left-simple.html",
     "inline-formatting-context-with-floats2.html",
-    "float-is-inside-inline-formatting-context-simple.html"
+    "float-is-inside-inline-formatting-context-simple.html",
+    "multiple-left-floats-on-line-simple.html"
 ];
 
 let debugThis = [];

Added: trunk/Tools/LayoutReloaded/test/multiple-left-floats-on-line-simple.html (0 => 230299)


--- trunk/Tools/LayoutReloaded/test/multiple-left-floats-on-line-simple.html	                        (rev 0)
+++ trunk/Tools/LayoutReloaded/test/multiple-left-floats-on-line-simple.html	2018-04-05 15:21:15 UTC (rev 230299)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<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>
+</body>
+</html>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to