[layoutReloaded] Introduce margin to Display.Box

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

Reviewed by Antti Koivisto.

This is in preparation for moving margin box out of formatting context to Display.Box.

* LayoutReloaded/DisplayTree/Box.js:
(Display.Box):
(Display.Box.prototype.setRect):
(Display.Box.prototype.setTopLeft):
(Display.Box.prototype.setTop):
(Display.Box.prototype.setLeft):
(Display.Box.prototype.setSize):
(Display.Box.prototype.setWidth):
(Display.Box.prototype.setHeight):
(Display.Box.prototype.width):
(Display.Box.prototype.setMarginTop):
(Display.Box.prototype.setMarginLeft):
(Display.Box.prototype.setMarginBottom):
(Display.Box.prototype.setMarginRight):
(Display.Box.prototype.marginTop):
(Display.Box.prototype.marginLeft):
(Display.Box.prototype.marginBottom):
(Display.Box.prototype.marginRight):
(Display.Box.prototype.marginBox):
* LayoutReloaded/FormattingContext/FormattingContext.js:
(FormattingContext.prototype.absoluteMarginBox):
(FormattingContext.prototype._addToLayoutQueue):
* LayoutReloaded/FormattingState/FormattingState.js:
(FormattingState.prototype.createDisplayBox):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@230135 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Tools/ChangeLog b/Tools/ChangeLog
index 30c9a745e863b8912ab15f66d586695832b62d22..129efda7cfc3935cff84ef5406e0495d29ef70a3 100644 (file)
--- a/Tools/ChangeLog
+++ b/Tools/ChangeLog
@@ -1,3 +1,37 @@
+2018-03-31  Zalan Bujtas  <zalan@apple.com>
+
+        [layoutReloaded] Introduce margin to Display.Box
+        https://bugs.webkit.org/show_bug.cgi?id=184212
+
+        Reviewed by Antti Koivisto.
+
+        This is in preparation for moving margin box out of formatting context to Display.Box.
+
+        * LayoutReloaded/DisplayTree/Box.js:
+        (Display.Box):
+        (Display.Box.prototype.setRect):
+        (Display.Box.prototype.setTopLeft):
+        (Display.Box.prototype.setTop):
+        (Display.Box.prototype.setLeft):
+        (Display.Box.prototype.setSize):
+        (Display.Box.prototype.setWidth):
+        (Display.Box.prototype.setHeight):
+        (Display.Box.prototype.width):
+        (Display.Box.prototype.setMarginTop):
+        (Display.Box.prototype.setMarginLeft):
+        (Display.Box.prototype.setMarginBottom):
+        (Display.Box.prototype.setMarginRight):
+        (Display.Box.prototype.marginTop):
+        (Display.Box.prototype.marginLeft):
+        (Display.Box.prototype.marginBottom):
+        (Display.Box.prototype.marginRight):
+        (Display.Box.prototype.marginBox):
+        * LayoutReloaded/FormattingContext/FormattingContext.js:
+        (FormattingContext.prototype.absoluteMarginBox):
+        (FormattingContext.prototype._addToLayoutQueue):
+        * LayoutReloaded/FormattingState/FormattingState.js:
+        (FormattingState.prototype.createDisplayBox):
+
 2018-03-31  Zalan Bujtas  <zalan@apple.com>
 
         [LayoutReloaded] Add tree context to Display.Box

