Diff
Modified: trunk/Tools/ChangeLog (230468 => 230469)
--- trunk/Tools/ChangeLog 2018-04-10 03:50:17 UTC (rev 230468)
+++ trunk/Tools/ChangeLog 2018-04-10 05:06:37 UTC (rev 230469)
@@ -1,5 +1,30 @@
2018-04-09 Zalan Bujtas <za...@apple.com>
+ [LayoutReloaded] Add support for relatively positioned containers in inline formatting context.
+ https://bugs.webkit.org/show_bug.cgi?id=184439
+
+ Reviewed by Antti Koivisto.
+
+ * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
+ (BlockFormattingContext.prototype._placeInFlowPositionedChildren): Deleted.
+ (BlockFormattingContext.prototype._computeInFlowPositionedPosition): Deleted.
+ * LayoutReloaded/FormattingContext/FormattingContext.js:
+ (FormattingContext.prototype._computeInFlowPositionedPosition):
+ (FormattingContext.prototype._placeInFlowPositionedChildren):
+ * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+ (InlineFormattingContext.prototype._placeInFlowPositionedChildren): Deleted.
+ * LayoutReloaded/Utils.js:
+ (Utils._dumpBox):
+ (Utils._dumpLines.):
+ (Utils._dumpLines):
+ (Utils.precisionRoundWithDecimals):
+ (Utils.precisionRound):
+ (Utils):
+ * LayoutReloaded/test/index.html:
+ * LayoutReloaded/test/inline-with-relative-positioning.html: Added.
+
+2018-04-09 Zalan Bujtas <za...@apple.com>
+
[LayoutReloaded] Remove Layout.InitialContainingBlock class
https://bugs.webkit.org/show_bug.cgi?id=184436
Modified: trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js (230468 => 230469)
--- trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js 2018-04-10 03:50:17 UTC (rev 230468)
+++ trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js 2018-04-10 05:06:37 UTC (rev 230469)
@@ -118,20 +118,6 @@
this.displayBox(layoutBox).setTopLeft(position);
}
- _placeInFlowPositionedChildren(container) {
- if (!container.isContainer())
- return;
- // If this layoutBox also establishes a formatting context, then positioning already has happend at the formatting context.
- if (container.establishesFormattingContext() && container != this.formattingRoot())
- return;
- ASSERT(container.isContainer());
- for (let inFlowChild = container.firstInFlowChild(); inFlowChild; inFlowChild = inFlowChild.nextInFlowSibling()) {
- if (!inFlowChild.isInFlowPositioned())
- continue;
- this._computeInFlowPositionedPosition(inFlowChild);
- }
- }
-
_layoutOutOfFlowDescendants() {
// This lays out all the out-of-flow boxes that belong to this formatting context even if
// the root container is not the containing block.
@@ -279,23 +265,6 @@
return bottom;
}
- _computeInFlowPositionedPosition(layoutBox) {
- // Start with the original, static position.
- let displayBox = this.displayBox(layoutBox);
- let relativePosition = displayBox.topLeft();
- // Top/bottom
- if (!Utils.isTopAuto(layoutBox))
- relativePosition.shiftTop(Utils.top(layoutBox));
- else if (!Utils.isBottomAuto(layoutBox))
- relativePosition.shiftTop(-Utils.bottom(layoutBox));
- // Left/right
- if (!Utils.isLeftAuto(layoutBox))
- relativePosition.shiftLeft(Utils.left(layoutBox));
- else if (!Utils.isRightAuto(layoutBox))
- relativePosition.shiftLeft(-Utils.right(layoutBox));
- displayBox.setTopLeft(relativePosition);
- }
-
_computeOutOfFlowPosition(layoutBox) {
let displayBox = this.displayBox(layoutBox);
let top = Number.NaN;
Modified: trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js (230468 => 230469)
--- trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js 2018-04-10 03:50:17 UTC (rev 230468)
+++ trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js 2018-04-10 05:06:37 UTC (rev 230469)
@@ -117,6 +117,37 @@
this.displayBox(layoutBox).setHeight(Utils.height(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox.node()));
}
+ _computeInFlowPositionedPosition(layoutBox) {
+ // Start with the original, static position.
+ let displayBox = this.displayBox(layoutBox);
+ let relativePosition = displayBox.topLeft();
+ // Top/bottom
+ if (!Utils.isTopAuto(layoutBox))
+ relativePosition.shiftTop(Utils.top(layoutBox));
+ else if (!Utils.isBottomAuto(layoutBox))
+ relativePosition.shiftTop(-Utils.bottom(layoutBox));
+ // Left/right
+ if (!Utils.isLeftAuto(layoutBox))
+ relativePosition.shiftLeft(Utils.left(layoutBox));
+ else if (!Utils.isRightAuto(layoutBox))
+ relativePosition.shiftLeft(-Utils.right(layoutBox));
+ displayBox.setTopLeft(relativePosition);
+ }
+
+ _placeInFlowPositionedChildren(container) {
+ if (!container.isContainer())
+ return;
+ // If this layoutBox also establishes a formatting context, then positioning already has happend at the formatting context.
+ if (container.establishesFormattingContext() && container != this.formattingRoot())
+ return;
+ ASSERT(container.isContainer());
+ for (let inFlowChild = container.firstInFlowChild(); inFlowChild; inFlowChild = inFlowChild.nextInFlowSibling()) {
+ if (!inFlowChild.isInFlowPositioned())
+ continue;
+ this._computeInFlowPositionedPosition(inFlowChild);
+ }
+ }
+
_outOfFlowDescendants() {
// FIXME: This is highly inefficient but will do for now.
// 1. Collect all the out-of-flow descendants first.
Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (230468 => 230469)
--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-10 03:50:17 UTC (rev 230468)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-10 05:06:37 UTC (rev 230469)
@@ -152,10 +152,6 @@
this._line().adjustWithOffset(offset);
}
- _placeInFlowPositionedChildren(container) {
-
- }
-
_placeOutOfFlowDescendants(container) {
}
Modified: trunk/Tools/LayoutReloaded/Utils.js (230468 => 230469)
--- trunk/Tools/LayoutReloaded/Utils.js 2018-04-10 03:50:17 UTC (rev 230468)
+++ trunk/Tools/LayoutReloaded/Utils.js 2018-04-10 05:06:37 UTC (rev 230469)
@@ -571,8 +571,14 @@
if (box.text())
return indentation + "#text RenderText\n";
}
- if (box.name() == "RenderInline")
+ if (box.name() == "RenderInline") {
+ if (box.isInFlowPositioned()) {
+ let displayBox = Utils._findDisplayBox(layoutState, box);
+ let boxRect = displayBox.rect();
+ return indentation + box.node().tagName + " " + box.name() + " (" + Utils.precisionRoundWithDecimals(boxRect.left()) + ", " + Utils.precisionRoundWithDecimals(boxRect.top()) + ")\n";
+ }
return indentation + box.node().tagName + " " + box.name() + "\n";
+ }
if (box.isAnonymous())
return "";
let displayBox = Utils._findDisplayBox(layoutState, box);
@@ -588,11 +594,11 @@
let indentation = " ".repeat(level);
lines.forEach(function(line) {
let lineRect = line.rect();
- content += indentation + "RootInlineBox at (" + lineRect.left() + "," + lineRect.top() + ") size " + Utils.precisionRound(lineRect.width(), 2) + "x" + lineRect.height() + "\n";
+ content += indentation + "RootInlineBox at (" + lineRect.left() + "," + lineRect.top() + ") size " + Utils.precisionRound(lineRect.width()) + "x" + lineRect.height() + "\n";
line.lineBoxes().forEach(function(lineBox) {
let indentation = " ".repeat(level + 1);
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";
+ content += indentation + inlineBoxName + " at (" + Utils.precisionRound(lineBox.lineBoxRect.left()) + "," + Utils.precisionRound(lineBox.lineBoxRect.top()) + ") size " + Utils.precisionRound(lineBox.lineBoxRect.width()) + "x" + lineBox.lineBoxRect.height() + "\n";
});
});
return content;
@@ -610,8 +616,12 @@
return content;
}
- static precisionRound(number, precision) {
- let factor = Math.pow(10, precision);
+ static precisionRoundWithDecimals(number) {
+ return number.toFixed(2);
+ }
+
+ static precisionRound(number) {
+ let factor = Math.pow(10, 2);
return Math.round(number * factor) / factor;
}
}
Modified: trunk/Tools/LayoutReloaded/test/index.html (230468 => 230469)
--- trunk/Tools/LayoutReloaded/test/index.html 2018-04-10 03:50:17 UTC (rev 230468)
+++ trunk/Tools/LayoutReloaded/test/index.html 2018-04-10 05:06:37 UTC (rev 230469)
@@ -79,7 +79,8 @@
"inline-formatting-context-floats1.html",
"inline-formatting-context-floats2.html",
"inline-with-padding-border-margin-offsets.html",
- "inline-block-with-fixed-width-height.html"
+ "inline-block-with-fixed-width-height.html",
+ "inline-with-relative-positioning.html"
];
let debugThis = [];
Added: trunk/Tools/LayoutReloaded/test/inline-with-relative-positioning.html (0 => 230469)
--- trunk/Tools/LayoutReloaded/test/inline-with-relative-positioning.html (rev 0)
+++ trunk/Tools/LayoutReloaded/test/inline-with-relative-positioning.html 2018-04-10 05:06:37 UTC (rev 230469)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div><span style="padding-left: 100px;"><span style="position: relative; left: 50px; top: 50px">foobar</span></span></div>
+</body>
+</html>
