- Revision
- 229664
- Author
- za...@apple.com
- Date
- 2018-03-16 07:52:42 -0700 (Fri, 16 Mar 2018)
Log Message
[LayoutReloaded] Utils.computed* functions should just take node instead of box.
https://bugs.webkit.org/show_bug.cgi?id=183697
Reviewed by Antti Koivisto.
This is in preparation for introducing the display tree.
* LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
(BlockFormattingContext.prototype._computeOutOfFlowWidth):
(BlockFormattingContext.prototype._computeFloatingWidth):
(BlockFormattingContext.prototype._computeInFlowWidth):
(BlockFormattingContext.prototype._computeOutOfFlowHeight):
(BlockFormattingContext.prototype._computeFloatingHeight):
(BlockFormattingContext.prototype._computeInFlowHeight):
(BlockFormattingContext.prototype._shrinkToFitWidth):
* LayoutReloaded/FormattingContext/BlockFormatting/BlockMarginCollapse.js:
(BlockMarginCollapse._nonCollapsedMarginTop):
(BlockMarginCollapse._nonCollapsedMarginBottom):
(BlockMarginCollapse._collapsedMarginTopFromFirstChild):
(BlockMarginCollapse._collapsedMarginBottomFromLastChild):
* LayoutReloaded/FormattingContext/FormattingContext.js:
(FormattingContext.prototype.marginTop):
(FormattingContext.prototype.marginLeft):
(FormattingContext.prototype.marginBottom):
(FormattingContext.prototype.marginRight):
* LayoutReloaded/LayoutTree/Box.js:
(Layout.Box.prototype.paddingBox):
(Layout.Box.prototype.contentBox):
(Layout.Box):
* LayoutReloaded/Utils.js:
(Utils.computedMarginTop):
(Utils.computedMarginLeft):
(Utils.computedMarginBottom):
(Utils.computedMarginRight):
(Utils.computedBorderTopLeft):
(Utils.computedBorderBottomRight):
(Utils.computedPaddingTopLeft):
(Utils.computedPaddingBottomRight):
(Utils.computedBorderAndPaddingTop):
(Utils.computedBorderAndPaddingLeft):
(Utils.computedBorderAndPaddingBottom):
(Utils.computedBorderAndPaddingRight):
(Utils.computedHorizontalBorderAndPadding):
(Utils.computedVerticalBorderAndPadding):
(Utils.computedLineHeight):
(Utils.hasClearLeft):
(Utils.hasClearRight):
(Utils.hasClearBoth):
Modified Paths
Diff
Modified: trunk/Tools/ChangeLog (229663 => 229664)
--- trunk/Tools/ChangeLog 2018-03-16 11:51:58 UTC (rev 229663)
+++ trunk/Tools/ChangeLog 2018-03-16 14:52:42 UTC (rev 229664)
@@ -1,3 +1,54 @@
+2018-03-16 Zalan Bujtas <za...@apple.com>
+
+ [LayoutReloaded] Utils.computed* functions should just take node instead of box.
+ https://bugs.webkit.org/show_bug.cgi?id=183697
+
+ Reviewed by Antti Koivisto.
+
+ This is in preparation for introducing the display tree.
+
+ * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
+ (BlockFormattingContext.prototype._computeOutOfFlowWidth):
+ (BlockFormattingContext.prototype._computeFloatingWidth):
+ (BlockFormattingContext.prototype._computeInFlowWidth):
+ (BlockFormattingContext.prototype._computeOutOfFlowHeight):
+ (BlockFormattingContext.prototype._computeFloatingHeight):
+ (BlockFormattingContext.prototype._computeInFlowHeight):
+ (BlockFormattingContext.prototype._shrinkToFitWidth):
+ * LayoutReloaded/FormattingContext/BlockFormatting/BlockMarginCollapse.js:
+ (BlockMarginCollapse._nonCollapsedMarginTop):
+ (BlockMarginCollapse._nonCollapsedMarginBottom):
+ (BlockMarginCollapse._collapsedMarginTopFromFirstChild):
+ (BlockMarginCollapse._collapsedMarginBottomFromLastChild):
+ * LayoutReloaded/FormattingContext/FormattingContext.js:
+ (FormattingContext.prototype.marginTop):
+ (FormattingContext.prototype.marginLeft):
+ (FormattingContext.prototype.marginBottom):
+ (FormattingContext.prototype.marginRight):
+ * LayoutReloaded/LayoutTree/Box.js:
+ (Layout.Box.prototype.paddingBox):
+ (Layout.Box.prototype.contentBox):
+ (Layout.Box):
+ * LayoutReloaded/Utils.js:
+ (Utils.computedMarginTop):
+ (Utils.computedMarginLeft):
+ (Utils.computedMarginBottom):
+ (Utils.computedMarginRight):
+ (Utils.computedBorderTopLeft):
+ (Utils.computedBorderBottomRight):
+ (Utils.computedPaddingTopLeft):
+ (Utils.computedPaddingBottomRight):
+ (Utils.computedBorderAndPaddingTop):
+ (Utils.computedBorderAndPaddingLeft):
+ (Utils.computedBorderAndPaddingBottom):
+ (Utils.computedBorderAndPaddingRight):
+ (Utils.computedHorizontalBorderAndPadding):
+ (Utils.computedVerticalBorderAndPadding):
+ (Utils.computedLineHeight):
+ (Utils.hasClearLeft):
+ (Utils.hasClearRight):
+ (Utils.hasClearBoth):
+
2018-03-15 Zalan Bujtas <za...@apple.com>
[LayoutReloaded] Should never need to go beyond the root container when asking for the containing block.
Modified: trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js (229663 => 229664)
--- trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js 2018-03-16 11:51:58 UTC (rev 229663)
+++ trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js 2018-03-16 14:52:42 UTC (rev 229664)
@@ -158,19 +158,19 @@
width = Utils.width(layoutBox); // 6
else
ASSERT_NOT_REACHED();
- width += Utils.computedHorizontalBorderAndPadding(layoutBox);
+ width += Utils.computedHorizontalBorderAndPadding(layoutBox.node());
layoutBox.setWidth(width);
}
_computeFloatingWidth(layoutBox) {
// FIXME: missing cases
- layoutBox.setWidth(Utils.width(layoutBox) + Utils.computedHorizontalBorderAndPadding(layoutBox));
+ layoutBox.setWidth(Utils.width(layoutBox) + Utils.computedHorizontalBorderAndPadding(layoutBox.node()));
}
_computeInFlowWidth(layoutBox) {
if (Utils.isWidthAuto(layoutBox))
return layoutBox.setWidth(this._horizontalConstraint(layoutBox));
- return layoutBox.setWidth(Utils.width(layoutBox) + Utils.computedHorizontalBorderAndPadding(layoutBox));
+ return layoutBox.setWidth(Utils.width(layoutBox) + Utils.computedHorizontalBorderAndPadding(layoutBox.node()));
}
_computeOutOfFlowHeight(layoutBox) {
@@ -206,13 +206,13 @@
height = Utils.height(layoutBox); // 8
else
ASSERT_NOT_REACHED();
- height += Utils.computedVerticalBorderAndPadding(layoutBox);
+ height += Utils.computedVerticalBorderAndPadding(layoutBox.node());
layoutBox.setHeight(height);
}
_computeFloatingHeight(layoutBox) {
// FIXME: missing cases
- layoutBox.setHeight(Utils.height(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox));
+ layoutBox.setHeight(Utils.height(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox.node()));
}
_computeInFlowHeight(layoutBox) {
@@ -222,9 +222,9 @@
// The element's height is the distance from its top content edge to the first applicable of the following:
// 1. the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
- return layoutBox.setHeight(this._contentHeight(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox));
+ return layoutBox.setHeight(this._contentHeight(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox.node()));
}
- return layoutBox.setHeight(Utils.height(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox));
+ return layoutBox.setHeight(Utils.height(layoutBox) + Utils.computedVerticalBorderAndPadding(layoutBox.node()));
}
_horizontalConstraint(layoutBox) {
@@ -323,7 +323,7 @@
let width = 0;
for (let inFlowChild = layoutBox.firstInFlowChild(); inFlowChild; inFlowChild = inFlowChild.nextInFlowSibling()) {
let widthCandidate = Utils.isWidthAuto(inFlowChild) ? this._shrinkToFitWidth(inFlowChild) : Utils.width(inFlowChild);
- width = Math.max(width, widthCandidate + Utils.computedHorizontalBorderAndPadding(inFlowChild));
+ width = Math.max(width, widthCandidate + Utils.computedHorizontalBorderAndPadding(inFlowChild.node()));
}
return width;
}
Modified: trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockMarginCollapse.js (229663 => 229664)
--- trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockMarginCollapse.js 2018-03-16 11:51:58 UTC (rev 229663)
+++ trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockMarginCollapse.js 2018-03-16 14:52:42 UTC (rev 229664)
@@ -130,12 +130,12 @@
static _nonCollapsedMarginTop(layoutBox) {
// Non collapsed margin top includes collapsed margin from inflow first child.
- return this._marginValue(Utils.computedMarginTop(layoutBox), this._collapsedMarginTopFromFirstChild(layoutBox));
+ return this._marginValue(Utils.computedMarginTop(layoutBox.node()), this._collapsedMarginTopFromFirstChild(layoutBox));
}
static _nonCollapsedMarginBottom(layoutBox) {
// Non collapsed margin bottom includes collapsed margin from inflow last child.
- return this._marginValue(Utils.computedMarginBottom(layoutBox), this._collapsedMarginBottomFromLastChild(layoutBox));
+ return this._marginValue(Utils.computedMarginBottom(layoutBox.node()), this._collapsedMarginBottomFromLastChild(layoutBox));
}
static _collapsedMarginTopFromFirstChild(layoutBox) {
@@ -146,7 +146,7 @@
if (!this._isMarginTopCollapsedWithParent(firstInFlowChild))
return 0;
// Collect collapsed margin top recursively.
- return this._marginValue(Utils.computedMarginTop(firstInFlowChild), this._collapsedMarginTopFromFirstChild(firstInFlowChild));
+ return this._marginValue(Utils.computedMarginTop(firstInFlowChild.node()), this._collapsedMarginTopFromFirstChild(firstInFlowChild));
}
static _collapsedMarginBottomFromLastChild(layoutBox) {
@@ -157,7 +157,7 @@
if (!this._isMarginBottomCollapsedWithParent(lastInFlowChild))
return 0;
// Collect collapsed margin bottom recursively.
- return this._marginValue(Utils.computedMarginBottom(lastInFlowChild), this._collapsedMarginBottomFromLastChild(lastInFlowChild));
+ return this._marginValue(Utils.computedMarginBottom(lastInFlowChild.node()), this._collapsedMarginBottomFromLastChild(lastInFlowChild));
}
static _marginValue(currentMarginValue, candidateMarginValue) {
Modified: trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js (229663 => 229664)
--- trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js 2018-03-16 11:51:58 UTC (rev 229663)
+++ trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js 2018-03-16 14:52:42 UTC (rev 229664)
@@ -47,19 +47,19 @@
}
marginTop(layoutBox) {
- return Utils.computedMarginTop(layoutBox);
+ return Utils.computedMarginTop(layoutBox.node());
}
marginLeft(layoutBox) {
- return Utils.computedMarginLeft(layoutBox);
+ return Utils.computedMarginLeft(layoutBox.node());
}
marginBottom(layoutBox) {
- return Utils.computedMarginBottom(layoutBox);
+ return Utils.computedMarginBottom(layoutBox.node());
}
marginRight(layoutBox) {
- return Utils.computedMarginRight(layoutBox);
+ return Utils.computedMarginRight(layoutBox.node());
}
absoluteMarginBox(layoutBox) {
Modified: trunk/Tools/LayoutReloaded/LayoutTree/Box.js (229663 => 229664)
--- trunk/Tools/LayoutReloaded/LayoutTree/Box.js 2018-03-16 11:51:58 UTC (rev 229663)
+++ trunk/Tools/LayoutReloaded/LayoutTree/Box.js 2018-03-16 14:52:42 UTC (rev 229664)
@@ -239,19 +239,19 @@
paddingBox() {
let paddingBox = this.borderBox();
- let borderSize = Utils.computedBorderTopLeft(this);
+ let borderSize = Utils.computedBorderTopLeft(this.node());
paddingBox.moveBy(borderSize);
paddingBox.shrinkBy(borderSize);
- paddingBox.shrinkBy(Utils.computedBorderBottomRight(this));
+ paddingBox.shrinkBy(Utils.computedBorderBottomRight(this.node()));
return paddingBox;
}
contentBox() {
let contentBox = this.paddingBox();
- let paddingSize = Utils.computedPaddingTopLeft(this);
+ let paddingSize = Utils.computedPaddingTopLeft(this.node());
contentBox.moveBy(paddingSize);
contentBox.shrinkBy(paddingSize);
- contentBox.shrinkBy(Utils.computedPaddingBottomRight(this));
+ contentBox.shrinkBy(Utils.computedPaddingBottomRight(this.node()));
return contentBox;
}
}
Modified: trunk/Tools/LayoutReloaded/Utils.js (229663 => 229664)
--- trunk/Tools/LayoutReloaded/Utils.js 2018-03-16 11:51:58 UTC (rev 229663)
+++ trunk/Tools/LayoutReloaded/Utils.js 2018-03-16 14:52:42 UTC (rev 229664)
@@ -323,76 +323,72 @@
return window.getComputedStyle(box.node()).paddingBottom != "0px";
}
- static computedMarginTop(box) {
- return Utils.computedValue(window.getComputedStyle(box.node()).marginTop);
+ static computedMarginTop(node) {
+ return Utils.computedValue(window.getComputedStyle(node).marginTop);
}
- static computedMarginLeft(box) {
- return Utils.computedValue(window.getComputedStyle(box.node()).marginLeft);
+ static computedMarginLeft(node) {
+ return Utils.computedValue(window.getComputedStyle(node).marginLeft);
}
- static computedMarginBottom(box) {
- return Utils.computedValue(window.getComputedStyle(box.node()).marginBottom);
+ static computedMarginBottom(node) {
+ return Utils.computedValue(window.getComputedStyle(node).marginBottom);
}
- static computedMarginRight(box) {
- return Utils.computedValue(window.getComputedStyle(box.node()).marginRight);
+ static computedMarginRight(node) {
+ return Utils.computedValue(window.getComputedStyle(node).marginRight);
}
- static computedBorderTopLeft(box) {
- let node = box.node();
+ static computedBorderTopLeft(node) {
return new LayoutSize(Utils.computedValue(window.getComputedStyle(node).borderLeftWidth), Utils.computedValue(window.getComputedStyle(node).borderTopWidth));
}
- static computedBorderBottomRight(box) {
- let node = box.node();
+ static computedBorderBottomRight(node) {
return new LayoutSize(Utils.computedValue(window.getComputedStyle(node).borderRightWidth), Utils.computedValue(window.getComputedStyle(node).borderBottomWidth));
}
- static computedPaddingTopLeft(box) {
- let node = box.node();
+ static computedPaddingTopLeft(node) {
return new LayoutSize(Utils.computedValue(window.getComputedStyle(node).paddingLeft), Utils.computedValue(window.getComputedStyle(node).paddingTop));
}
- static computedPaddingBottomRight(box) {
- let node = box.node();
+ static computedPaddingBottomRight(node) {
return new LayoutSize(Utils.computedValue(window.getComputedStyle(node).paddingRight), Utils.computedValue(window.getComputedStyle(node).paddingBottom));
}
- static computedBorderAndPaddingTop(box) {
- return Utils.computedBorderTopLeft(box).height() + Utils.computedPaddingTopLeft(box).height();
+ static computedBorderAndPaddingTop(node) {
+ return Utils.computedBorderTopLeft(node).height() + Utils.computedPaddingTopLeft(node).height();
}
- static computedBorderAndPaddingLeft(box) {
- return Utils.computedBorderTopLeft(box).width() + Utils.computedPaddingTopLeft(box).width();
+ static computedBorderAndPaddingLeft(node) {
+ return Utils.computedBorderTopLeft(node).width() + Utils.computedPaddingTopLeft(node).width();
}
- static computedBorderAndPaddingTop(box) {
- return Utils.computedBorderTopLeft(box).height() + Utils.computedPaddingTopLeft(box).height();
+ static computedBorderAndPaddingTop(node) {
+ return Utils.computedBorderTopLeft(node).height() + Utils.computedPaddingTopLeft(node).height();
}
- static computedBorderAndPaddingLeft(box) {
- return Utils.computedBorderTopLeft(box).width() + Utils.computedPaddingTopLeft(box).width();
+ static computedBorderAndPaddingLeft(node) {
+ return Utils.computedBorderTopLeft(node).width() + Utils.computedPaddingTopLeft(node).width();
}
- static computedBorderAndPaddingBottom(box) {
- return Utils.computedBorderBottomRight(box).height() + Utils.computedPaddingBottomRight(box).height();
+ static computedBorderAndPaddingBottom(node) {
+ return Utils.computedBorderBottomRight(node).height() + Utils.computedPaddingBottomRight(node).height();
}
- static computedBorderAndPaddingRight(box) {
- return Utils.computedBorderBottomRight(box).width() + Utils.computedPaddingBottomRight(box).width();
+ static computedBorderAndPaddingRight(node) {
+ return Utils.computedBorderBottomRight(node).width() + Utils.computedPaddingBottomRight(node).width();
}
- static computedHorizontalBorderAndPadding(box) {
- return this.computedBorderAndPaddingLeft(box) + this.computedBorderAndPaddingRight(box);
+ static computedHorizontalBorderAndPadding(node) {
+ return this.computedBorderAndPaddingLeft(node) + this.computedBorderAndPaddingRight(node);
}
- static computedVerticalBorderAndPadding(box) {
- return this.computedBorderAndPaddingTop(box) + this.computedBorderAndPaddingBottom(box);
+ static computedVerticalBorderAndPadding(node) {
+ return this.computedBorderAndPaddingTop(node) + this.computedBorderAndPaddingBottom(node);
}
- static computedLineHeight(box) {
- return Utils.computedValue(window.getComputedStyle(box.node()).lineHeight);
+ static computedLineHeight(node) {
+ return Utils.computedValue(window.getComputedStyle(node).lineHeight);
}
static hasClear(box) {
@@ -400,17 +396,14 @@
}
static hasClearLeft(box) {
- let node = box.node();
return window.getComputedStyle(box.node()).clear == "left";
}
static hasClearRight(box) {
- let node = box.node();
return window.getComputedStyle(box.node()).clear == "right";
}
static hasClearBoth(box) {
- let node = box.node();
return window.getComputedStyle(box.node()).clear == "both";
}
