[LayoutReloaded] Add support for replaced box.
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Apr 2018 05:17:26 +0000 (05:17 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Apr 2018 05:17:26 +0000 (05:17 +0000)
https://bugs.webkit.org/show_bug.cgi?id=184680

Reviewed by Antti Koivisto.

Basic support for inline replaced.

* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext.prototype._handleInlineBox):
(InlineFormattingContext.prototype._handleInlineBlock):
(InlineFormattingContext.prototype._handleReplaced):
* LayoutReloaded/FormattingContext/InlineFormatting/Line.js:
(Line.prototype.lastLineBox):
(Line.prototype.addInlineBox):
(Line.prototype.addInlineContainerBox): Deleted.
* LayoutReloaded/TreeBuilder.js:
(TreeBuilder.prototype._createAndAttachBox):
* LayoutReloaded/Utils.js:
(Utils._dumpBox):
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/inline-simple-replaced.html: Added.

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

Tools/ChangeLog
Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js
Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js
Tools/LayoutReloaded/TreeBuilder.js
Tools/LayoutReloaded/Utils.js
Tools/LayoutReloaded/test/index.html
Tools/LayoutReloaded/test/inline-simple-replaced.html [new file with mode: 0644]

index da77183ccc255eb77468c551f4285c54fc155284..52c6b2367810ed980231d0002ed0ec3a7449cc20 100644 (file)
@@ -1,3 +1,27 @@
+2018-04-16  Zalan Bujtas  <zalan@apple.com>
+
+        [LayoutReloaded] Add support for replaced box.
+        https://bugs.webkit.org/show_bug.cgi?id=184680
+
+        Reviewed by Antti Koivisto.
+
+        Basic support for inline replaced.
+
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext.prototype._handleInlineBox):
+        (InlineFormattingContext.prototype._handleInlineBlock):
+        (InlineFormattingContext.prototype._handleReplaced):
+        * LayoutReloaded/FormattingContext/InlineFormatting/Line.js:
+        (Line.prototype.lastLineBox):
+        (Line.prototype.addInlineBox):
+        (Line.prototype.addInlineContainerBox): Deleted.
+        * LayoutReloaded/TreeBuilder.js:
+        (TreeBuilder.prototype._createAndAttachBox):
+        * LayoutReloaded/Utils.js:
+        (Utils._dumpBox):
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/inline-simple-replaced.html: Added.
+
 2018-04-16  Zalan Bujtas  <zalan@apple.com>
 
         [LayoutReloaded] Minor InlineFormattingContext::layout() cleanup.
