Title: [229696] trunk/Tools
- Revision
- 229696
- Author
- [email protected]
- Date
- 2018-03-17 13:49:54 -0700 (Sat, 17 Mar 2018)
Log Message
[LayoutReloaded] Ensure that positioning happens within the formatting context
https://bugs.webkit.org/show_bug.cgi?id=183722
Reviewed by Antti Koivisto.
All sizing and positioning need to happen in the formatting context that the box lives in
including the final position of in- and out-of-flow descendants.
* LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
(BlockFormattingContext.prototype.layout):
(BlockFormattingContext.prototype._placeInFlowPositionedChildren):
* LayoutReloaded/LayoutTree/Box.js:
(Layout.Box.prototype.establishesBlockFormattingContext):
(Layout.Box.prototype.isPositioned):
(Layout.Box.prototype.isRelativelyPositioned):
(Layout.Box.prototype.isAbsolutelyPositioned):
(Layout.Box.prototype.isOutOfFlowPositioned):
(Layout.Box.prototype.containingBlock):
(Layout.Box.prototype.isRelativePositioned): Deleted.
(Layout.Box.prototype.isAbsolutePositioned): Deleted.
* LayoutReloaded/Utils.js:
(Utils.isRelativelyPositioned):
(Utils.isAbsolutelyPositioned):
(Utils.isRelativePositioned): Deleted.
(Utils.isAbsolutePositioned): Deleted.
* LayoutReloaded/misc/headers/Box.h:
Modified Paths
Diff
Modified: trunk/Tools/ChangeLog (229695 => 229696)
--- trunk/Tools/ChangeLog 2018-03-17 06:44:40 UTC (rev 229695)
+++ trunk/Tools/ChangeLog 2018-03-17 20:49:54 UTC (rev 229696)
@@ -1,3 +1,32 @@
+2018-03-17 Zalan Bujtas <[email protected]>
+
+ [LayoutReloaded] Ensure that positioning happens within the formatting context
+ https://bugs.webkit.org/show_bug.cgi?id=183722
+
+ Reviewed by Antti Koivisto.
+
+ All sizing and positioning need to happen in the formatting context that the box lives in
+ including the final position of in- and out-of-flow descendants.
+
+ * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
+ (BlockFormattingContext.prototype.layout):
+ (BlockFormattingContext.prototype._placeInFlowPositionedChildren):
+ * LayoutReloaded/LayoutTree/Box.js:
+ (Layout.Box.prototype.establishesBlockFormattingContext):
+ (Layout.Box.prototype.isPositioned):
+ (Layout.Box.prototype.isRelativelyPositioned):
+ (Layout.Box.prototype.isAbsolutelyPositioned):
+ (Layout.Box.prototype.isOutOfFlowPositioned):
+ (Layout.Box.prototype.containingBlock):
+ (Layout.Box.prototype.isRelativePositioned): Deleted.
+ (Layout.Box.prototype.isAbsolutePositioned): Deleted.
+ * LayoutReloaded/Utils.js:
+ (Utils.isRelativelyPositioned):
+ (Utils.isAbsolutelyPositioned):
+ (Utils.isRelativePositioned): Deleted.
+ (Utils.isAbsolutePositioned): Deleted.
+ * LayoutReloaded/misc/headers/Box.h:
+
2018-03-16 Wenson Hsieh <[email protected]>
Unreviewed, rolling out r229688.
Modified: trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js (229695 => 229696)
--- trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js 2018-03-17 06:44:40 UTC (rev 229695)
+++ trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js 2018-03-17 20:49:54 UTC (rev 229696)
@@ -65,12 +65,9 @@
this.computeHeight(layoutBox);
// Adjust position now that we have all the previous floats placed in this context -if needed.
this.floatingContext().computePosition(layoutBox);
- // Move positioned children to their final position.
- if (layoutBox.isContainer()) {
+ // Move in-flow positioned children to their final position. If this layoutBox also establishes a formatting context, then positioning already has happend.
+ if (layoutBox.isContainer() && !layoutBox.establishesFormattingContext())
this._placeInFlowPositionedChildren(layoutBox);
- // Place the out of flow content.
- this._placeOutOfFlowDescendants(layoutBox);
- }
// We are done with laying out this box.
this._removeFromLayoutQueue(layoutBox);
if (layoutBox.nextSibling()) {
@@ -79,7 +76,8 @@
}
}
}
- // And finally place the out of flow descendants for the root.
+ // And finally place the in- and out-of-flow descendants.
+ this._placeInFlowPositionedChildren(this.rootContainer());
this._placeOutOfFlowDescendants(this.rootContainer());
}
@@ -121,8 +119,11 @@
}
_placeInFlowPositionedChildren(container) {
- for (let inFlowChild = container.firstInFlowChild(); inFlowChild; inFlowChild = inFlowChild.nextInFlowSibling())
- this._computeInFlowPositionedPosition(inFlowChild);
+ for (let inFlowChild = container.firstInFlowChild(); inFlowChild; inFlowChild = inFlowChild.nextInFlowSibling()) {
+ if (!inFlowChild.isInFlowPositioned())
+ continue;
+ this._computeInFlowPositionedPosition(inFlowChild);
+ }
}
_placeOutOfFlowDescendants(container) {
Modified: trunk/Tools/LayoutReloaded/LayoutTree/Box.js (229695 => 229696)
--- trunk/Tools/LayoutReloaded/LayoutTree/Box.js 2018-03-17 06:44:40 UTC (rev 229695)
+++ trunk/Tools/LayoutReloaded/LayoutTree/Box.js 2018-03-17 20:49:54 UTC (rev 229696)
@@ -177,7 +177,7 @@
// Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions)
// that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport)
// establish new block formatting contexts for their contents.
- return this.isFloatingPositioned() || this.isAbsolutePositioned() || (this.isBlockContainerBox() && !this.isBlockLevelBox())
+ return this.isFloatingPositioned() || this.isAbsolutelyPositioned() || (this.isBlockContainerBox() && !this.isBlockLevelBox())
|| (this.isBlockLevelBox() && !Utils.isOverflowVisible(this));
}
@@ -186,15 +186,15 @@
}
isPositioned() {
- return this.isOutOfFlowPositioned() || this.isRelativePositioned();
+ return this.isOutOfFlowPositioned() || this.isRelativelyPositioned();
}
- isRelativePositioned() {
- return Utils.isRelativePositioned(this);
+ isRelativelyPositioned() {
+ return Utils.isRelativelyPositioned(this);
}
- isAbsolutePositioned() {
- return Utils.isAbsolutePositioned(this);
+ isAbsolutelyPositioned() {
+ return Utils.isAbsolutelyPositioned(this) || this.isFixedPositioned();
}
isFixedPositioned() {
@@ -208,7 +208,7 @@
}
isOutOfFlowPositioned() {
- return this.isAbsolutePositioned() || this.isFixedPositioned();
+ return this.isAbsolutelyPositioned() || this.isFixedPositioned();
}
isInFlowPositioned() {
@@ -234,13 +234,20 @@
return null;
if (!this.isPositioned() || this.isInFlowPositioned())
return this.parent();
- let parent = this.parent();
- while (parent.parent()) {
- if (this.isAbsolutePositioned() && parent.isPositioned())
- return parent;
- parent = parent.parent();
+ if (this.isAbsolutelyPositioned() && !this.isFixedPositioned()) {
+ let ascendant = this.parent();
+ while (ascendant.parent() && !ascendant.isPositioned())
+ ascendant = ascendant.parent();
+ return ascendant;
}
- return parent;
+ if (this.isFixedPositioned()) {
+ let ascendant = this.parent();
+ while (ascendant.parent())
+ ascendant = ascendant.parent();
+ return ascendant;
+ }
+ ASSERT_NOT_REACHED();
+ return null;
}
borderBox() {
Modified: trunk/Tools/LayoutReloaded/Utils.js (229695 => 229696)
--- trunk/Tools/LayoutReloaded/Utils.js 2018-03-17 06:44:40 UTC (rev 229695)
+++ trunk/Tools/LayoutReloaded/Utils.js 2018-03-17 20:49:54 UTC (rev 229696)
@@ -431,7 +431,7 @@
return display == "table" || display == "inline-table";
}
- static isRelativePositioned(box) {
+ static isRelativelyPositioned(box) {
if (box.isAnonymous())
return false;
let node = box.node();
@@ -438,7 +438,7 @@
return window.getComputedStyle(node).position == "relative";
}
- static isAbsolutePositioned(box) {
+ static isAbsolutelyPositioned(box) {
if (box.isAnonymous())
return false;
let node = box.node();
Modified: trunk/Tools/LayoutReloaded/misc/headers/Box.h (229695 => 229696)
--- trunk/Tools/LayoutReloaded/misc/headers/Box.h 2018-03-17 06:44:40 UTC (rev 229695)
+++ trunk/Tools/LayoutReloaded/misc/headers/Box.h 2018-03-17 20:49:54 UTC (rev 229696)
@@ -68,8 +68,8 @@
bool isInFlow() const;
bool isPositioned() const;
- bool isRelativePositioned() const;
- bool isAbsolutePositioned() const;
+ bool isRelativelyPositioned() const;
+ bool isAbsolutelyPositioned() const;
bool isFixedPositioned() const;
bool isOutOfFlowPositioned() const;
bool isInFlowPositioned() const;
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
