Tools/ChangeLog

2018-04-05  Zalan Bujtas  <zalan@apple.com>

        [LayoutReloaded] Move floating box to the next line when needed

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

        Reviewed by NOBODY (OOPS!).

        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:

        (InlineFormattingContext.prototype.layout):

        (InlineFormattingContext.prototype._handleContent):

        (InlineFormattingContext.prototype._handleText):

        (InlineFormattingContext.prototype._handleFloatingBox):

        (InlineFormattingContext.prototype._mapFloatingHorizontalPosition):

        (InlineFormattingContext):

        (InlineFormattingContext.prototype._handleFloatingBoxes): Deleted.

        (InlineFormattingContext.prototype._floatingBoxes): Deleted.

        * LayoutReloaded/FormattingContext/InlineFormatting/Line.js:

        (Line.prototype.addTextLineBox):

        (Line.prototype.addFloatingBox):

        (Line):

        * LayoutReloaded/Utils.js:

        (LayoutRect.prototype.moveHorizontally):

        (LayoutRect.prototype.moveVertically):

        * LayoutReloaded/test/index.html:

        * LayoutReloaded/test/inline-with-floats-when-they-dont-fit.html: Added.

2018-04-05  Brady Eidson  <beidson@apple.com>

        Process Swap on Navigation causes many webpages to hang due to attempted process swap for iframe navigations.

Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js

@@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.m_line = this._createNewLine();

        // Collect floating boxes and layout them first.

        this._handleFloatingBoxes();

        //

        this._addToLayoutQueue(this.formattingRoot().firstInFlowChild());

