Diff
Modified: trunk/Tools/ChangeLog (230140 => 230141)
--- trunk/Tools/ChangeLog 2018-04-01 03:07:26 UTC (rev 230140)
+++ trunk/Tools/ChangeLog 2018-04-01 05:37:20 UTC (rev 230141)
@@ -1,5 +1,31 @@
2018-03-31 Zalan Bujtas <[email protected]>
+ [LayoutReloaded] Floating box reduces line with in inline formatting context
+ https://bugs.webkit.org/show_bug.cgi?id=184223
+
+ Reviewed by Antti Koivisto.
+
+ * LayoutReloaded/FormattingContext/FloatingContext.js:
+ (FloatingContext.prototype.left):
+ (FloatingContext.prototype.right):
+ (FloatingContext.prototype._mapDisplayMarginBoxToFormattingRoot):
+ (FloatingContext.prototype._mapBorderBoxToFormattingRoot):
+ (FloatingContext.prototype._mapContentBoxToFormattingRoot):
+ (FloatingContext.prototype.formattingRoot):
+ (FloatingContext.prototype._floatingState):
+ (FloatingContext.prototype._formattingRoot): Deleted.
+ * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+ (InlineFormattingContext.prototype._createNewLine):
+ (InlineFormattingContext.prototype._mapFloatingPosition):
+ (InlineFormattingContext):
+ * LayoutReloaded/FormattingState/FormattingState.js:
+ (FormattingState.prototype.displayBox):
+ (FormattingState):
+ * LayoutReloaded/test/index.html:
+ * LayoutReloaded/test/inline-formatting-context-with-floats.html: Added.
+
+2018-03-31 Zalan Bujtas <[email protected]>
+
[LayoutReloaded] InlineFormattingState should inherit the floating state from its parent formatting state
https://bugs.webkit.org/show_bug.cgi?id=184220
Modified: trunk/Tools/LayoutReloaded/FormattingContext/FloatingContext.js (230140 => 230141)
--- trunk/Tools/LayoutReloaded/FormattingContext/FloatingContext.js 2018-04-01 03:07:26 UTC (rev 230140)
+++ trunk/Tools/LayoutReloaded/FormattingContext/FloatingContext.js 2018-04-01 05:37:20 UTC (rev 230141)
@@ -44,9 +44,25 @@
displayBox.setTopLeft(this._computePositionToAvoidIntrudingFloats(layoutBox));
}
+ left(verticalPosition) {
+ // Relative to the formatting context's root.
+ let leftFloatings = this._leftFloatings();
+ if (!leftFloatings.length)
+ return Number.NaN;
+ return this._mapDisplayMarginBoxToFormattingRoot(leftFloatings[leftFloatings.length - 1]).right();
+ }
+
+ right(verticalPosition) {
+ // Relative to the formatting context's root.
+ let rightFloatings = this._rightFloatings();
+ if (!rightFloatings.length)
+ return Number.NaN;
+ return this._mapDisplayMarginBoxToFormattingRoot(rightFloatings[rightFloatings.length - 1]).left();
+ }
+
bottom() {
- let leftBottom = this._bottom(this._leftFloatingStack());
- let rightBottom = this._bottom(this._rightFloatingStack());
+ let leftBottom = this._bottom(this._leftFloatings());
+ let rightBottom = this._bottom(this._rightFloatings());
if (Number.isNaN(leftBottom) && Number.isNaN(rightBottom))
return Number.NaN;
if (!Number.isNaN(leftBottom) && !Number.isNaN(rightBottom))
@@ -80,9 +96,9 @@
let leftBottom = Number.NaN;
let rightBottom = Number.NaN;
if (Utils.hasClearLeft(layoutBox) || Utils.hasClearBoth(layoutBox))
- leftBottom = this._bottom(this._leftFloatingStack());
+ leftBottom = this._bottom(this._leftFloatings());
if (Utils.hasClearRight(layoutBox) || Utils.hasClearBoth(layoutBox))
- rightBottom = this._bottom(this._rightFloatingStack());
+ rightBottom = this._bottom(this._rightFloatings());
if (!Number.isNaN(leftBottom) && !Number.isNaN(rightBottom))
return new LayoutPoint(Math.max(leftBottom, rightBottom), displayBox.left());
@@ -104,8 +120,8 @@
}
_findInnerMostLeftAndRight(verticalPosition) {
- let leftFloating = this._findFloatingAtVerticalPosition(verticalPosition, this._leftFloatingStack());
- let rightFloating = this._findFloatingAtVerticalPosition(verticalPosition, this._rightFloatingStack());
+ let leftFloating = this._findFloatingAtVerticalPosition(verticalPosition, this._leftFloatings());
+ let rightFloating = this._findFloatingAtVerticalPosition(verticalPosition, this._rightFloatings());
return { left: leftFloating, right: rightFloating };
}
@@ -140,7 +156,7 @@
}
_isEmpty() {
- return !this._leftFloatingStack().length && !this._rightFloatingStack().length;
+ return !this._leftFloatings().length && !this._rightFloatings().length;
}
_adjustedFloatingPosition(floatingBox, verticalPosition, leftRightFloatings) {
@@ -197,29 +213,29 @@
_mapDisplayMarginBoxToFormattingRoot(displayBox) {
ASSERT(displayBox instanceof Display.Box);
- return Utils.marginBox(displayBox, this._formattingState().displayBox(this._formattingRoot()));
+ return Utils.marginBox(displayBox, this._formattingState().displayBox(this.formattingRoot()));
}
_mapBorderBoxToFormattingRoot(layoutBox) {
let displayBox = this._formattingState().displayBox(layoutBox);
- let rootDisplayBox = this._formattingState().displayBox(this._formattingRoot());
+ let rootDisplayBox = this._formattingState().displayBox(this.formattingRoot());
return Utils.borderBox(displayBox, rootDisplayBox);
}
_mapContentBoxToFormattingRoot(layoutBox) {
let displayBox = this._formattingState().displayBox(layoutBox);
- let rootDisplayBox = this._formattingState().displayBox(this._formattingRoot());
+ let rootDisplayBox = this._formattingState().displayBox(this.formattingRoot());
return Utils.contentBox(displayBox, rootDisplayBox);
}
+ formattingRoot() {
+ return this._formattingState().formattingRoot();
+ }
+
_floatingState() {
return this.m_floatingState;
}
- _formattingRoot() {
- return this._formattingState().formattingRoot();
- }
-
_formattingState() {
return this._floatingState().formattingState();
}
@@ -228,11 +244,11 @@
return this._floatingState().lastFloating();
}
- _leftFloatingStack() {
+ _leftFloatings() {
return this._floatingState().leftFloatingStack();
}
- _rightFloatingStack() {
+ _rightFloatings() {
return this._floatingState().rightFloatingStack();
}
}
Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (230140 => 230141)
--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-01 03:07:26 UTC (rev 230140)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-04-01 05:37:20 UTC (rev 230141)
@@ -99,11 +99,28 @@
_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 floatingLeft = this._mapFloatingPosition(this.floatingContext().left());
+ if (!Number.isNaN(floatingLeft)) {
+ topLeft.setLeft(floatingLeft);
+ lineWidth -= floatingLeft;
+ }
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()), contentBoxRect.width());
+ return new Line(topLeft, Utils.computedLineHeight(this.formattingRoot().node()), lineWidth);
}
+
+ _mapFloatingPosition(verticalPosition) {
+ if (Number.isNaN(verticalPosition))
+ return 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;
+ return verticalPosition - Utils.mapPosition(root.topLeft(), root, floatFormattingRoot).left();
+ }
}
Modified: trunk/Tools/LayoutReloaded/FormattingState/FormattingState.js (230140 => 230141)
--- trunk/Tools/LayoutReloaded/FormattingState/FormattingState.js 2018-04-01 03:07:26 UTC (rev 230140)
+++ trunk/Tools/LayoutReloaded/FormattingState/FormattingState.js 2018-04-01 05:37:20 UTC (rev 230141)
@@ -68,9 +68,10 @@
ASSERT(layoutBox);
// 1. Normally we only need to access boxes within the same formatting context
// 2. In some cases we need size information about the root container -which is in the parent formatting context
+ // 3. In inline formatting with parent floating state, we need display boxes from the parent formatting context
// 3. In rare cases (statically positioned out-of-flow box), we need position information on sibling formatting context
// but in all cases it needs to be a descendant of the root container (or the container itself)
- ASSERT(layoutBox == this.formattingRoot() || layoutBox.isDescendantOf(this.formattingRoot()));
+ // ASSERT(layoutBox == this.formattingRoot() || layoutBox.isDescendantOf(this.formattingRoot()));
let displayBox = this.m_displayToLayout.get(layoutBox);
if (displayBox)
return displayBox;
Modified: trunk/Tools/LayoutReloaded/test/index.html (230140 => 230141)
--- trunk/Tools/LayoutReloaded/test/index.html 2018-04-01 03:07:26 UTC (rev 230140)
+++ trunk/Tools/LayoutReloaded/test/index.html 2018-04-01 05:37:20 UTC (rev 230141)
@@ -63,7 +63,8 @@
"negative-margin-simple.html",
"intruding-left-float-simple.html",
"simple-inline-text.html",
- "simple-multiline-text.html"
+ "simple-multiline-text.html",
+ "inline-formatting-context-with-floats.html"
];
let debugThis = [];
Added: trunk/Tools/LayoutReloaded/test/inline-formatting-context-with-floats.html (0 => 230141)
--- trunk/Tools/LayoutReloaded/test/inline-formatting-context-with-floats.html (rev 0)
+++ trunk/Tools/LayoutReloaded/test/inline-formatting-context-with-floats.html 2018-04-01 05:37:20 UTC (rev 230141)
@@ -0,0 +1,7 @@
+<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>
+ <div>foobar</div>
+</div>
