Changeset 229696 in webkit

Timestamp:

Mar 17, 2018 1:49:54 PM (6 years ago)

Author:

Alan Bujtas

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:

Location:

trunk/Tools

Files:

• ChangeLog (modified) (1 diff)
• LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js (modified) (3 diffs)
• LayoutReloaded/LayoutTree/Box.js (modified) (4 diffs)
• LayoutReloaded/Utils.js (modified) (2 diffs)
• LayoutReloaded/misc/headers/Box.h (modified) (1 diff)

trunk/Tools/ChangeLog

@@ +1 @@
+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>
 

trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js

@@ -66 +66 @@
                 // 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);
@@ -80 +77 @@
             }
         }
-        // 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());
    }
@@ -122 +120 @@
 
     _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);
+        }
     }
 

trunk/Tools/LayoutReloaded/LayoutTree/Box.js

@@ -178 +178 @@
         // 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));
     }
@@ -187 +187 @@
 
     isPositioned() {
-        return this.isOutOfFlowPositioned() || this.isRelativePositioned();
-    }
-
-    isRelativePositioned() {
-        return Utils.isRelativePositioned(this);
-    }
-
-    isAbsolutePositioned() {
-        return Utils.isAbsolutePositioned(this);
+        return this.isOutOfFlowPositioned() || this.isRelativelyPositioned();
+    }
+
+    isRelativelyPositioned() {
+        return Utils.isRelativelyPositioned(this);
+    }
+
+    isAbsolutelyPositioned() {
+        return Utils.isAbsolutelyPositioned(this) || this.isFixedPositioned();
     }
 
@@ -209 +209 @@
 
     isOutOfFlowPositioned() {
-        return this.isAbsolutePositioned() || this.isFixedPositioned();
+        return this.isAbsolutelyPositioned() || this.isFixedPositioned();
     }
 
@@ -235 +235 @@
         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();
-        }
-        return parent;
+        if (this.isAbsolutelyPositioned() && !this.isFixedPositioned()) {
+            let ascendant = this.parent();
+            while (ascendant.parent() && !ascendant.isPositioned())
+                ascendant = ascendant.parent();
+            return ascendant;
+        }
+        if (this.isFixedPositioned()) {
+            let ascendant = this.parent();
+            while (ascendant.parent())
+                ascendant = ascendant.parent();
+            return ascendant;
+        }
+        ASSERT_NOT_REACHED();
+        return null;
     }
 

trunk/Tools/LayoutReloaded/Utils.js

@@ -432 +432 @@
     }
 
-    static isRelativePositioned(box) {
+    static isRelativelyPositioned(box) {
         if (box.isAnonymous())
             return false;
@@ -439 +439 @@
     }
 
-    static isAbsolutePositioned(box) {
+    static isAbsolutelyPositioned(box) {
         if (box.isAnonymous())
             return false;

trunk/Tools/LayoutReloaded/misc/headers/Box.h

@@ -69 +69 @@
     bool isInFlow() const;
     bool isPositioned() const;
-    bool isRelativePositioned() const;
-    bool isAbsolutePositioned() const;
+    bool isRelativelyPositioned() const;
+    bool isAbsolutelyPositioned() const;
     bool isFixedPositioned() const;
     bool isOutOfFlowPositioned() const;