Changeset 230469 in webkit

Timestamp:

Apr 9, 2018 10:06:37 PM (6 years ago)

Author:

Alan Bujtas

Message:

[LayoutReloaded] Add support for relatively positioned containers in inline formatting context.
​https://bugs.webkit.org/show_bug.cgi?id=184439

Reviewed by Antti Koivisto.

• LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:

(BlockFormattingContext.prototype._placeInFlowPositionedChildren): Deleted.
(BlockFormattingContext.prototype._computeInFlowPositionedPosition): Deleted.

• LayoutReloaded/FormattingContext/FormattingContext.js:

(FormattingContext.prototype._computeInFlowPositionedPosition):
(FormattingContext.prototype._placeInFlowPositionedChildren):

• LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:

(InlineFormattingContext.prototype._placeInFlowPositionedChildren): Deleted.

• LayoutReloaded/Utils.js:

(Utils._dumpBox):
(Utils._dumpLines.):
(Utils._dumpLines):
(Utils.precisionRoundWithDecimals):
(Utils.precisionRound):
(Utils):

• LayoutReloaded/test/index.html:
• LayoutReloaded/test/inline-with-relative-positioning.html: Added.

Location:

trunk/Tools

Files:

• ChangeLog (modified) (1 diff)
• LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js (modified) (2 diffs)
• LayoutReloaded/FormattingContext/FormattingContext.js (modified) (1 diff)
• LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (modified) (1 diff)
• LayoutReloaded/Utils.js (modified) (3 diffs)
• LayoutReloaded/test/index.html (modified) (1 diff)
• LayoutReloaded/test/inline-with-relative-positioning.html (added)

trunk/Tools/ChangeLog

@@ +1 @@
+2018-04-09  Zalan Bujtas  <zalan@apple.com>
+
+        [LayoutReloaded] Add support for relatively positioned containers in inline formatting context.
+        https://bugs.webkit.org/show_bug.cgi?id=184439
+
+        Reviewed by Antti Koivisto.
+
+        * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
+        (BlockFormattingContext.prototype._placeInFlowPositionedChildren): Deleted.
+        (BlockFormattingContext.prototype._computeInFlowPositionedPosition): Deleted.
+        * LayoutReloaded/FormattingContext/FormattingContext.js:
+        (FormattingContext.prototype._computeInFlowPositionedPosition):
+        (FormattingContext.prototype._placeInFlowPositionedChildren):
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext.prototype._placeInFlowPositionedChildren): Deleted.
+        * LayoutReloaded/Utils.js:
+        (Utils._dumpBox):
+        (Utils._dumpLines.):
+        (Utils._dumpLines):
+        (Utils.precisionRoundWithDecimals):
+        (Utils.precisionRound):
+        (Utils):
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/inline-with-relative-positioning.html: Added.
+
 2018-04-09  Zalan Bujtas  <zalan@apple.com>
 

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

@@ -117 +117 @@
         position.moveBy(new LayoutSize(this.marginLeft(layoutBox), this.marginTop(layoutBox)));
         this.displayBox(layoutBox).setTopLeft(position);
-    }
-
-    _placeInFlowPositionedChildren(container) {
-        if (!container.isContainer())
-            return;
-        // If this layoutBox also establishes a formatting context, then positioning already has happend at the formatting context.
-        if (container.establishesFormattingContext() && container != this.formattingRoot())
-            return;
-        ASSERT(container.isContainer());
-        for (let inFlowChild = container.firstInFlowChild(); inFlowChild; inFlowChild = inFlowChild.nextInFlowSibling()) {
-            if (!inFlowChild.isInFlowPositioned())
-                continue;
-            this._computeInFlowPositionedPosition(inFlowChild);
-        }
     }
 
@@ -278 +264 @@
         }
         return bottom;
-    }
-
-    _computeInFlowPositionedPosition(layoutBox) {
-        // Start with the original, static position.
-        let displayBox = this.displayBox(layoutBox);
-        let relativePosition = displayBox.topLeft();
-        // Top/bottom
-        if (!Utils.isTopAuto(layoutBox))
-            relativePosition.shiftTop(Utils.top(layoutBox));
-        else if (!Utils.isBottomAuto(layoutBox))
-            relativePosition.shiftTop(-Utils.bottom(layoutBox));
-        // Left/right
-        if (!Utils.isLeftAuto(layoutBox))
-            relativePosition.shiftLeft(Utils.left(layoutBox));
-        else if (!Utils.isRightAuto(layoutBox))
-            relativePosition.shiftLeft(-Utils.right(layoutBox));
-        displayBox.setTopLeft(relativePosition);
     }
 

trunk/Tools/LayoutReloaded/FormattingContext/FormattingContext.js

