Title: [230373] trunk/Tools
Revision
230373
Author
za...@apple.com
Date
2018-04-07 22:27:36 -0700 (Sat, 07 Apr 2018)

Log Message

[LayoutReloaded] Add support for InlineContainer
https://bugs.webkit.org/show_bug.cgi?id=184394

Reviewed by Antti Koivisto.

* LayoutReloaded/FormattingContext/FormattingContext.js:
(FormattingContext.prototype._addToLayoutQueue):
* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext.prototype.layout):
(InlineFormattingContext.prototype._handleInlineContent):
(InlineFormattingContext.prototype._handleFloatingBox):
(InlineFormattingContext.prototype._adjustLineForInlineContainerStart):
(InlineFormattingContext.prototype._adjustLineForInlineContainerEnd):
(InlineFormattingContext.prototype._placeInFlowPositionedChildren):
(InlineFormattingContext.prototype._placeOutOfFlowDescendants):
(InlineFormattingContext.prototype._createNewLine):
(InlineFormattingContext.prototype._handleContent): Deleted.
* LayoutReloaded/LayoutState.js:
(LayoutState.prototype._createFormattingState):
* LayoutReloaded/LayoutTree/Box.js:
(Layout.Box.prototype.isContainer):
(Layout.Box.prototype.isInlineContainer):
(Layout.Box.prototype.isInlineBox):
* LayoutReloaded/LayoutTree/Container.js:
(Layout.Container.prototype.isContainer): Deleted.
* LayoutReloaded/LayoutTree/InlineContainer.js: Added.
(Layout.InlineContainer):
* LayoutReloaded/TreeBuilder.js:
(TreeBuilder.prototype._createAndAttachBox):
* LayoutReloaded/Utils.js:
(Utils._dumpBox):
(Utils.precisionRound):
(Utils):
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/inline-content-simple2.html: Added.
* LayoutReloaded/test/inline-floating1.html: Added.
* LayoutReloaded/test/inline-formatting-context-floats1.html: Added.
* LayoutReloaded/test/inline-formatting-context-floats2.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/Tools/ChangeLog (230372 => 230373)


--- trunk/Tools/ChangeLog	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/ChangeLog	2018-04-08 05:27:36 UTC (rev 230373)
@@ -1,3 +1,44 @@
+2018-04-07  Zalan Bujtas  <za...@apple.com>
+
+        [LayoutReloaded] Add support for InlineContainer
+        https://bugs.webkit.org/show_bug.cgi?id=184394
+
+        Reviewed by Antti Koivisto.
+
+        * LayoutReloaded/FormattingContext/FormattingContext.js:
+        (FormattingContext.prototype._addToLayoutQueue):
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext.prototype.layout):
+        (InlineFormattingContext.prototype._handleInlineContent):
+        (InlineFormattingContext.prototype._handleFloatingBox):
+        (InlineFormattingContext.prototype._adjustLineForInlineContainerStart):
+        (InlineFormattingContext.prototype._adjustLineForInlineContainerEnd):
+        (InlineFormattingContext.prototype._placeInFlowPositionedChildren):
+        (InlineFormattingContext.prototype._placeOutOfFlowDescendants):
+        (InlineFormattingContext.prototype._createNewLine):
+        (InlineFormattingContext.prototype._handleContent): Deleted.
+        * LayoutReloaded/LayoutState.js:
+        (LayoutState.prototype._createFormattingState):
+        * LayoutReloaded/LayoutTree/Box.js:
+        (Layout.Box.prototype.isContainer):
+        (Layout.Box.prototype.isInlineContainer):
+        (Layout.Box.prototype.isInlineBox):
+        * LayoutReloaded/LayoutTree/Container.js:
+        (Layout.Container.prototype.isContainer): Deleted.
+        * LayoutReloaded/LayoutTree/InlineContainer.js: Added.
+        (Layout.InlineContainer):
+        * LayoutReloaded/TreeBuilder.js:
+        (TreeBuilder.prototype._createAndAttachBox):
+        * LayoutReloaded/Utils.js:
+        (Utils._dumpBox):
+        (Utils.precisionRound):
+        (Utils):
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/inline-content-simple2.html: Added.
+        * LayoutReloaded/test/inline-floating1.html: Added.
+        * LayoutReloaded/test/inline-formatting-context-floats1.html: Added.
+        * LayoutReloaded/test/inline-formatting-context-floats2.html: Added.
+
 2018-04-07  Timothy Hatcher  <timo...@apple.com>
 
         Use the system's link color when system appearance is desired for a WebView.