40 this._addToLayoutQueue(this.formattingRoot().firstInFlowOrFloatChild());

        while (this._descendantNeedsLayout()) {

            // Travers down on the descendants until we find a leaf node.

            while (true) {

@@class InlineFormattingContext extends FormattingContext {

                    this.layoutState().layout(layoutBox);

                    break;

                }

52 if (!layoutBox.isContainer() || !layoutBox.hasChild())

49 if (!layoutBox.isContainer() || !layoutBox.hasInFlowOrFloatChild())

5350 break;

54 this._addToLayoutQueue(layoutBox.firstInFlowChild());

51 this._addToLayoutQueue(layoutBox.firstInFlowOrFloatChild());

            }

            while (this._descendantNeedsLayout()) {

                let layoutBox = this._nextInLayoutQueue();

58 if (layoutBox instanceof Layout.InlineBox)

59 this._handleInlineBox(layoutBox);

55 this._handleContent(layoutBox);

6056 // We are done with laying out this box.

6157 this._removeFromLayoutQueue(layoutBox);

62 if (layoutBox.nextInFlowSibling()) {

63 this._addToLayoutQueue(layoutBox.nextInFlowSibling());

58 if (layoutBox.nextInFlowOrFloatSibling()) {

59 this._addToLayoutQueue(layoutBox.nextInFlowOrFloatSibling());

@@class InlineFormattingContext extends FormattingContext {

        this._commitLine();

   }

    _handleContent(layoutBox) {

        if (layoutBox instanceof Layout.InlineBox) {

            this._handleInlineBox(layoutBox);

            return;

        }

        if (layoutBox.isFloatingPositioned()) {

            this._handleFloatingBox(layoutBox);

            return;

        }

        ASSERT_NOT_REACHED();

    }

    _handleInlineBox(inlineBox) {

        if (inlineBox.text())

            return this._handleText(inlineBox);

@@class InlineFormattingContext extends FormattingContext {

            for (let run of textRuns)

                this._line().addTextLineBox(run.startPosition, run.endPosition, new LayoutSize(run.width, Utils.textHeight(inlineBox)));

            text = text.slice(textRuns[textRuns.length - 1].endPosition, text.length);

            this._commitLine();

        }

    }

    _handleFloatingBoxes() {

        let floatingBoxes = this._floatingBoxes();

        for (let floatingBox of floatingBoxes) {

            this._addToLayoutQueue(floatingBox);

            this._handleFloatingBox(floatingBox);

            this._removeFromLayoutQueue(floatingBox);

            // Commit the line unless we run out of content.

            if (text.length)

                this._commitLine();

        }

    }

    _handleFloatingBox(floatingBox) {

102 this.layoutState().layout(floatingBox);

103103 this._computeFloatingWidth(floatingBox);

104104 this._computeFloatingHeight(floatingBox);

        let displayFloatingBox = this.displayBox(floatingBox);

        if (displayFloatingBox.width() > this._line().availableWidth())

            this._commitLine();

        // Position this float statically first, the floating context will figure it out the final position.

        displayFloatingBox.setTopLeft(this._line().rect().topLeft());

105110 this.floatingContext().computePosition(floatingBox);

106 this._line().addFloatingBox(~~this.~~display~~Box(f~~loatingBox).size());

111 this._line().addFloatingBox(displayFloatingBox.size());

    }

    _commitLine() {

@@class InlineFormattingContext extends FormattingContext {

            return root.contentBox().left();

        return horizontalPosition - rootLeft;

     }

    _floatingBoxes() {

        ASSERT(this.formattingRoot().firstChild());

        // FIXME: This is highly inefficient but will do for now.

        let floatingBoxes = new Array();

        let stack = new Array();

        stack.push(this.formattingRoot().firstChild());

        while (stack.length) {

            while (true) {

                let box = stack[stack.length - 1];

                if (box.isFloatingPositioned())

                    floatingBoxes.push(box);

                if (box.establishesFormattingContext())

                    break;

                if (!box.isContainer() || !box.hasChild())

                    break;

                stack.push(box.firstChild());

            }

            while (stack.length) {

                let box = stack.pop();

                if (box.nextSibling()) {

                    stack.push(box.nextSibling());

                    break;

                }

            }

        }

        return floatingBoxes;

    }

195172}

196173

Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js

@@class Line {

    }

    addTextLineBox(startPosition, endPosition, size) {

50 ASSERT(size.width() <= this.m_availableWidth);

        this.m_availableWidth -= size.width();

        // TODO: use the actual height instead of the line height.

        let lineBoxRect = new LayoutRect(this.rect().topRight(), new LayoutSize(size.width(), this.rect().height()));

@@class Line {

    }

    addFloatingBox(size) {

58 // TODO: Add missing cases.

59 ASSERT(size.width() <= this.m_availableWidth);

60 // Push non-floating boxes to the right.

5961 this.m_availableWidth -= size.width();

60 this.m_lineRect.moveBy(new LayoutSize(size.width(), 0));

        for (let lineBox of this.m_lineBoxes)

            lineBox.lineBoxRect.moveHorizontally(size.width());

        this.m_lineRect.moveHorizontally(size.width());

6165 }

6266}

Tools/LayoutReloaded/Utils.js

@@class LayoutRect {

    moveBy(distance) {

        this.m_topLeft.moveBy(distance);

    }

210

    moveHorizontally(distance) {

        this.m_topLeft.shiftLeft(distance);

    }

    moveVertically(distance) {

        this.m_topLeft.shiftTop(distance);

    }

    isEmpty() {

        return this.m_size.isEmpty();

    }

Tools/LayoutReloaded/test/index.html

@@let testFiles = [

    "inline-formatting-context-with-floats2.html",

    "float-is-inside-inline-formatting-context-simple.html",

    "multiple-left-floats-on-line-simple.html",

72 "multiple-left-floats-on-line-from-parent-formatting-context.html"

72 "multiple-left-floats-on-line-from-parent-formatting-context.html",

73 "inline-with-floats-when-they-dont-fit.html"

];

let debugThis = [];

Tools/LayoutReloaded/test/inline-with-floats-when-they-dont-fit.html

<!DOCTYPE html>

<html>

<body>

<div style="width: 100px; height: 100px;">foobar<div style="float: left; width: 20px; height: 20px;"></div><div style="float: left; width: 60px; height: 20px;"></div></div>

</body>

</html>