Changeset 230464 in webkit

Timestamp:

Apr 9, 2018 6:53:00 PM (6 years ago)

Author:

Alan Bujtas

Message:

[LayoutReloaded] Add support for inline-block.
​https://bugs.webkit.org/show_bug.cgi?id=184434

Reviewed by Antti Koivisto.

• LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:

(InlineFormattingContext):
(InlineFormattingContext.prototype.layout):
(InlineFormattingContext.prototype._handleInlineContainer):
(InlineFormattingContext.prototype._handleInlineBlockContainer):
(InlineFormattingContext.prototype._handleInlineContent):

• LayoutReloaded/FormattingContext/InlineFormatting/Line.js:

(Line.prototype.addInlineContainerBox):
(Line.prototype.addTextLineBox):
(Line):

• LayoutReloaded/LayoutTree/Box.js:

(Layout.Box.prototype.isInlineBlockBox):

• LayoutReloaded/Utils.js:

(LayoutRect.prototype.growHorizontally):
(Utils.isBlockContainerElement):
(Utils.isInlineBlockElement):
(Utils._dumpLines.):
(Utils._dumpLines):

• LayoutReloaded/test/index.html:
• LayoutReloaded/test/inline-block-with-fixed-width-height.html: Added.

Location:

trunk/Tools

Files:

• ChangeLog (modified) (1 diff)
• LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (modified) (3 diffs)
• LayoutReloaded/FormattingContext/InlineFormatting/Line.js (modified) (1 diff)
• LayoutReloaded/LayoutTree/Box.js (modified) (1 diff)
• LayoutReloaded/Utils.js (modified) (4 diffs)
• LayoutReloaded/test/index.html (modified) (1 diff)
• LayoutReloaded/test/inline-block-with-fixed-width-height.html (added)

trunk/Tools/ChangeLog

@@ +1 @@
+2018-04-09  Zalan Bujtas  <zalan@apple.com>
+
+        [LayoutReloaded] Add support for inline-block.
+        https://bugs.webkit.org/show_bug.cgi?id=184434
+
+        Reviewed by Antti Koivisto.
+
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext):
+        (InlineFormattingContext.prototype.layout):
+        (InlineFormattingContext.prototype._handleInlineContainer):
+        (InlineFormattingContext.prototype._handleInlineBlockContainer):
+        (InlineFormattingContext.prototype._handleInlineContent):
+        * LayoutReloaded/FormattingContext/InlineFormatting/Line.js:
+        (Line.prototype.addInlineContainerBox):
+        (Line.prototype.addTextLineBox):
+        (Line):
+        * LayoutReloaded/LayoutTree/Box.js:
+        (Layout.Box.prototype.isInlineBlockBox):
+        * LayoutReloaded/Utils.js:
+        (LayoutRect.prototype.growHorizontally):
+        (Utils.isBlockContainerElement):
+        (Utils.isInlineBlockElement):
+        (Utils._dumpLines.):
+        (Utils._dumpLines):
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/inline-block-with-fixed-width-height.html: Added.
+
 2018-04-09  Timothy Hatcher  <timothy@apple.com>
 

trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js

@@ -28 +28 @@
         super(inlineFormattingState);
         ASSERT(this.formattingRoot().isBlockContainerBox());
+        this.m_inlineContainerStack = new Array();
     }
 
