Skip to content
Permalink
Browse files
[LayoutReloaded] BlockFormattingContext::placePositionedDescendants t…
…akes care of both in- and out-of-flow placement

https://bugs.webkit.org/show_bug.cgi?id=183727

Reviewed by Antti Koivisto.

* LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
(BlockFormattingContext.prototype.layout):
(BlockFormattingContext.prototype._placePositionedDescendants):
(BlockFormattingContext.prototype._placeInFlowPositionedChildren):
(BlockFormattingContext.prototype._placeOutOfFlowDescendants):
* LayoutReloaded/test/absolute-position-when-containing-block-is-not-in-the-formatting-context.html: Added.
* LayoutReloaded/test/absolute-position-when-containing-block-is-not-in-the-formatting-context2.html: Added.
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/relative-position-when-containing-block-is-not-in-the-formatting-context.html: Added.

Canonical link: https://commits.webkit.org/199365@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@229698 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
alanbujtas committed Mar 18, 2018
1 parent 5578bae commit 16c5a0514ded86aa2a467a6efffb2858083bbd9a
@@ -1,3 +1,20 @@
2018-03-17 Zalan Bujtas <zalan@apple.com>

[LayoutReloaded] BlockFormattingContext::placePositionedDescendants takes care of both in- and out-of-flow placement
https://bugs.webkit.org/show_bug.cgi?id=183727

Reviewed by Antti Koivisto.

* LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
(BlockFormattingContext.prototype.layout):
(BlockFormattingContext.prototype._placePositionedDescendants):
(BlockFormattingContext.prototype._placeInFlowPositionedChildren):
(BlockFormattingContext.prototype._placeOutOfFlowDescendants):
* LayoutReloaded/test/absolute-position-when-containing-block-is-not-in-the-formatting-context.html: Added.
* LayoutReloaded/test/absolute-position-when-containing-block-is-not-in-the-formatting-context2.html: Added.
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/relative-position-when-containing-block-is-not-in-the-formatting-context.html: Added.

2018-03-17 Zalan Bujtas <zalan@apple.com>

[LayoutReloaded] Ensure that positioning happens within the formatting context
@@ -65,9 +65,8 @@ 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 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);
// Move positioned children to their final position.
this._placePositionedDescendants(layoutBox);
// We are done with laying out this box.
this._removeFromLayoutQueue(layoutBox);
if (layoutBox.nextSibling()) {
@@ -77,8 +76,7 @@ class BlockFormattingContext extends FormattingContext {
}
}
// And finally place the in- and out-of-flow descendants.
this._placeInFlowPositionedChildren(this.rootContainer());
this._placeOutOfFlowDescendants(this.rootContainer());
this._placePositionedDescendants(this.rootContainer());
}

computeWidth(layoutBox) {
@@ -118,15 +116,27 @@ class BlockFormattingContext extends FormattingContext {
layoutBox.setTopLeft(position);
}

_placePositionedDescendants(layoutBox) {
if (!layoutBox.isContainer())
return;
// If this layoutBox also establishes a formatting context, then positioning already has happend at the formatting context.
if (layoutBox.establishesFormattingContext() && layoutBox != this.rootContainer())
return;
this._placeInFlowPositionedChildren(layoutBox);
this._placeOutOfFlowDescendants(layoutBox);
}

_placeInFlowPositionedChildren(container) {
ASSERT(container.isContainer());
for (let inFlowChild = container.firstInFlowChild(); inFlowChild; inFlowChild = inFlowChild.nextInFlowSibling()) {
if (!inFlowChild.isInFlowPositioned())
continue;
this._computeInFlowPositionedPosition(inFlowChild);
this._computeInFlowPositionedPosition(inFlowChild);
}
}

_placeOutOfFlowDescendants(container) {
ASSERT(container.isContainer());
let outOfFlowDescendants = Utils.collectOutOfFlowDescendants(container);
for (let outOfFlowBox of outOfFlowDescendants)
this._computeOutOfFlowPosition(outOfFlowBox);
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<div style="position: relative; top: 100px; left: 100px; width: 100px; height: 100px; padding: 20px;">
<div style="overflow: hidden; width: 50px; height: 50px">
<div style="position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;"></div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<div style="position: relative; overflow: hidden; top: 100px; left: 100px; width: 100px; height: 100px; padding: 20px;">
<div style="overflow: hidden; width: 50px; height: 50px">
<div style="position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;"></div>
</div>
</div>
</body>
</html>
@@ -13,6 +13,7 @@
"relative-right.html",
"relative-auto.html",
"relative-auto-with-parent-offset.html",
"relative-position-when-containing-block-is-not-in-the-formatting-context.html",
"relative-siblings.html",
"padding-simple.html",
"padding-nested.html",
@@ -41,6 +42,8 @@
"absolute-width-shrink-to-fit.html",
"absolute-width-stretch.html",
"absolute-with-static-block-position-nested.html",
"absolute-position-when-containing-block-is-not-in-the-formatting-context.html",
"absolute-position-when-containing-block-is-not-in-the-formatting-context2.html",
"fixed-nested.html",
"floating-box-left-and-right-multiple.html",
"floating-box-right-simple.html",
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid green; position: relative; top: 100px; left: 100px; width: 100px; height: 100px; padding: 20px;">
<div style="overflow: hidden; border: 1px solid red; width: 50px; height: 50px">
<div style="position: relative; left: -5px; top: -5px; width: 10px; height: 10px; border: 1px solid blue"></div>
</div>
</div>
</body>
</html>

0 comments on commit 16c5a05

Please sign in to comment.