Title: [230142] trunk/Tools
- Revision
- 230142
- Author
- [email protected]
- Date
- 2018-04-01 09:47:59 -0700 (Sun, 01 Apr 2018)
Log Message
[LayoutReloaded] Right floating box reduces available line width.
https://bugs.webkit.org/show_bug.cgi?id=184226
Reviewed by Antti Koivisto.
* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext.prototype._createNewLine):
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/inline-with-floats-right-left-simple.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/Tools/ChangeLog (230141 => 230142)
--- trunk/Tools/ChangeLog 2018-04-01 05:37:20 UTC (rev 230141)
+++ trunk/Tools/ChangeLog 2018-04-01 16:47:59 UTC (rev 230142)
@@ -1,3 +1,15 @@
+2018-04-01 Zalan Bujtas <[email protected]>
+
+ [LayoutReloaded] Right floating box reduces available line width.
+ https://bugs.webkit.org/show_bug.cgi?id=184226
+
+ Reviewed by Antti Koivisto.
+
+ * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+ (InlineFormattingContext.prototype._createNewLine):
+ * LayoutReloaded/test/index.html:
+ * LayoutReloaded/test/inline-with-floats-right-left-simple.html: Added.
+
2018-03-31 Zalan Bujtas <[email protected]>
[LayoutReloaded] Floating box reduces line with in inline formatting context
Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (230141 => 230142)
--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-01 05:37:20 UTC (rev 230141)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-01 16:47:59 UTC (rev 230142)
@@ -97,19 +97,23 @@
}
_createNewLine() {
- // TODO: Floats need to be taken into account.
- let contentBoxRect = this.displayBox(this.formattingRoot()).contentBox();
- let lineWidth = contentBoxRect.width();
- let topLeft = contentBoxRect.topLeft();
+ let lineRect = this.displayBox(this.formattingRoot()).contentBox();
let floatingLeft = this._mapFloatingPosition(this.floatingContext().left());
- if (!Number.isNaN(floatingLeft)) {
- topLeft.setLeft(floatingLeft);
- lineWidth -= floatingLeft;
- }
+ let floatingRight = this._mapFloatingPosition(this.floatingContext().right());
+ // TODO: Check the case when the containing block is narrower than the floats.
+ if (!Number.isNaN(floatingLeft) && !Number.isNaN(floatingRight)) {
+ // Floats on both sides.
+ lineRect.setLeft(floatingLeft);
+ lineRect.setWidth(floatingRight - floatingLeft);
+ } else if (!Number.isNaN(floatingLeft))
+ lineRect.setLeft(floatingLeft);
+ else if (!Number.isNaN(floatingRight))
+ lineRect.setRight(floatingRight);
+
let lines = this.formattingState().lines();
if (lines.length)
- topLeft.setTop(lines[lines.length - 1].rect().bottom());
- return new Line(topLeft, Utils.computedLineHeight(this.formattingRoot().node()), lineWidth);
+ lineRect.setTop(lines[lines.length - 1].rect().bottom());
+ return new Line(lineRect.topLeft(), Utils.computedLineHeight(this.formattingRoot().node()), lineRect.width());
}
_mapFloatingPosition(verticalPosition) {
Modified: trunk/Tools/LayoutReloaded/test/index.html (230141 => 230142)
--- trunk/Tools/LayoutReloaded/test/index.html 2018-04-01 05:37:20 UTC (rev 230141)
+++ trunk/Tools/LayoutReloaded/test/index.html 2018-04-01 16:47:59 UTC (rev 230142)
@@ -64,7 +64,8 @@
"intruding-left-float-simple.html",
"simple-inline-text.html",
"simple-multiline-text.html",
- "inline-formatting-context-with-floats.html"
+ "inline-formatting-context-with-floats.html",
+ "inline-with-floats-right-left-simple.html"
];
let debugThis = [];
Added: trunk/Tools/LayoutReloaded/test/inline-with-floats-right-left-simple.html (0 => 230142)
--- trunk/Tools/LayoutReloaded/test/inline-with-floats-right-left-simple.html (rev 0)
+++ trunk/Tools/LayoutReloaded/test/inline-with-floats-right-left-simple.html 2018-04-01 16:47:59 UTC (rev 230142)
@@ -0,0 +1,8 @@
+<div style="padding: 20px; width: 200px; height: 800px;">
+ <div style="float: left; width: 10px; height: 100px;"></div>
+ <div>
+ <div style="float: left; width: 20px; height: 60px"></div>
+ <div style="float: right; width: 60px; height: 60px"></div>
+ </div>
+ <div>foobar foobar foobar</div>
+</div>
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