index 99a800b2a2fbe2ff828fd0fa35c8191eff0d2313..d32583cad7e172ef481e03aad4e7dde343c11598 100644 (file)
@@ -104,19 +104,21 @@ class InlineFormattingContext extends FormattingContext {
     _handleInlineBox(inlineBox) {
         if (inlineBox.text())
             return this._handleText(inlineBox);
+        else
+            return this._handleReplaced(inlineBox);
     }
 
     _handleInlineBlock(inlineBlockBox) {
         ASSERT(inlineBlockBox.establishesFormattingContext());
         let displayBox = this.displayBox(inlineBlockBox);
 
-        // TODO: auto width/height
+        // TODO: auto width/height and check if content actually at all.
         this._adjustLineForInlineContainerStart(inlineBlockBox);
         displayBox.setWidth(Utils.width(inlineBlockBox) + Utils.computedHorizontalBorderAndPadding(inlineBlockBox.node()));
         this.layoutState().formattingContext(inlineBlockBox).layout();
         displayBox.setHeight(Utils.height(inlineBlockBox) + Utils.computedVerticalBorderAndPadding(inlineBlockBox.node()));
+        this._line().addInlineBox(displayBox.size());
         this._adjustLineForInlineContainerEnd(inlineBlockBox);
-        this._line().addInlineContainerBox(displayBox.size());
     }
 
     _handleText(inlineBox) {
@@ -156,6 +158,18 @@ class InlineFormattingContext extends FormattingContext {
             this._line().moveContentHorizontally(floatWidth);
     }
 
+    _handleReplaced(replacedBox) {
+        // TODO: intrinsic size and check if content actually at all.
+        let displayBox = this.displayBox(replacedBox);
+        this._adjustLineForInlineContainerStart(replacedBox);
+        displayBox.setWidth(Utils.width(replacedBox) + Utils.computedHorizontalBorderAndPadding(replacedBox.node()));
+
+        displayBox.setHeight(Utils.height(replacedBox) + Utils.computedVerticalBorderAndPadding(replacedBox.node()));
+        this._line().addInlineBox(displayBox.size());
+        displayBox.setTopLeft(this._line().lastLineBox().lineBoxRect.topLeft());
+        this._adjustLineForInlineContainerEnd(replacedBox);
+   }
+
     _adjustLineForInlineContainerStart(inlineContainer) {
         let offset = this.marginLeft(inlineContainer) + Utils.computedBorderAndPaddingLeft(inlineContainer.node());
         this._line().adjustWithOffset(offset);
index e05c4f05ec5859a8779debad4fddde45cb414645..a6038280a80afaf653ed51388c2a276717207700 100644 (file)
@@ -31,13 +31,13 @@ public:
     LayoutUnit availableWidth();
 
     LayoutRect rect();
-    lineBoxes();
+    Vector<InlineDisplayBox> lineBoxes();
 
-    shrink(float width);
-    adjustWithOffset(LayoutUnit offset);
-    moveContentHorizontally(LayoutUnit offset);
-    addInlineContainerBox(LayoutSize);
-    addTextLineBox(unsigned startPosition, unsigned endPosition, LayoutSize size);
+    void shrink(float width);
+    void adjustWithOffset(LayoutUnit offset);
+    void moveContentHorizontally(LayoutUnit offset);
+    void addInlineContainerBox(LayoutSize);
+    void addTextLineBox(unsigned startPosition, unsigned endPosition, LayoutSize size);
 };
 */
 class Line {
@@ -63,6 +63,10 @@ class Line {
         return this.m_lineBoxes;
     }
 
+    lastLineBox() {
+        return this.m_lineBoxes[this.m_lineBoxes.length - 1];
+    }
+
     shrink(width) {
         this.m_availableWidth -= width;
     }
@@ -79,7 +83,7 @@ class Line {
         this.m_lineRect.moveHorizontally(offset);
     }
 
-    addInlineContainerBox(size) {
+    addInlineBox(size) {
         let width = size.width();
         ASSERT(width <= this.m_availableWidth);
         this.shrink(width);
index d19c26a34c7d91295552c8681b3482064efc3598..3edefd6db6f24e7a1af50b74f1ac68d6d64f9ca9 100644 (file)
@@ -54,11 +54,13 @@ class TreeBuilder {
         let node = this._findNode(initialBlockContainer.node(), id, name);
         if (name == "RenderBlock" || name == "RenderBody")
             box = new Layout.BlockContainer(node, id);
-        else if (name == "RenderInline") {
+        else if (name == "RenderInline")
             box = new Layout.InlineContainer(node, id);
-        } else if (name == "RenderText") {
+        else if (name == "RenderText")
             text = new Text(node, id);
-        } else
+        else if (name == "RenderImage")
+            box = new Layout.InlineBox(node, id);
+        else
             box = new Layout.Box(node, id);
 
         if (box)
index fec0910800365060bb173cad510773b7fc46c8ab..a7386700313f1e533a98eaf30f4f4178d5a99da0 100644 (file)
@@ -584,6 +584,11 @@ class Utils {
             }
             return indentation + box.node().tagName + " " + box.name() + "\n";
         }
+        if (box.name() == "RenderImage") {
+            let boxRect = layoutState.displayBox(box).rect();
+            return indentation + box.node().tagName + " " + box.name() + " at (" + Utils.precisionRound(boxRect.left()) + "," + Utils.precisionRound(boxRect.top()) + ") size " + Utils.precisionRound(boxRect.width()) + "x" + Utils.precisionRound(boxRect.height()) + "\n";
+
+        }
         if (box.isAnonymous())
             return "";
         let displayBox = layoutState.displayBox(box);
index c663e5fdda6e6540005ea61466d4a16806058c35..8bc11b0e49c2994c73397551b869a0cc40f3d974 100644 (file)
@@ -82,7 +82,8 @@ let testFiles = [
     "inline-with-padding-border-margin-offsets.html",
     "inline-block-with-fixed-width-height.html",
     "inline-with-relative-positioning.html",
-    "inline-with-out-of-flow-descendant.html"
+    "inline-with-out-of-flow-descendant.html",
+    "inline-simple-replaced.html"
 ];
 
 let debugThis = [];
diff --git a/Tools/LayoutReloaded/test/inline-simple-replaced.html b/Tools/LayoutReloaded/test/inline-simple-replaced.html
new file mode 100644 (file)
index 0000000..955198e
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="height: 200px;">foobar foobar<img style="vertical-align: top" src="foobar.jpg" width=100px height=100px></div>
+</body>
+</html>