Diff
Modified: trunk/Tools/ChangeLog (230463 => 230464)
--- trunk/Tools/ChangeLog 2018-04-10 01:42:45 UTC (rev 230463)
+++ trunk/Tools/ChangeLog 2018-04-10 01:53:00 UTC (rev 230464)
@@ -1,3 +1,31 @@
+2018-04-09 Zalan Bujtas <za...@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 <timo...@apple.com>
Add support for setting a background color on WKWebView and WKView
Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (230463 => 230464)
--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-10 01:42:45 UTC (rev 230463)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-10 01:53:00 UTC (rev 230464)
@@ -27,6 +27,7 @@
constructor(inlineFormattingState) {
super(inlineFormattingState);
ASSERT(this.formattingRoot().isBlockContainerBox());
+ this.m_inlineContainerStack = new Array();
}
layout() {
@@ -39,27 +40,12 @@
this._addToLayoutQueue(this.formattingRoot().firstInFlowOrFloatChild());
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.
this._placeInFlowPositionedChildren(this.formattingRoot());
@@ -66,18 +52,52 @@
// And take care of out-of-flow boxes as the final step.
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());
}
_handleInlineBox(inlineBox) {
Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js (230463 => 230464)
--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js 2018-04-10 01:42:45 UTC (rev 230463)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js 2018-04-10 01:53:00 UTC (rev 230464)
@@ -62,12 +62,22 @@
this.m_lineRect.moveHorizontally(offset);
}
+ 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);
}
}
Modified: trunk/Tools/LayoutReloaded/LayoutTree/Box.js (230463 => 230464)
--- trunk/Tools/LayoutReloaded/LayoutTree/Box.js 2018-04-10 01:42:45 UTC (rev 230463)
+++ trunk/Tools/LayoutReloaded/LayoutTree/Box.js 2018-04-10 01:53:00 UTC (rev 230464)
@@ -127,6 +127,10 @@
return Utils.isBlockContainerElement(this.node());
}
+ isInlineBlockBox() {
+ return Utils.isInlineBlockElement(this.node());
+ }
+
isInlineLevelBox() {
return Utils.isInlineLevelElement(this.node());
}
Modified: trunk/Tools/LayoutReloaded/Utils.js (230463 => 230464)
--- trunk/Tools/LayoutReloaded/Utils.js 2018-04-10 01:42:45 UTC (rev 230463)
+++ trunk/Tools/LayoutReloaded/Utils.js 2018-04-10 01:53:00 UTC (rev 230464)
@@ -208,6 +208,10 @@
this.m_topLeft.moveBy(distance);
}
+ growHorizontally(distance) {
+ this.m_size.setWidth(this.m_size.width() + distance);
+ }
+
moveHorizontally(distance) {
this.m_topLeft.shiftLeft(distance);
}
@@ -423,7 +427,7 @@
}
static isBlockContainerElement(node) {
- if (node.nodeType != Node.ELEMENT_NODE)
+ if (!node || node.nodeType != Node.ELEMENT_NODE)
return false;
let display = window.getComputedStyle(node).display;
return display == "block" || display == "list-item" || display == "inline-block" || display == "table-cell" || display == "table-caption"; //TODO && !replaced element
@@ -439,6 +443,13 @@
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";
+ }
+
static isRelativelyPositioned(box) {
if (box.isAnonymous())
return false;
@@ -580,7 +591,8 @@
content += indentation + "RootInlineBox at (" + lineRect.left() + "," + lineRect.top() + ") size " + Utils.precisionRound(lineRect.width(), 2) + "x" + lineRect.height() + "\n";
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";
});
});
return content;
Modified: trunk/Tools/LayoutReloaded/test/index.html (230463 => 230464)
--- trunk/Tools/LayoutReloaded/test/index.html 2018-04-10 01:42:45 UTC (rev 230463)
+++ trunk/Tools/LayoutReloaded/test/index.html 2018-04-10 01:53:00 UTC (rev 230464)
@@ -78,7 +78,8 @@
"inline-floating1.html",
"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"
];
let debugThis = [];
Added: trunk/Tools/LayoutReloaded/test/inline-block-with-fixed-width-height.html (0 => 230464)
--- trunk/Tools/LayoutReloaded/test/inline-block-with-fixed-width-height.html (rev 0)
+++ trunk/Tools/LayoutReloaded/test/inline-block-with-fixed-width-height.html 2018-04-10 01:53:00 UTC (rev 230464)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="height: 500px"><span style="display: inline-block; width: 200px; height: 100px;">foobar</span></div>
+</body>
+</html>
