[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
WebKit · Mar 17, 2018 · 68b4eeb · 68b4eeb
1 parent 24ea44f
commit 68b4eeb
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 25 deletions.
diff --git a/Tools/ChangeLog b/Tools/ChangeLog
@@ -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.

diff --git a/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js b/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js
@@ -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) {

diff --git a/Tools/LayoutReloaded/LayoutTree/Box.js b/Tools/LayoutReloaded/LayoutTree/Box.js
@@ -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() {

diff --git a/Tools/LayoutReloaded/Utils.js b/Tools/LayoutReloaded/Utils.js
@@ -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();

diff --git a/Tools/LayoutReloaded/misc/headers/Box.h b/Tools/LayoutReloaded/misc/headers/Box.h
@@ -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;