Changeset 229671 in webkit

Timestamp:

Mar 16, 2018 10:12:24 AM (6 years ago)

Author:

Alan Bujtas

Message:

[LayoutReloaded] Introduce Display.Box
​https://bugs.webkit.org/show_bug.cgi?id=183700

Reviewed by Antti Koivisto.

Display.Box objects will end up in the display(box) tree. Currently
they are just hanging off of the Layout.Box objects.

• LayoutReloaded/DisplayTree/Box.js: Added.

(Display.Box):
(Display.Box.prototype.rect):
(Display.Box.prototype.top):
(Display.Box.prototype.left):
(Display.Box.prototype.bottom):
(Display.Box.prototype.right):
(Display.Box.prototype.topLeft):
(Display.Box.prototype.bottomRight):
(Display.Box.prototype.setTopLeft):
(Display.Box.prototype.setSize):
(Display.Box.prototype.setWidth):
(Display.Box.prototype.setHeight):
(Display.Box.prototype.borderBox):
(Display.Box.prototype.paddingBox):
(Display.Box.prototype.contentBox):

• LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:

(BlockFormattingContext):
(BlockFormattingContext.prototype.layout):
(BlockFormattingContext.prototype._toAbsolutePosition):
(BlockFormattingContext.prototype._needsLayout):
(BlockFormattingContext.prototype._addToLayoutQueue):
(BlockFormattingContext.prototype._nextInLayoutQueue):
(BlockFormattingContext.prototype._removeFromLayoutQueue):
(BlockFormattingContext.prototype._createDisplayBox):
(BlockFormattingContext.prototype._toDisplayBox):
(BlockFormattingContext.prototype._toLayoutBox):

• LayoutReloaded/Layout.js:

(layout):

• LayoutReloaded/LayoutReloaded.xcworkspace/contents.xcworkspacedata:
• LayoutReloaded/LayoutTree/Box.js:

(Layout.Box):
(Layout.Box.prototype.setDisplayBox):
(Layout.Box.prototype.displayBox):
(Layout.Box.prototype.rect):
(Layout.Box.prototype.setTopLeft):
(Layout.Box.prototype.setSize):
(Layout.Box.prototype.setWidth):
(Layout.Box.prototype.setHeight):
(Layout.Box.prototype.borderBox):
(Layout.Box.prototype.paddingBox):
(Layout.Box.prototype.contentBox):

• LayoutReloaded/test/index.html:

Location:

trunk/Tools

Files:

• ChangeLog (modified) (1 diff)
• LayoutReloaded/DisplayTree (added)
• LayoutReloaded/DisplayTree/Box.js (added)
• LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js (modified) (5 diffs)
• LayoutReloaded/Layout.js (modified) (1 diff)
• LayoutReloaded/LayoutReloaded.xcworkspace/contents.xcworkspacedata (modified) (1 diff)
• LayoutReloaded/LayoutTree/Box.js (modified) (4 diffs)
• LayoutReloaded/test/index.html (modified) (1 diff)

trunk/Tools/ChangeLog

@@ +1 @@
+2018-03-16  Zalan Bujtas  <zalan@apple.com>
+
+        [LayoutReloaded] Introduce Display.Box
+        https://bugs.webkit.org/show_bug.cgi?id=183700
+
+        Reviewed by Antti Koivisto.
+
+        Display.Box objects will end up in the display(box) tree. Currently
+        they are just hanging off of the Layout.Box objects.
+
+        * LayoutReloaded/DisplayTree/Box.js: Added.
+        (Display.Box):
+        (Display.Box.prototype.rect):
+        (Display.Box.prototype.top):
+        (Display.Box.prototype.left):
+        (Display.Box.prototype.bottom):
+        (Display.Box.prototype.right):
+        (Display.Box.prototype.topLeft):
+        (Display.Box.prototype.bottomRight):
+        (Display.Box.prototype.setTopLeft):
+        (Display.Box.prototype.setSize):
+        (Display.Box.prototype.setWidth):
+        (Display.Box.prototype.setHeight):
+        (Display.Box.prototype.borderBox):
+        (Display.Box.prototype.paddingBox):
+        (Display.Box.prototype.contentBox):
+        * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
+        (BlockFormattingContext):
+        (BlockFormattingContext.prototype.layout):
+        (BlockFormattingContext.prototype._toAbsolutePosition):
+        (BlockFormattingContext.prototype._needsLayout):
+        (BlockFormattingContext.prototype._addToLayoutQueue):
+        (BlockFormattingContext.prototype._nextInLayoutQueue):
+        (BlockFormattingContext.prototype._removeFromLayoutQueue):
+        (BlockFormattingContext.prototype._createDisplayBox):
+        (BlockFormattingContext.prototype._toDisplayBox):
+        (BlockFormattingContext.prototype._toLayoutBox):
+        * LayoutReloaded/Layout.js:
+        (layout):
+        * LayoutReloaded/LayoutReloaded.xcworkspace/contents.xcworkspacedata:
+        * LayoutReloaded/LayoutTree/Box.js:
+        (Layout.Box):
+        (Layout.Box.prototype.setDisplayBox):
+        (Layout.Box.prototype.displayBox):
+        (Layout.Box.prototype.rect):
+        (Layout.Box.prototype.setTopLeft):
+        (Layout.Box.prototype.setSize):
+        (Layout.Box.prototype.setWidth):
+        (Layout.Box.prototype.setHeight):
+        (Layout.Box.prototype.borderBox):
+        (Layout.Box.prototype.paddingBox):
+        (Layout.Box.prototype.contentBox):
+        * LayoutReloaded/test/index.html:
+
 2018-03-16  Chris Dumez  <cdumez@apple.com>
 

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

