[LayoutReloaded] Enable formatting state for InlineFormattingContext
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Mar 2018 16:32:00 +0000 (16:32 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Mar 2018 16:32:00 +0000 (16:32 +0000)
https://bugs.webkit.org/show_bug.cgi?id=183853

Reviewed by Antti Koivisto.

* LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
(BlockFormattingContext.prototype._contentHeight):
* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext):
(InlineFormattingContext.prototype.layout):
(InlineFormattingContext.prototype._createNewLine):
* LayoutReloaded/LayoutState.js:
(LayoutState.prototype.formattingState):
* LayoutReloaded/README.md:
* LayoutReloaded/Utils.js:
(Utils._dumpTree):
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/simple-inline-text.html: Added.

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

Tools/ChangeLog
Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js
Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js
Tools/LayoutReloaded/LayoutState.js
Tools/LayoutReloaded/README.md
Tools/LayoutReloaded/Utils.js
Tools/LayoutReloaded/test/index.html
Tools/LayoutReloaded/test/simple-inline-text.html [new file with mode: 0644]

index 8f8a92cc6a85642f66afacf0c4ec624bd268fc04..2392fd2efa65b99060e4faf986655542463b730f 100644 (file)
@@ -1,3 +1,24 @@
+2018-03-21  Zalan Bujtas  <zalan@apple.com>
+
+        [LayoutReloaded] Enable formatting state for InlineFormattingContext
+        https://bugs.webkit.org/show_bug.cgi?id=183853
+
+        Reviewed by Antti Koivisto.
+
+        * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
+        (BlockFormattingContext.prototype._contentHeight):
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext):
+        (InlineFormattingContext.prototype.layout):
+        (InlineFormattingContext.prototype._createNewLine):
+        * LayoutReloaded/LayoutState.js:
+        (LayoutState.prototype.formattingState):
+        * LayoutReloaded/README.md:
+        * LayoutReloaded/Utils.js:
+        (Utils._dumpTree):
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/simple-inline-text.html: Added.
+
 2018-03-21  Zalan Bujtas  <zalan@apple.com>
 
         [LayoutReloaded] Move inline lines to InlineFormattingState.