@@ -40 +41 @@
         while (this._descendantNeedsLayout()) {
             let layoutBox = this._nextInLayoutQueue();
-            if (layoutBox.isInlineContainer()) {
-                if (inlineContainerStack.indexOf(layoutBox) == -1) {
-                    inlineContainerStack.push(layoutBox);
-                    this._adjustLineForInlineContainerStart(layoutBox);
-                    if (layoutBox.establishesFormattingContext())
-                        this.layoutState().layout(layoutBox);
-                    else
-                        this._addToLayoutQueue(layoutBox.firstInFlowOrFloatChild());
-                } else {
-                    inlineContainerStack.pop(layoutBox);
-                    this._adjustLineForInlineContainerEnd(layoutBox);
-                    this._removeFromLayoutQueue(layoutBox);
-                    this._addToLayoutQueue(layoutBox.nextInFlowOrFloatSibling());
-                    // Place the inflow positioned children.
-                    this._placeInFlowPositionedChildren(this.formattingRoot());
-                }
-                continue;
-            }
-            this._handleInlineContent(layoutBox);
-            this._removeFromLayoutQueue(layoutBox);
-            this._addToLayoutQueue(layoutBox.nextInFlowOrFloatSibling());
+            if (layoutBox.isInlineContainer())
+                this._handleInlineContainer(layoutBox);
+            else if (layoutBox.isInlineBlockBox())
+                this._handleInlineBlockContainer(layoutBox);
+            else
+                this._handleInlineContent(layoutBox);
         }
         // Place the inflow positioned children.
@@ -67 +53 @@
         this._placeOutOfFlowDescendants(this.formattingRoot());
         this._commitLine();
+        ASSERT(!this.m_inlineContainerStack.length);
    }
 
+    _handleInlineContainer(inlineContainer) {
+        ASSERT(!inlineContainer.establishesFormattingContext());
+        let inlineContainerStart = this.m_inlineContainerStack.indexOf(inlineContainer) == -1;
+        if (inlineContainerStart) {
+            this.m_inlineContainerStack.push(inlineContainer);
+            this._adjustLineForInlineContainerStart(inlineContainer);
+            this._addToLayoutQueue(inlineContainer.firstInFlowOrFloatChild());
+            // Keep the inline container in the layout stack so that we can finish it when all the descendants are all set.
+            return;
+        }
+        this.m_inlineContainerStack.pop(inlineContainer);
+        this._adjustLineForInlineContainerEnd(inlineContainer);
+        this._removeFromLayoutQueue(inlineContainer);
+        this._addToLayoutQueue(inlineContainer.nextInFlowOrFloatSibling());
+        // Place the in- and out-of-flow positioned children.
+        this._placeInFlowPositionedChildren(inlineContainer);
+        this._placeOutOfFlowDescendants(inlineContainer);
+    }
+
+
+    _handleInlineBlockContainer(inlineBlockContainer) {
+        ASSERT(inlineBlockContainer.establishesFormattingContext());
+        this._adjustLineForInlineContainerStart(inlineBlockContainer);
+        // TODO: auto width/height
+        let displayBox = this.displayBox(inlineBlockContainer);
+        displayBox.setWidth(Utils.width(inlineBlockContainer) + Utils.computedHorizontalBorderAndPadding(inlineBlockContainer.node()));
+        displayBox.setHeight(Utils.height(inlineBlockContainer) + Utils.computedVerticalBorderAndPadding(inlineBlockContainer.node()));
+        this.layoutState().layout(inlineBlockContainer);
+        this._line().addInlineContainerBox(displayBox.size());
+        this._adjustLineForInlineContainerEnd(inlineBlockContainer);
+        this._removeFromLayoutQueue(inlineBlockContainer);
+        this._addToLayoutQueue(inlineBlockContainer.nextInFlowOrFloatSibling());
+    }
+
     _handleInlineContent(layoutBox) {
-        if (layoutBox.isInlineBox()) {
+        if (layoutBox.isInlineBox())
             this._handleInlineBox(layoutBox);
-            return;
-        }
-        if (layoutBox.isFloatingPositioned()) {
+        else if (layoutBox.isFloatingPositioned())
             this._handleFloatingBox(layoutBox);
-            return;
-        }
-        ASSERT_NOT_REACHED();
+        else
+            ASSERT_NOT_REACHED();
+        this._removeFromLayoutQueue(layoutBox);
+        this._addToLayoutQueue(layoutBox.nextInFlowOrFloatSibling());
     }
 

trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js

@@ -63 +63 @@
     }
 
+    addInlineContainerBox(size) {
+        let width = size.width();
+        ASSERT(width <= this.m_availableWidth);
+        this.shrink(width);
+        let lineBoxRect = new LayoutRect(this.rect().topRight(), size);
+        this.m_lineBoxes.push({lineBoxRect});
+        this.m_lineRect.growHorizontally(width);
+    }
+
     addTextLineBox(startPosition, endPosition, size) {
-        ASSERT(size.width() <= this.m_availableWidth);
-        this.m_availableWidth -= size.width();
+        let width = size.width();
+        ASSERT(width <= this.m_availableWidth);
+        this.shrink(width);
         // TODO: use the actual height instead of the line height.
-        let lineBoxRect = new LayoutRect(this.rect().topRight(), new LayoutSize(size.width(), this.rect().height()));
+        let lineBoxRect = new LayoutRect(this.rect().topRight(), new LayoutSize(width, this.rect().height()));
         this.m_lineBoxes.push({startPosition, endPosition, lineBoxRect});
-        this.m_lineRect.growBy(new LayoutSize(size.width(), 0));
+        this.m_lineRect.growHorizontally(width);
     }
 }

trunk/Tools/LayoutReloaded/LayoutTree/Box.js

@@ -128 +128 @@
     }
 
+    isInlineBlockBox() {
+        return Utils.isInlineBlockElement(this.node());
+    }
+
     isInlineLevelBox() {
         return Utils.isInlineLevelElement(this.node());

trunk/Tools/LayoutReloaded/Utils.js

@@ -209 +209 @@
     }
 
+    growHorizontally(distance) {
+        this.m_size.setWidth(this.m_size.width() + distance);
+    }
+
     moveHorizontally(distance) {
         this.m_topLeft.shiftLeft(distance);
@@ -424 +428 @@
 
     static isBlockContainerElement(node) {
-        if (node.nodeType != Node.ELEMENT_NODE)
+        if (!node || node.nodeType != Node.ELEMENT_NODE)
             return false;
         let display = window.getComputedStyle(node).display;
@@ -438 +442 @@
         let display = window.getComputedStyle(node).display;
         return  display == "table" || display == "inline-table";
+    }
+
+    static isInlineBlockElement(node) {
+        if (!node || node.nodeType != Node.ELEMENT_NODE)
+            return false;
+        let display = window.getComputedStyle(node).display;
+        return  display == "inline-block";
     }
 
@@ -581 +592 @@
             line.lineBoxes().forEach(function(lineBox) {
                 let indentation = " ".repeat(level + 1);
-                content += indentation + "InlineTextBox at (" + Utils.precisionRound(lineBox.lineBoxRect.left(), 2) + "," + Utils.precisionRound(lineBox.lineBoxRect.top(), 2) + ") size " + Utils.precisionRound(lineBox.lineBoxRect.width(), 2) + "x" + lineBox.lineBoxRect.height() + "\n";
+                let inlineBoxName = lineBox.startPosition === undefined ? "InlineBox" : "InlineTextBox";
+                content += indentation +  inlineBoxName + " at (" + Utils.precisionRound(lineBox.lineBoxRect.left(), 2) + "," + Utils.precisionRound(lineBox.lineBoxRect.top(), 2) + ") size " + Utils.precisionRound(lineBox.lineBoxRect.width(), 2) + "x" + lineBox.lineBoxRect.height() + "\n";
             });
         });

trunk/Tools/LayoutReloaded/test/index.html

@@ -79 +79 @@
     "inline-formatting-context-floats1.html",
     "inline-formatting-context-floats2.html",
-    "inline-with-padding-border-margin-offsets.html"
+    "inline-with-padding-border-margin-offsets.html",
+    "inline-block-with-fixed-width-height.html"
 ];