Title: [230300] trunk/Tools
- Revision
- 230300
- Author
- za...@apple.com
- Date
- 2018-04-05 08:50:26 -0700 (Thu, 05 Apr 2018)
Log Message
[LayoutReloaded] Find the correct left edge for a line when floating boxes are in parent formatting context.
https://bugs.webkit.org/show_bug.cgi?id=184330
Reviewed by Antti Koivisto.
In inline formatting context, the floating boxes can come from the parent (block) formatting context. Let's
take them into account when computing the line edges.
* LayoutReloaded/FormattingContext/FloatingContext.js:
(FloatingContext.prototype.left):
(FloatingContext.prototype.right):
* LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
(InlineFormattingContext.prototype._createNewLine):
(InlineFormattingContext.prototype._mapFloatingVerticalPosition):
(InlineFormattingContext.prototype._mapFloatingHorizontalPosition):
(InlineFormattingContext.prototype._mapFloatingPosition): Deleted.
* LayoutReloaded/test/index.html:
* LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/Tools/ChangeLog (230299 => 230300)
--- trunk/Tools/ChangeLog 2018-04-05 15:21:15 UTC (rev 230299)
+++ trunk/Tools/ChangeLog 2018-04-05 15:50:26 UTC (rev 230300)
@@ -1,5 +1,26 @@
2018-04-05 Zalan Bujtas <za...@apple.com>
+ [LayoutReloaded] Find the correct left edge for a line when floating boxes are in parent formatting context.
+ https://bugs.webkit.org/show_bug.cgi?id=184330
+
+ Reviewed by Antti Koivisto.
+
+ In inline formatting context, the floating boxes can come from the parent (block) formatting context. Let's
+ take them into account when computing the line edges.
+
+ * LayoutReloaded/FormattingContext/FloatingContext.js:
+ (FloatingContext.prototype.left):
+ (FloatingContext.prototype.right):
+ * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+ (InlineFormattingContext.prototype._createNewLine):
+ (InlineFormattingContext.prototype._mapFloatingVerticalPosition):
+ (InlineFormattingContext.prototype._mapFloatingHorizontalPosition):
+ (InlineFormattingContext.prototype._mapFloatingPosition): Deleted.
+ * LayoutReloaded/test/index.html:
+ * LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html: Added.
+
+2018-04-05 Zalan Bujtas <za...@apple.com>
+
[LayoutReloaded] Collect floating boxes in inline formatting context and layout them first.
https://bugs.webkit.org/show_bug.cgi?id=184329
Modified: trunk/Tools/LayoutReloaded/FormattingContext/FloatingContext.js (230299 => 230300)
--- trunk/Tools/LayoutReloaded/FormattingContext/FloatingContext.js 2018-04-05 15:21:15 UTC (rev 230299)
+++ trunk/Tools/LayoutReloaded/FormattingContext/FloatingContext.js 2018-04-05 15:50:26 UTC (rev 230300)
@@ -46,18 +46,18 @@
left(verticalPosition) {
// Relative to the formatting context's root.
- let leftFloatings = this._leftFloatings();
- if (!leftFloatings.length)
+ let leftFloating = this._findFloatingAtVerticalPosition(verticalPosition, this._leftFloatings());
+ if (!leftFloating)
return Number.NaN;
- return this._mapDisplayMarginBoxToFormattingRoot(leftFloatings[leftFloatings.length - 1]).right();
+ return this._mapDisplayMarginBoxToFormattingRoot(leftFloating).right();
}
right(verticalPosition) {
// Relative to the formatting context's root.
- let rightFloatings = this._rightFloatings();
- if (!rightFloatings.length)
+ let rightFloating = this._findFloatingAtVerticalPosition(verticalPosition, this._rightFloatings());
+ if (!rightFloating)
return Number.NaN;
- return this._mapDisplayMarginBoxToFormattingRoot(rightFloatings[rightFloatings.length - 1]).left();
+ return this._mapDisplayMarginBoxToFormattingRoot(rightFloating).left();
}
bottom() {
Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (230299 => 230300)
--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-05 15:21:15 UTC (rev 230299)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-05 15:50:26 UTC (rev 230300)
@@ -119,9 +119,14 @@
_createNewLine() {
let lineRect = this.displayBox(this.formattingRoot()).contentBox();
- let floatingLeft = this._mapFloatingPosition(this.floatingContext().left());
- let floatingRight = this._mapFloatingPosition(this.floatingContext().right());
- // TODO: Check the case when the containing block is narrower than the floats.
+ let lines = this.formattingState().lines();
+ if (lines.length)
+ lineRect.setTop(lines[lines.length - 1].rect().bottom());
+ // Find floatings on this line.
+ // Offset the vertical position if the floating context belongs to the parent formatting context.
+ let lineTopInFloatingPosition = this._mapFloatingVerticalPosition(lineRect.top());
+ let floatingLeft = this._mapFloatingHorizontalPosition(this.floatingContext().left(lineTopInFloatingPosition));
+ let floatingRight = this._mapFloatingHorizontalPosition(this.floatingContext().right(lineTopInFloatingPosition));
if (!Number.isNaN(floatingLeft) && !Number.isNaN(floatingRight)) {
// Floats on both sides.
lineRect.setLeft(floatingLeft);
@@ -131,26 +136,33 @@
else if (!Number.isNaN(floatingRight))
lineRect.setRight(floatingRight);
- let lines = this.formattingState().lines();
- if (lines.length)
- lineRect.setTop(lines[lines.length - 1].rect().bottom());
return new Line(lineRect.topLeft(), Utils.computedLineHeight(this.formattingRoot().node()), lineRect.width());
}
- _mapFloatingPosition(verticalPosition) {
- if (Number.isNaN(verticalPosition))
+ _mapFloatingVerticalPosition(verticalPosition) {
+ // Floats position are relative to their formatting root (which might not be this formatting root).
+ let root = this.displayBox(this.formattingRoot());
+ let floatFormattingRoot = this.displayBox(this.floatingContext().formattingRoot());
+ if (root == floatFormattingRoot)
return verticalPosition;
+ let rootTop = Utils.mapPosition(root.topLeft(), root, floatFormattingRoot).top();
+ return rootTop += root.contentBox().top();
+ }
+
+ _mapFloatingHorizontalPosition(horizontalPosition) {
+ if (Number.isNaN(horizontalPosition))
+ return horizontalPosition;
// Floats position are relative to their formatting root (which might not be this formatting root).
let root = this.displayBox(this.formattingRoot());
let floatFormattingRoot = this.displayBox(this.floatingContext().formattingRoot());
if (root == floatFormattingRoot)
- return verticalPosition;
+ return horizontalPosition;
let rootLeft = Utils.mapPosition(root.topLeft(), root, floatFormattingRoot).left();
rootLeft += root.contentBox().left();
// The left most float is to the right of the root.
- if (rootLeft >= verticalPosition)
+ if (rootLeft >= horizontalPosition)
return root.contentBox().left();
- return verticalPosition - rootLeft;
+ return horizontalPosition - rootLeft;
}
_floatingBoxes() {
Modified: trunk/Tools/LayoutReloaded/test/index.html (230299 => 230300)
--- trunk/Tools/LayoutReloaded/test/index.html 2018-04-05 15:21:15 UTC (rev 230299)
+++ trunk/Tools/LayoutReloaded/test/index.html 2018-04-05 15:50:26 UTC (rev 230300)
@@ -68,7 +68,8 @@
"inline-with-floats-right-left-simple.html",
"inline-formatting-context-with-floats2.html",
"float-is-inside-inline-formatting-context-simple.html",
- "multiple-left-floats-on-line-simple.html"
+ "multiple-left-floats-on-line-simple.html",
+ "multiple-left-floats-on-line-from-parent-formatting-context.html"
];
let debugThis = [];
Added: trunk/Tools/LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html (0 => 230300)
--- trunk/Tools/LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html (rev 0)
+++ trunk/Tools/LayoutReloaded/test/multiple-left-floats-on-line-from-parent-formatting-context.html 2018-04-05 15:50:26 UTC (rev 230300)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div>foobar foobar<div style="float: left; width: 10px; height: 10px;"></div><div style="float: left; width: 10px; height: 10px;"></div><div style="float: left; width: 10px; height: 10px;"></div></div>
+<div><div style="float: left; width: 10px; height: 10px;"></div>foobar foobar<div style="float: left; width: 10px; height: 10px;"></div><div style="float: left; width: 10px; height: 10px;"></div></div>
+<div><div style="float: left; width: 10px; height: 10px;"></div><div style="float: left; width: 10px; height: 10px;"></div>foobar foobar<div style="float: left; width: 10px; height: 10px;"></div></div>
+</body>
+</html>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