index 4f39a0a7fd4ff60ce4b8e46191500672a0bb2a99..2679b9dfb971e26c5fd8ad6f722e55a460223b1d 100644 (file)
@@ -263,7 +263,7 @@ class BlockFormattingContext extends FormattingContext {
         if (!layoutBox.isContainer() || !layoutBox.hasInFlowChild())
             return 0;
         if (layoutBox.establishesInlineFormattingContext()) {
-            let lines = layoutBox.establishedFormattingContext().lines();
+            let lines = this.layoutState().formattingState(layoutBox).lines();
             if (!lines.length)
                 return 0;
             let lastLine = lines[lines.length - 1];
index 8b897f38e6e6085b4132cdef64a07c344e8be707..15aef673472b8032262f9737645019c6a8981760 100644 (file)
@@ -27,8 +27,8 @@ class InlineFormattingContext extends FormattingContext {
     constructor(inlineFormattingState) {
         super(inlineFormattingState);
         // If the block container box that initiates this inline formatting contex also establishes a block context, create a new float for us.
-        ASSERT(root.isBlockContainerBox());
-        if (root.establishesBlockFormattingContext())
+        ASSERT(this.formattingRoot().isBlockContainerBox());
+        if (this.formattingRoot().establishesBlockFormattingContext())
             this.m_floatingContext = new FloatingContext(this);
         this.m_line = this._createNewLine();
     }
@@ -41,7 +41,7 @@ class InlineFormattingContext extends FormattingContext {
         // This is a post-order tree traversal layout.
         // 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.
         this._addToLayoutQueue(this.formattingRoot().firstChild());
-        while (layoutStack.length) {
+        while (this._descendantNeedsLayout()) {
             // Travers down on the descendants until we find a leaf node.
             while (true) {
                 let layoutBox = this._nextInLayoutQueue();
@@ -53,7 +53,7 @@ class InlineFormattingContext extends FormattingContext {
                     break;
                 this._addToLayoutQueue(layoutBox.firstChild());
             }
-            while (layoutStack.length) {
+            while (this._descendantNeedsLayout()) {
                 let layoutBox = this._nextInLayoutQueue();
                 this._handleInlineBox(layoutBox);
                 // We are done with laying out this box.
@@ -100,8 +100,8 @@ class InlineFormattingContext extends FormattingContext {
 
     _createNewLine() {
         // TODO: Floats need to be taken into account.
-        let contentBoxRect = this.formattingRoot().contentBox();
-        this.m_line = new Line(contentBoxRect.topLeft(), Utils.computedLineHeight(this.formattingRoot()), contentBoxRect.width());
+        let contentBoxRect = this.displayBox(this.formattingRoot()).contentBox();
+        return new Line(contentBoxRect.topLeft(), Utils.computedLineHeight(this.formattingRoot().node()), contentBoxRect.width());
     }
 }
 
index b0ae60ee9cb1492003a94d7c29948fb9796cd8d9..4f05333e9fe32c3a487d4d99d2a1db1b7ae53b4a 100644 (file)
@@ -49,6 +49,10 @@ class LayoutState {
         return this.m_formattingStates;
     }
 
+    formattingState(formattingRoot) {
+        return this.m_formattingStates.get(formattingRoot);
+    }
+
     initialDisplayBox() {
         return this.m_initialDisplayBox;
     }
index a22f72fd2615411c87237da4b95c64b30030fedc..2a6fbb22a08a74478b6dbaf2e02091ffc8a95542 100644 (file)
@@ -4,13 +4,15 @@ See https://www.w3.org/TR/CSS22/visuren.html for more information.
 WebCore
 1. recursive layout
 2. layout logic lives in the renderers mixing block with inline etc.
+3. No clear separation of logic and state.
 
 LayoutReloaded
-1. iterative layout within a formatting context, recursive across nested formatting contexts 
-2. formatting context is responsible for computing size/positions for all the boxes that live in the
+1. Iterative layout within a formatting context, recursive across nested formatting contexts 
+2. Formatting context is responsible for computing size/positions for all the boxes that live in the
 context including in/out-of-flow and floating boxes
+3. Layout state is stored in dedicated FormattingState objects.
 3. Initial containing block creates the top level (initial) block formatting context
-4. Floats are resitriced to their containing blocks.
+4. Floats are resitriced to their formatting contexts.
 5. Boxes, including inline tree are generated while laying out the content. LayoutTree -> BoxTree.
 
 Instructions:
@@ -18,22 +20,6 @@ Instructions:
 2. compile WebKit
 3. load ./test/index.html
 
-Design:
-FormattingContext
- - BlockFormattingContext
- - InlineFormattingContext (not yet implemented)
- - TableFormattingContext (not yet implemented)
- - FlexFormattingContext (not yet implemented)
- - etc.
-
-Box
- - Container
-  - BlockContainer
-   - InitialBlockContainer
-  - InlineContainer (not yet)
- - InlineBox (not yet)
-
 Partially done:
 Block formatting context:
 - static, relative and out of flow positioning
index 81d8c42ff67a59dcc0a80845efe324f888142417..7c6f3b0866a4b31bee064dfefdf1947de9eb59f2 100644 (file)
@@ -520,10 +520,10 @@ class Utils {
         return indentation + (box.node().tagName ? (box.node().tagName + " ") : "")  + box.name() + " at (" + boxRect.left() + "," + boxRect.top() + ") size " + boxRect.width() + "x" + boxRect.height() + "\n";
     }
 
-    static _dumpLines(root, level) {
+    static _dumpLines(layoutState, root, level) {
         ASSERT(root.establishesInlineFormattingContext());
-        let inlineFormattingContext = root.establishedFormattingContext();
-        let lines = inlineFormattingContext.lines();
+        let inlineFormattingState = layoutState.formattingState(root);
+        let lines = inlineFormattingState.lines();
         let content = "";
         let indentation = " ".repeat(level);
         lines.forEach(function(line) {
@@ -540,7 +540,7 @@ class Utils {
     static _dumpTree(layoutState, root, level) {
         let content = "";
         if (root.isBlockContainerBox() && root.establishesInlineFormattingContext())
-            content += this._dumpLines(root, level);
+            content += this._dumpLines(layoutState, root, level);
         for (let child = root.firstChild(); child; child = child.nextSibling()) {
             content += this._dumpBox(layoutState, child, level);
             if (child.isContainer())
index 7d5d63273a94eea0b4a52c98d2a77d36d9794ce6..9dc87533a5191103729619a226a8e538bc80857c 100644 (file)
@@ -61,7 +61,8 @@ let testFiles = [
     "floating-box-clear-both-simple.html",
     "almost-intruding-left-float-simple.html",
     "negative-margin-simple.html",
-    "intruding-left-float-simple.html"
+    "intruding-left-float-simple.html",
+    "simple-inline-text.html"
 ];
 
 let debugThis = [];
diff --git a/Tools/LayoutReloaded/test/simple-inline-text.html b/Tools/LayoutReloaded/test/simple-inline-text.html
new file mode 100644 (file)
index 0000000..47a7127
--- /dev/null
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+<body><div>foobar</div></body>
+</html>