@@ -28 +28 @@
         // New block formatting context always establishes a new floating context.
         this.m_floatingContext = new FloatingContext(this);
+        this.m_displayToLayout = new Map();
+        this.m_layoutToDisplay = new Map();
+        this.m_layoutStack = new Array();
     }
 
@@ -38 +41 @@
             return;
         // This is a post-order tree traversal layout.
-        let layoutStack = new Array();
         // The root container layout is done in the formatting context it lives in, not that one it creates, so let's start with the first child.
-        layoutStack.push(this.rootContainer().firstChild());
+        this._addToLayoutQueue(this.rootContainer().firstChild());
         // 1. Go all the way down to the leaf node
         // 2. Compute static position and width as we travers down
         // 3. As we climb back on the tree, compute height and finialize position
         // (Any subtrees with new formatting contexts need to layout synchronously)
-        while (layoutStack.length) {
+        while (this._needsLayout()) {
             // Travers down on the descendants until we find a leaf node.
             while (true) {
-                let layoutBox = layoutStack[layoutStack.length - 1];
+                let layoutBox = this._nextInLayoutQueue();
                 this.computeWidth(layoutBox);
                 this._computeStaticPosition(layoutBox);
@@ -57 +59 @@
                 if (!layoutBox.isContainer() || !layoutBox.hasChild())
                     break;
-                layoutStack.push(layoutBox.firstChild());
+                this._addToLayoutQueue(layoutBox.firstChild());
             }
 
             // Climb back on the ancestors and compute height/final position.
-            while (layoutStack.length) {
+            while (this._needsLayout()) {
                 // All inflow descendants (if there are any) are laid out by now. Let's compute the box's height.
-                let layoutBox = layoutStack.pop();
+                let layoutBox = this._nextInLayoutQueue();
                 this.computeHeight(layoutBox);
                 // Adjust position now that we have all the previous floats placed in this context -if needed.
@@ -73 +75 @@
                     this._placeOutOfFlowDescendants(layoutBox);
                 }
+                // We are done with laying out this box.
+                this._removeFromLayoutQueue(layoutBox);
                 if (layoutBox.nextSibling()) {
-                    layoutStack.push(layoutBox.nextSibling());
+                    this._addToLayoutQueue(layoutBox.nextSibling());
                     break;
                 }
@@ -341 +345 @@
         return new LayoutRect(topLeft, layoutBox.rect().size());
     }
+
+    _needsLayout() {
+        return this.m_layoutStack.length;
+    }
+
+    _addToLayoutQueue(layoutBox) {
+        // Initialize the corresponding display box.
+        this._createDisplayBox(layoutBox);
+        this.m_layoutStack.push(layoutBox);
+    }
+
+    _nextInLayoutQueue() {
+        ASSERT(this.m_layoutStack.length);
+        return this.m_layoutStack[this.m_layoutStack.length - 1];
+    }
+
+    _removeFromLayoutQueue(layoutBox) {
+        // With the current layout logic, the layoutBox should be at the top (this.m_layoutStack.pop() should do).
+        ASSERT(this.m_layoutStack.length);
+        ASSERT(this.m_layoutStack[this.m_layoutStack.length - 1] == layoutBox);
+        this.m_layoutStack.splice(this.m_layoutStack.indexOf(layoutBox), 1);
+    }
+
+    _createDisplayBox(layoutBox) {
+        let displayBox = new Display.Box(layoutBox.node());
+        this.m_displayToLayout.set(displayBox, layoutBox);
+        this.m_layoutToDisplay.set(layoutBox, displayBox);
+        // This is temporary.
+        layoutBox.setDisplayBox(displayBox);
+    }
+
+    _toDisplayBox(layoutBox) {
+        ASSERT(layoutBox);
+        ASSERT(this.m_layoutToDisplay.has(layoutBox));
+        return this.m_layoutToDisplay.get(layout);
+    }
+
+    _toLayoutBox(displayBox) {
+        ASSERT(displayBox);
+        ASSERT(this.m_displayToLayout.has(displayBox));
+        return this.m_displayToLayout.get(layout);
+    }
 }
-

trunk/Tools/LayoutReloaded/Layout.js

@@ -27 +27 @@
     let treeBuilder = new TreeBuilder();
     let initialContainingBlock = treeBuilder.createTree(window.document, window.renderTreeStructure);
+    initialContainingBlock.setDisplayBox(new Display.Box());
     initialContainingBlock.setSize(viewportSize);
 

trunk/Tools/LayoutReloaded/LayoutReloaded.xcworkspace/contents.xcworkspacedata

@@ -2 +2 @@
 <Workspace
    version = "1.0">
+   <FileRef
+      location = "group:DisplayTree">
+   </FileRef>
    <FileRef
       location = "group:test">

trunk/Tools/LayoutReloaded/LayoutTree/Box.js

@@ -35 +35 @@
         this.m_previousSibling = null;
         this.m_isAnonymous = false;
-        this.m_rect = new LayoutRect(new LayoutPoint(0, 0), new LayoutSize(0, 0));
         this.m_establishedFormattingContext = null;
+        this.m_displayBox = null;
     }
 