@@ -118 +118 @@
     }
 
+    _computeInFlowPositionedPosition(layoutBox) {
+        // Start with the original, static position.
+        let displayBox = this.displayBox(layoutBox);
+        let relativePosition = displayBox.topLeft();
+        // Top/bottom
+        if (!Utils.isTopAuto(layoutBox))
+            relativePosition.shiftTop(Utils.top(layoutBox));
+        else if (!Utils.isBottomAuto(layoutBox))
+            relativePosition.shiftTop(-Utils.bottom(layoutBox));
+        // Left/right
+        if (!Utils.isLeftAuto(layoutBox))
+            relativePosition.shiftLeft(Utils.left(layoutBox));
+        else if (!Utils.isRightAuto(layoutBox))
+            relativePosition.shiftLeft(-Utils.right(layoutBox));
+        displayBox.setTopLeft(relativePosition);
+    }
+
+    _placeInFlowPositionedChildren(container) {
+        if (!container.isContainer())
+            return;
+        // If this layoutBox also establishes a formatting context, then positioning already has happend at the formatting context.
+        if (container.establishesFormattingContext() && container != this.formattingRoot())
+            return;
+        ASSERT(container.isContainer());
+        for (let inFlowChild = container.firstInFlowChild(); inFlowChild; inFlowChild = inFlowChild.nextInFlowSibling()) {
+            if (!inFlowChild.isInFlowPositioned())
+                continue;
+            this._computeInFlowPositionedPosition(inFlowChild);
+        }
+    }
+
     _outOfFlowDescendants() {
         // FIXME: This is highly inefficient but will do for now.

trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js

@@ -153 +153 @@
     }
 
-    _placeInFlowPositionedChildren(container) {
-
-    }
-
     _placeOutOfFlowDescendants(container) {
 

trunk/Tools/LayoutReloaded/Utils.js

@@ -572 +572 @@
                 return indentation + "#text RenderText\n";
         }
-        if (box.name() == "RenderInline")
+        if (box.name() == "RenderInline") {
+            if (box.isInFlowPositioned()) {
+                let displayBox = Utils._findDisplayBox(layoutState, box);
+                let boxRect = displayBox.rect();
+                return indentation + box.node().tagName + " " + box.name() + "  (" + Utils.precisionRoundWithDecimals(boxRect.left()) + ", " + Utils.precisionRoundWithDecimals(boxRect.top()) + ")\n";
+            }
             return indentation + box.node().tagName + " " + box.name() + "\n";
+        }
         if (box.isAnonymous())
             return "";
@@ -589 +595 @@
         lines.forEach(function(line) {
             let lineRect = line.rect();
-            content += indentation + "RootInlineBox at (" + lineRect.left() + "," + lineRect.top() + ") size " + Utils.precisionRound(lineRect.width(), 2) + "x" + lineRect.height() + "\n";
+            content += indentation + "RootInlineBox at (" + lineRect.left() + "," + lineRect.top() + ") size " + Utils.precisionRound(lineRect.width()) + "x" + lineRect.height() + "\n";
             line.lineBoxes().forEach(function(lineBox) {
                 let indentation = " ".repeat(level + 1);
                 let inlineBoxName = lineBox.startPosition === undefined ? "InlineBox" : "InlineTextBox";
-                content += indentation +  inlineBoxName + " at (" + Utils.precisionRound(lineBox.lineBoxRect.left(), 2) + "," + Utils.precisionRound(lineBox.lineBoxRect.top(), 2) + ") size " + Utils.precisionRound(lineBox.lineBoxRect.width(), 2) + "x" + lineBox.lineBoxRect.height() + "\n";
+                content += indentation +  inlineBoxName + " at (" + Utils.precisionRound(lineBox.lineBoxRect.left()) + "," + Utils.precisionRound(lineBox.lineBoxRect.top()) + ") size " + Utils.precisionRound(lineBox.lineBoxRect.width()) + "x" + lineBox.lineBoxRect.height() + "\n";
             });
         });
@@ -611 +617 @@
     }
 
-    static precisionRound(number, precision) {
-        let factor = Math.pow(10, precision);
+    static precisionRoundWithDecimals(number) {
+        return number.toFixed(2);
+    }
+
+    static precisionRound(number) {
+        let factor = Math.pow(10, 2);
         return Math.round(number * factor) / factor;
     }

trunk/Tools/LayoutReloaded/test/index.html

@@ -80 +80 @@
     "inline-formatting-context-floats2.html",
     "inline-with-padding-border-margin-offsets.html",
-    "inline-block-with-fixed-width-height.html"
+    "inline-block-with-fixed-width-height.html",
+    "inline-with-relative-positioning.html"
 ];