[LayoutReloaded] Fix static position for floating boxes when they don't fit the curre...
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 6 Apr 2018 04:57:10 +0000 (04:57 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 6 Apr 2018 04:57:10 +0000 (04:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=184354

Reviewed by Antti Koivisto.

Do not shrink the current line with the floating box unless it is on the current line.

* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext.prototype._handleFloatingBox):
(InlineFormattingContext.prototype._mapFloatingVerticalPosition):
* LayoutReloaded/FormattingContext/InlineFormatting/Line.js:
(Line.prototype.addFloatingBox):
(Line):
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/inline-with-right-floats3.html: Added.

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

Tools/ChangeLog
Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js
Tools/LayoutReloaded/FormattingContext/InlineFormatting/Line.js
Tools/LayoutReloaded/test/index.html
Tools/LayoutReloaded/test/inline-with-right-floats3.html [new file with mode: 0644]

index b9fd9fee86fbb9e42705ff531e956fa4c0994f6c..bf024015bede3806f0b355ca6a19c1e67f25e12a 100644 (file)
@@ -1,3 +1,21 @@
+2018-04-05  Zalan Bujtas  <zalan@apple.com>
+
+        [LayoutReloaded] Fix static position for floating boxes when they don't fit the current line
+        https://bugs.webkit.org/show_bug.cgi?id=184354
+
+        Reviewed by Antti Koivisto.
+
+        Do not shrink the current line with the floating box unless it is on the current line.
+
+        * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+        (InlineFormattingContext.prototype._handleFloatingBox):
+        (InlineFormattingContext.prototype._mapFloatingVerticalPosition):
+        * LayoutReloaded/FormattingContext/InlineFormatting/Line.js:
+        (Line.prototype.addFloatingBox):
+        (Line):
+        * LayoutReloaded/test/index.html:
+        * LayoutReloaded/test/inline-with-right-floats3.html: Added.
+
 2018-04-05  Zalan Bujtas  <zalan@apple.com>
 
         [LayoutReloaded] Add support for right floating boxes in inline formatting context
index 263c326d1cb6b3cf12df27c3103cc039025f9266..c51e8cf7483add8c5292982f3d5ce85461401eb6 100644 (file)
@@ -103,11 +103,15 @@ class InlineFormattingContext extends FormattingContext {
         this._computeFloatingWidth(floatingBox);
         this._computeFloatingHeight(floatingBox);
         let displayBox = this.displayBox(floatingBox);
-        if (displayBox.width() > this._line().availableWidth())
-            this._commitLine();
         // Position this float statically first, the floating context will figure it out the final position.
-        displayBox.setTopLeft(this._line().rect().topLeft());
+        let floatingStaticPosition = this._line().rect().topLeft();
+        if (displayBox.width() > this._line().availableWidth())
+            floatingStaticPosition = new LayoutPoint(this._line().rect().bottom(), this.displayBox(this.formattingRoot()).contentBox().left());
+        displayBox.setTopLeft(floatingStaticPosition);
         this.floatingContext().computePosition(floatingBox);
+        // Check if the floating box is actually on the current line or got pushed further down.
+        if (displayBox.top() >= this._line().rect().bottom())
+            return;
         this._line().addFloatingBox(displayBox, Utils.isFloatingLeft(floatingBox));
     }
 
@@ -151,7 +155,7 @@ class InlineFormattingContext extends FormattingContext {
         if (root == floatFormattingRoot)
             return verticalPosition;
         let rootTop = Utils.mapPosition(root.topLeft(), root, floatFormattingRoot).top();
-        return (rootTop + root.contentBox().top() + verticalPosition);
+        return rootTop + root.contentBox().top() + verticalPosition;
     }
 
     _mapFloatingHorizontalPosition(horizontalPosition) {
index ef3267c5fb382a8a75005a53435bb2921a8834f7..02887a545788055516934c8d7230f3631c7bdce7 100644 (file)
@@ -58,10 +58,10 @@ class Line {
     addFloatingBox(floatingDisplayBox, isFloatingLeft) {
         let width = floatingDisplayBox.width();
         ASSERT(width <= this.m_availableWidth);
-        // Push non-floating boxes to the right.
         this.m_availableWidth -= width;
         if (!isFloatingLeft)
             return;
+        // Push non-floating boxes to the right.
         for (let lineBox of this.m_lineBoxes)
             lineBox.lineBoxRect.moveHorizontally(width);
         this.m_lineRect.moveHorizontally(width);
index c8107f29ed14f0bfb7451d68028d1c6daeb770d4..1e0076d98818498dcd3cbb40baad544346d4722e 100644 (file)
@@ -72,7 +72,8 @@ let testFiles = [
     "multiple-left-floats-on-line-from-parent-formatting-context.html",
     "inline-with-floats-when-they-dont-fit.html",
     "inline-with-right-float-simple.html",
-    "inline-with-right-floats2.html"
+    "inline-with-right-floats2.html",
+    "inline-with-right-floats3.html"
 ];
 
 let debugThis = [];
diff --git a/Tools/LayoutReloaded/test/inline-with-right-floats3.html b/Tools/LayoutReloaded/test/inline-with-right-floats3.html
new file mode 100644 (file)
index 0000000..d3789c6
--- /dev/null
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<style>
+div { border: 1px solid green;}
+</style>
+<body>
+<div style="width: 600px; height: 600px;">
+<div style="float: right; width: 120px; height: 30px;"></div>
+<div style="float: right; width: 320px; height: 50px;"></div>
+<div style="width: 300px; height: 100px;">foobar foobar foobar foobar foobar foobar foobar<div style="float: right; width: 200px; height: 20px;"></div></div>
+</div>
+</body>
+</html>