@@ -99 +99 @@
     }
 
+    setDisplayBox(displayBox) {
+        ASSERT(!this.m_displayBox);
+        this.m_displayBox = displayBox;
+    }
+
+    displayBox() {
+        ASSERT(this.m_displayBox);
+        return this.m_displayBox;
+    }
+
     rect() {
-        return this.m_rect.clone();
+        return this.displayBox().rect();
     }
 
@@ -112 +122 @@
 
     setTopLeft(topLeft) {
-        this.m_rect.setTopLeft(topLeft);
+        this.displayBox().setTopLeft(topLeft);
     }
 
     setSize(size) {
-        this.m_rect.setSize(size);
+        this.displayBox().setSize(size);
     }
 
     setWidth(width) {
-        this.m_rect.setWidth(width);
+        this.displayBox().setWidth(width);
     }
 
     setHeight(height) {
-        this.m_rect.setHeight(height);
+        this.displayBox().setHeight(height);
     }
 
@@ -235 +245 @@
 
     borderBox() {
-        return new LayoutRect(new LayoutPoint(0, 0), this.rect().size());
+        return this.displayBox().borderBox();
     }
 
     paddingBox() {
-        let paddingBox = this.borderBox();
-        let borderSize = Utils.computedBorderTopLeft(this.node());
-        paddingBox.moveBy(borderSize);
-        paddingBox.shrinkBy(borderSize);
-        paddingBox.shrinkBy(Utils.computedBorderBottomRight(this.node()));
-        return paddingBox;
+        return this.displayBox().paddingBox();
     }
 
     contentBox() {
-        let contentBox = this.paddingBox();
-        let paddingSize = Utils.computedPaddingTopLeft(this.node());
-        contentBox.moveBy(paddingSize);
-        contentBox.shrinkBy(paddingSize);
-        contentBox.shrinkBy(Utils.computedPaddingBottomRight(this.node()));
-        return contentBox;
+        return this.displayBox().contentBox();
     }
 }

trunk/Tools/LayoutReloaded/test/index.html

@@ -82 +82 @@
 addJS("../LayoutTree/InlineBox.js");
 addJS("../LayoutTree/Text.js");
+addJS("../DisplayTree/Box.js");
 addJS("../FormattingContext/FormattingContext.js");
 addJS("../FormattingContext/FloatingContext.js");