diff --git a/Tools/LayoutReloaded/DisplayTree/Box.js b/Tools/LayoutReloaded/DisplayTree/Box.js
index 761ef6ee7093bd75f28b7eed88a0fae2ffbb5a64..47ed150db5c351b08d81161f1acc7ddc79e317ba 100644 (file)
--- a/Tools/LayoutReloaded/DisplayTree/Box.js
+++ b/Tools/LayoutReloaded/DisplayTree/Box.js
@@ -29,6 +29,10 @@ Display.Box = class Box {
     constructor(node) {
         this.m_node = node;
         this.m_rect = new LayoutRect(new LayoutPoint(0, 0), new LayoutSize(0, 0));
+        this.m_marginTop = 0;
+        this.m_marginLeft = 0;
+        this.m_marginBottom = 0;
+        this.m_marginRight = 0;
         this.m_parent = null;
         this.m_nextSibling = null;
         this.m_previousSibling = null;
@@ -42,14 +46,38 @@ Display.Box = class Box {
         return cloneBox;
     }
 
+    setRect(rect) {
+        return this.m_rect = rect;
+    }
+
+    setTopLeft(topLeft) {
+        this.m_rect.setTopLeft(topLeft);
+    }
+
+    setTop(top) {
+        this.m_rect.setTop(top);
+    }
+
+    setLeft(left) {
+        this.m_rect.setLeft(left);
+    }
+
+    setSize(size) {
+        this.m_rect.setSize(size);
+    }
+
+    setWidth(width) {
+        this.m_rect.setWidth(width);
+    }
+
+    setHeight(height) {
+        this.m_rect.setHeight(height);
+    }
+
     rect() {
         return this.m_rect.clone();
     }
 
-    setRect(rect) {
-        return this.m_rect = rect;
-    }
-    
     top() {
         return this.rect().top();
     }
@@ -78,34 +106,53 @@ Display.Box = class Box {
         return this.rect().size();
     }
 
+    width() {
+        return this.rect().width();
+    }
+
     height() {
         return this.rect().height();
     }
 
-    width() {
-        return this.rect().width();
-    }
+    setMarginTop(marginTop) {
+        this.m_marginTop = marginTop;
+     }
 
-    setTopLeft(topLeft) {
-        this.m_rect.setTopLeft(topLeft);
+    setMarginLeft(marginLeft) {
+        this.m_marginLeft = marginLeft;
+     }
+
+    setMarginBottom(marginBottom) {
+        this.m_marginBottom = marginBottom;
+     }
+
+    setMarginRight(marginRight) {
+        this.m_marginRight = marginRight;
     }
 
-    setTop(top) {
-        this.m_rect.setTop(top);
+    marginTop() {
+        return this.m_marginTop;
     }
 
-    setSize(size) {
-        this.m_rect.setSize(size);
+    marginLeft() {
+        return this.m_marginLeft;
     }
 
-    setWidth(width) {
-        this.m_rect.setWidth(width);
+    marginBottom() {
+        return this.m_marginBottom;
     }
 
-    setHeight(height) {
-        this.m_rect.setHeight(height);
+    marginRight() {
+        return this.m_marginRight;
     }
 
+    marginBox() {
+        let marginBox = this.rect();
+        marginBox.moveBy(new LayoutSize(-this.m_marginLeft, -this.m_marginTop));
+        marginBox.growBy(new LayoutSize(this.m_marginLeft + this.m_marginRight, this.m_marginTop + this.m_marginBottom));
+        return marginBox;
+     }
+
     borderBox() {
         return new LayoutRect(new LayoutPoint(0, 0), this.rect().size());
     }

diff --git a/Tools/LayoutReloaded/FormattingContext/FormattingContext.js b/Tools/LayoutReloaded/FormattingContext/FormattingContext.js
index 420e3399c974d81b14015bf2b73f015104ea1706..c1455d495f59c2b7cfd9078e6dc88f98df799e63 100644 (file)
--- a/Tools/LayoutReloaded/FormattingContext/FormattingContext.js
+++ b/Tools/LayoutReloaded/FormattingContext/FormattingContext.js
@@ -74,10 +74,10 @@ class FormattingContext {
 
     absoluteMarginBox(layoutBox) {
         let displayBox = this.displayBox(layoutBox);
-        let absoluteContentBox = new LayoutRect(this._toRootAbsolutePosition(layoutBox), displayBox.size());
-        absoluteContentBox.moveBy(new LayoutSize(-this.marginLeft(layoutBox), -this.marginTop(layoutBox)));
-        absoluteContentBox.growBy(new LayoutSize(this.marginLeft(layoutBox) + this.marginRight(layoutBox), this.marginTop(layoutBox) + this.marginBottom(layoutBox)));
-        return absoluteContentBox;
+        let absoluteRect = new LayoutRect(this._toRootAbsolutePosition(layoutBox), displayBox.borderBox().size());
+        absoluteRect.moveBy(new LayoutSize(-displayBox.marginLeft(), -displayBox.marginTop()));
+        absoluteRect.growBy(new LayoutSize(displayBox.marginLeft() + displayBox.marginRight(), displayBox.marginTop() + displayBox.marginBottom()));
+        return absoluteRect;
     }
 
     absoluteBorderBox(layoutBox) {
@@ -124,7 +124,14 @@ class FormattingContext {
 
     _addToLayoutQueue(layoutBox) {
         // Initialize the corresponding display box.
-        this.formattingState().createDisplayBox(layoutBox);
+        let displayBox = this.formattingState().createDisplayBox(layoutBox, this);
+        if (layoutBox.node()) {
+            displayBox.setMarginTop(this.marginTop(layoutBox));
+            displayBox.setMarginLeft(this.marginLeft(layoutBox));
+            displayBox.setMarginBottom(this.marginBottom(layoutBox));
+            displayBox.setMarginRight(this.marginRight(layoutBox));
+        }
+
         this.m_layoutStack.push(layoutBox);
     }
 

diff --git a/Tools/LayoutReloaded/FormattingState/FormattingState.js b/Tools/LayoutReloaded/FormattingState/FormattingState.js
index 910fb47f930f06850af6f775ab6113710afb6d18..00ce91a1c76b403705a85d8bb03695a3fb132ecc 100644 (file)
--- a/Tools/LayoutReloaded/FormattingState/FormattingState.js
+++ b/Tools/LayoutReloaded/FormattingState/FormattingState.js
@@ -57,6 +57,7 @@ class FormattingState {
             parentDisplayBox.setLastChild(displayBox);
         }
         this.m_displayToLayout.set(layoutBox, displayBox);
+        return displayBox;
     }
 
     displayBoxMap() {