Skip to content
Permalink
Browse files
[LayoutReloaded] Ensure that positioning happens within the formattin…
…g 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:

Canonical link: https://commits.webkit.org/199363@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@229696 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
alanbujtas committed Mar 17, 2018
1 parent 24ea44f commit 68b4eeb6ef279dde037d32b9ebd8708433bd0742
@@ -1,3 +1,32 @@
2018-03-17 Zalan Bujtas <zalan@apple.com>

[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 <wenson_hsieh@apple.com>

Unreviewed, rolling out r229688.
@@ -65,12 +65,9 @@ class BlockFormattingContext extends FormattingContext {
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 @@ class BlockFormattingContext extends FormattingContext {
}
}
}
// 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 @@ class BlockFormattingContext extends FormattingContext {
}

_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) {
@@ -177,7 +177,7 @@ Layout.Box = class Box {
// 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 @@ Layout.Box = class Box {
}

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 @@ Layout.Box = class Box {
}

isOutOfFlowPositioned() {
return this.isAbsolutePositioned() || this.isFixedPositioned();
return this.isAbsolutelyPositioned() || this.isFixedPositioned();
}

isInFlowPositioned() {
@@ -234,13 +234,20 @@ Layout.Box = class Box {
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() {
@@ -431,14 +431,14 @@ class Utils {
return display == "table" || display == "inline-table";
}

static isRelativePositioned(box) {
static isRelativelyPositioned(box) {
if (box.isAnonymous())
return false;
let node = box.node();
return window.getComputedStyle(node).position == "relative";
}

static isAbsolutePositioned(box) {
static isAbsolutelyPositioned(box) {
if (box.isAnonymous())
return false;
let node = box.node();
@@ -68,8 +68,8 @@ class Box {

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;

0 comments on commit 68b4eeb

Please sign in to comment.