Modified: trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js (230372 => 230373)


--- trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js	2018-04-08 05:27:36 UTC (rev 230373)
@@ -77,6 +77,8 @@
     }
 
     _addToLayoutQueue(layoutBox) {
+        if (!layoutBox)
+            return;
         // Initialize the corresponding display box.
         let displayBox = this.formattingState().createDisplayBox(layoutBox, this);
         if (layoutBox.node()) {

Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (230372 => 230373)


--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js	2018-04-08 05:27:36 UTC (rev 230373)
@@ -34,39 +34,42 @@
         // In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.
         if (!this.formattingRoot().firstChild())
             return;
-        // 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();
+        let inlineContainerStack = new Array();
         this._addToLayoutQueue(this.formattingRoot().firstInFlowOrFloatChild());
         while (this._descendantNeedsLayout()) {
-            // Travers down on the descendants until we find a leaf node.
-            while (true) {
-                let layoutBox = this._nextInLayoutQueue();
-                if (layoutBox.establishesFormattingContext()) {
-                    this.layoutState().layout(layoutBox);
-                    break;
-                }
-                if (!layoutBox.isContainer() || !layoutBox.hasInFlowOrFloatChild())
-                    break;
-                this._addToLayoutQueue(layoutBox.firstInFlowOrFloatChild());
-            }
-            while (this._descendantNeedsLayout()) {
-                let layoutBox = this._nextInLayoutQueue();
-                this._handleContent(layoutBox);
-                // We are done with laying out this box.
-                this._removeFromLayoutQueue(layoutBox);
-                if (layoutBox.nextInFlowOrFloatSibling()) {
+            let layoutBox = this._nextInLayoutQueue();
+            if (layoutBox.isInlineContainer()) {
+                if (inlineContainerStack.indexOf(layoutBox) == -1) {
+                    inlineContainerStack.push(layoutBox);
+                    this._adjustLineForInlineContainerStart();
+                    if (layoutBox.establishesFormattingContext())
+                        this.layoutState().layout(layoutBox);
+                    else
+                        this._addToLayoutQueue(layoutBox.firstInFlowOrFloatChild());
+                } else {
+                    inlineContainerStack.pop(layoutBox);
+                    this._adjustLineForInlineContainerEnd();
+                    this._removeFromLayoutQueue(layoutBox);
                     this._addToLayoutQueue(layoutBox.nextInFlowOrFloatSibling());
-                    break;
+                    // Place the inflow positioned children.
+                    this._placeInFlowPositionedChildren(this.formattingRoot());
                 }
+                continue;
             }
+            this._handleInlineContent(layoutBox);
+            this._removeFromLayoutQueue(layoutBox);
+            this._addToLayoutQueue(layoutBox.nextInFlowOrFloatSibling());
         }
-        //this._placeOutOfFlowDescendants(this.formattingRoot());
+        // Place the inflow positioned children.
+        this._placeInFlowPositionedChildren(this.formattingRoot());
+        // And take care of out-of-flow boxes as the final step.
+        this._placeOutOfFlowDescendants(this.formattingRoot());
         this._commitLine();
    }
 
-    _handleContent(layoutBox) {
-        if (layoutBox instanceof Layout.InlineBox) {
+    _handleInlineContent(layoutBox) {
+        if (layoutBox.isInlineBox()) {
             this._handleInlineBox(layoutBox);
             return;
         }
@@ -101,6 +104,7 @@
 
     _handleFloatingBox(floatingBox) {
         this._computeFloatingWidth(floatingBox);
+        this.layoutState().layout(floatingBox);
         this._computeFloatingHeight(floatingBox);
         let displayBox = this.displayBox(floatingBox);
         // Position this float statically first, the floating context will figure it out the final position.
@@ -115,6 +119,22 @@
         this._line().addFloatingBox(displayBox, Utils.isFloatingLeft(floatingBox));
     }
 
+    _adjustLineForInlineContainerStart(inlineContainer) {
+
+    }
+
+    _adjustLineForInlineContainerEnd(inlineContainer) {
+
+    }
+
+    _placeInFlowPositionedChildren(container) {
+
+    }
+
+    _placeOutOfFlowDescendants(container) {
+
+    }
+
     _commitLine() {
         if (this._line().isEmpty())
             return;
@@ -140,9 +160,10 @@
             // Floats on both sides.
             lineRect.setLeft(floatingLeft);
             lineRect.setWidth(floatingRight - floatingLeft);
-        } else if (!Number.isNaN(floatingLeft))
+        } else if (!Number.isNaN(floatingLeft)) {
             lineRect.setLeft(floatingLeft);
-        else if (!Number.isNaN(floatingRight))
+            lineRect.shrinkBy(new LayoutSize(floatingLeft, 0));
+        } else if (!Number.isNaN(floatingRight))
             lineRect.setRight(floatingRight);
 
         return new Line(lineRect.topLeft(), Utils.computedLineHeight(this.formattingRoot().node()), lineRect.width());

Modified: trunk/Tools/LayoutReloaded/LayoutState.js (230372 => 230373)


--- trunk/Tools/LayoutReloaded/LayoutState.js	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/LayoutReloaded/LayoutState.js	2018-04-08 05:27:36 UTC (rev 230373)
@@ -37,10 +37,10 @@
 
     _createFormattingState(formattingRoot) {
         ASSERT(formattingRoot.establishesFormattingContext());
+        if (formattingRoot.establishesInlineFormattingContext())
+            return new InlineFormattingState(formattingRoot, this);
         if (formattingRoot.establishesBlockFormattingContext())
             return new BlockFormattingState(formattingRoot, this);
-        if (formattingRoot.establishesInlineFormattingContext())
-            return new InlineFormattingState(formattingRoot, this);
         ASSERT_NOT_REACHED();
         return null;
     }

Modified: trunk/Tools/LayoutReloaded/LayoutTree/Box.js (230372 => 230373)


--- trunk/Tools/LayoutReloaded/LayoutTree/Box.js	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/LayoutReloaded/LayoutTree/Box.js	2018-04-08 05:27:36 UTC (rev 230373)
@@ -108,9 +108,17 @@
     }
 
     isContainer() {
-        return false;
+        return this instanceof Layout.Container
     }
 
+    isInlineContainer() {
+        return this instanceof Layout.InlineContainer
+    }
+
+    isInlineBox() {
+        return this instanceof Layout.InlineBox;
+    }
+
     isBlockLevelBox() {
         return Utils.isBlockLevelElement(this.node());
     }

Modified: trunk/Tools/LayoutReloaded/LayoutTree/Container.js (230372 => 230373)


--- trunk/Tools/LayoutReloaded/LayoutTree/Container.js	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/LayoutReloaded/LayoutTree/Container.js	2018-04-08 05:27:36 UTC (rev 230373)
@@ -30,10 +30,6 @@
         this.m_lastChild = null;
     }
 
-    isContainer() {
-        return true;
-    }
-
     setFirstChild(firstChild) {
         this.m_firstChild = firstChild;
     }

Added: trunk/Tools/LayoutReloaded/LayoutTree/InlineContainer.js (0 => 230373)


--- trunk/Tools/LayoutReloaded/LayoutTree/InlineContainer.js	                        (rev 0)
+++ trunk/Tools/LayoutReloaded/LayoutTree/InlineContainer.js	2018-04-08 05:27:36 UTC (rev 230373)
@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2018 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+Layout.InlineContainer = class InlineContainer extends Layout.Container {
+    constructor(node, id) {
+        super(node, id);
+    }
+}

Modified: trunk/Tools/LayoutReloaded/TreeBuilder.js (230372 => 230373)


--- trunk/Tools/LayoutReloaded/TreeBuilder.js	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/LayoutReloaded/TreeBuilder.js	2018-04-08 05:27:36 UTC (rev 230373)
@@ -67,7 +67,7 @@
         let parentBox = this._findBox(initialBlockContainer, parentId);
         // WebKit does not construct anonymous inline container for text if the text
         // is a direct child of a block container.
-        if (text && !parentBox.isInlineContainer) {
+        if (text) {
             box = new Layout.InlineBox(null, -1);
             box.setIsAnonymous();
             box.setText(text);

Modified: trunk/Tools/LayoutReloaded/Utils.js (230372 => 230373)


--- trunk/Tools/LayoutReloaded/Utils.js	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/LayoutReloaded/Utils.js	2018-04-08 05:27:36 UTC (rev 230373)
@@ -556,10 +556,12 @@
         // Skip anonymous boxes for now -This is the case where WebKit does not generate an anon inline container for text content where the text is a direct child
         // of a block container.
         let indentation = " ".repeat(level);
-        if (box instanceof Layout.InlineBox) {
+        if (box.isInlineBox()) {
             if (box.text())
                 return indentation + "#text RenderText\n";
         }
+        if (box.name() == "RenderInline")
+            return indentation + box.node().tagName + " " + box.name() + "\n";
         if (box.isAnonymous())
             return "";
         let displayBox = Utils._findDisplayBox(layoutState, box);
@@ -597,7 +599,7 @@
     }
 
     static precisionRound(number, precision) {
-        var factor = Math.pow(10, precision);
+        let factor = Math.pow(10, precision);
         return Math.round(number * factor) / factor;
     }
 }

Modified: trunk/Tools/LayoutReloaded/test/index.html (230372 => 230373)


--- trunk/Tools/LayoutReloaded/test/index.html	2018-04-08 01:33:03 UTC (rev 230372)
+++ trunk/Tools/LayoutReloaded/test/index.html	2018-04-08 05:27:36 UTC (rev 230373)
@@ -73,7 +73,11 @@
     "inline-with-floats-when-they-dont-fit.html",
     "inline-with-right-float-simple.html",
     "inline-with-right-floats2.html",
-    "inline-with-right-floats3.html"
+    "inline-with-right-floats3.html",
+    "inline-content-simple2.html",
+    "inline-floating1.html",
+    "inline-formatting-context-floats1.html",
+    "inline-formatting-context-floats2.html"
 ];
 
 let debugThis = [];
@@ -94,6 +98,7 @@
 addJS("../LayoutTree/Container.js");
 addJS("../LayoutTree/BlockContainer.js");
 addJS("../LayoutTree/InitialBlockContainer.js");
+addJS("../LayoutTree/InlineContainer.js");
 addJS("../LayoutTree/InlineBox.js");
 addJS("../LayoutTree/Text.js");
 addJS("../DisplayTree/Box.js");

Added: trunk/Tools/LayoutReloaded/test/inline-content-simple2.html (0 => 230373)


--- trunk/Tools/LayoutReloaded/test/inline-content-simple2.html	                        (rev 0)
+++ trunk/Tools/LayoutReloaded/test/inline-content-simple2.html	2018-04-08 05:27:36 UTC (rev 230373)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+moo<span>foobar foobar foobar</span>loo
+</body>
+</html>

Added: trunk/Tools/LayoutReloaded/test/inline-floating1.html (0 => 230373)


--- trunk/Tools/LayoutReloaded/test/inline-floating1.html	                        (rev 0)
+++ trunk/Tools/LayoutReloaded/test/inline-floating1.html	2018-04-08 05:27:36 UTC (rev 230373)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+    margin: 0px;
+    padding: 8px;
+}
+</style>
+</head>
+<body>
+<div style="float: left; width: 20px; height: 100px;"></div>
+<div style="float: left; width: 20px; height: 10px;"></div>
+<div style="float: right; width: 500px; height: 10px;"></div>
+
+<div style="height: 30px; width: 200px;">
+  <span style="float: left; width: 100px; height: 40px;">fooooooooo bar</span>foo
+</div>
+<div style="float: left; height: 300px; width: 500px;"></div>
+
+</body>
+</html>

Added: trunk/Tools/LayoutReloaded/test/inline-formatting-context-floats1.html (0 => 230373)


--- trunk/Tools/LayoutReloaded/test/inline-formatting-context-floats1.html	                        (rev 0)
+++ trunk/Tools/LayoutReloaded/test/inline-formatting-context-floats1.html	2018-04-08 05:27:36 UTC (rev 230373)
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+    margin: 0px;
+    padding: 8px;
+}
+</style>
+</head>
+<body>
+<div style="width: 10px; height: 50px; float: left"></div>
+<div style="width: 100px;">
+<span>foobar</span>foobar 
+<span>foobar</span>foobar 
+</div>
+</body>
+</html>

Added: trunk/Tools/LayoutReloaded/test/inline-formatting-context-floats2.html (0 => 230373)


--- trunk/Tools/LayoutReloaded/test/inline-formatting-context-floats2.html	                        (rev 0)
+++ trunk/Tools/LayoutReloaded/test/inline-formatting-context-floats2.html	2018-04-08 05:27:36 UTC (rev 230373)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+    margin: 0px;
+    padding: 8px;
+}
+div { border: 0px solid green; }
+</style>
+</head>
+<body>
+<div style="width: 70px; height: 30px; float: left"></div>
+<div style="width: 100px;">foo bar foobar foobar</div>
+</body>
+</html>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to