Diff
Modified: trunk/Tools/ChangeLog (229806 => 229807)
--- trunk/Tools/ChangeLog 2018-03-21 14:44:08 UTC (rev 229806)
+++ trunk/Tools/ChangeLog 2018-03-21 16:32:00 UTC (rev 229807)
@@ -1,5 +1,26 @@
2018-03-21 Zalan Bujtas <[email protected]>
+ [LayoutReloaded] Enable formatting state for InlineFormattingContext
+ https://bugs.webkit.org/show_bug.cgi?id=183853
+
+ Reviewed by Antti Koivisto.
+
+ * LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js:
+ (BlockFormattingContext.prototype._contentHeight):
+ * LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js:
+ (InlineFormattingContext):
+ (InlineFormattingContext.prototype.layout):
+ (InlineFormattingContext.prototype._createNewLine):
+ * LayoutReloaded/LayoutState.js:
+ (LayoutState.prototype.formattingState):
+ * LayoutReloaded/README.md:
+ * LayoutReloaded/Utils.js:
+ (Utils._dumpTree):
+ * LayoutReloaded/test/index.html:
+ * LayoutReloaded/test/simple-inline-text.html: Added.
+
+2018-03-21 Zalan Bujtas <[email protected]>
+
[LayoutReloaded] Move inline lines to InlineFormattingState.
https://bugs.webkit.org/show_bug.cgi?id=183814
Modified: trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js (229806 => 229807)
--- trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js 2018-03-21 14:44:08 UTC (rev 229806)
+++ trunk/Tools/LayoutReloaded/FormattingContext/BlockFormatting/BlockFormattingContext.js 2018-03-21 16:32:00 UTC (rev 229807)
@@ -263,7 +263,7 @@
if (!layoutBox.isContainer() || !layoutBox.hasInFlowChild())
return 0;
if (layoutBox.establishesInlineFormattingContext()) {
- let lines = layoutBox.establishedFormattingContext().lines();
+ let lines = this.layoutState().formattingState(layoutBox).lines();
if (!lines.length)
return 0;
let lastLine = lines[lines.length - 1];
Modified: trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js (229806 => 229807)
--- trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-03-21 14:44:08 UTC (rev 229806)
+++ trunk/Tools/LayoutReloaded/FormattingContext/InlineFormatting/InlineFormattingContext.js 2018-03-21 16:32:00 UTC (rev 229807)
@@ -27,8 +27,8 @@
constructor(inlineFormattingState) {
super(inlineFormattingState);
// If the block container box that initiates this inline formatting contex also establishes a block context, create a new float for us.
- ASSERT(root.isBlockContainerBox());
- if (root.establishesBlockFormattingContext())
+ ASSERT(this.formattingRoot().isBlockContainerBox());
+ if (this.formattingRoot().establishesBlockFormattingContext())
this.m_floatingContext = new FloatingContext(this);
this.m_line = this._createNewLine();
}
@@ -41,7 +41,7 @@
// 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._addToLayoutQueue(this.formattingRoot().firstChild());
- while (layoutStack.length) {
+ while (this._descendantNeedsLayout()) {
// Travers down on the descendants until we find a leaf node.
while (true) {
let layoutBox = this._nextInLayoutQueue();
@@ -53,7 +53,7 @@
break;
this._addToLayoutQueue(layoutBox.firstChild());
}
- while (layoutStack.length) {
+ while (this._descendantNeedsLayout()) {
let layoutBox = this._nextInLayoutQueue();
this._handleInlineBox(layoutBox);
// We are done with laying out this box.
@@ -100,8 +100,8 @@
_createNewLine() {
// TODO: Floats need to be taken into account.
- let contentBoxRect = this.formattingRoot().contentBox();
- this.m_line = new Line(contentBoxRect.topLeft(), Utils.computedLineHeight(this.formattingRoot()), contentBoxRect.width());
+ let contentBoxRect = this.displayBox(this.formattingRoot()).contentBox();
+ return new Line(contentBoxRect.topLeft(), Utils.computedLineHeight(this.formattingRoot().node()), contentBoxRect.width());
}
}
Modified: trunk/Tools/LayoutReloaded/LayoutState.js (229806 => 229807)
--- trunk/Tools/LayoutReloaded/LayoutState.js 2018-03-21 14:44:08 UTC (rev 229806)
+++ trunk/Tools/LayoutReloaded/LayoutState.js 2018-03-21 16:32:00 UTC (rev 229807)
@@ -49,6 +49,10 @@
return this.m_formattingStates;
}
+ formattingState(formattingRoot) {
+ return this.m_formattingStates.get(formattingRoot);
+ }
+
initialDisplayBox() {
return this.m_initialDisplayBox;
}
Modified: trunk/Tools/LayoutReloaded/README.md (229806 => 229807)
--- trunk/Tools/LayoutReloaded/README.md 2018-03-21 14:44:08 UTC (rev 229806)
+++ trunk/Tools/LayoutReloaded/README.md 2018-03-21 16:32:00 UTC (rev 229807)
@@ -4,13 +4,15 @@
WebCore
1. recursive layout
2. layout logic lives in the renderers mixing block with inline etc.
+3. No clear separation of logic and state.
LayoutReloaded
-1. iterative layout within a formatting context, recursive across nested formatting contexts
-2. formatting context is responsible for computing size/positions for all the boxes that live in the
+1. Iterative layout within a formatting context, recursive across nested formatting contexts
+2. Formatting context is responsible for computing size/positions for all the boxes that live in the
context including in/out-of-flow and floating boxes
+3. Layout state is stored in dedicated FormattingState objects.
3. Initial containing block creates the top level (initial) block formatting context
-4. Floats are resitriced to their containing blocks.
+4. Floats are resitriced to their formatting contexts.
5. Boxes, including inline tree are generated while laying out the content. LayoutTree -> BoxTree.
Instructions:
@@ -18,22 +20,6 @@
2. compile WebKit
3. load ./test/index.html
-Design:
-FormattingContext
- - BlockFormattingContext
- - InlineFormattingContext (not yet implemented)
- - TableFormattingContext (not yet implemented)
- - FlexFormattingContext (not yet implemented)
- - etc.
-
-Box
- - Container
- - BlockContainer
- - InitialBlockContainer
- - InlineContainer (not yet)
- - InlineBox (not yet)
-
-
Partially done:
Block formatting context:
- static, relative and out of flow positioning
Modified: trunk/Tools/LayoutReloaded/Utils.js (229806 => 229807)
--- trunk/Tools/LayoutReloaded/Utils.js 2018-03-21 14:44:08 UTC (rev 229806)
+++ trunk/Tools/LayoutReloaded/Utils.js 2018-03-21 16:32:00 UTC (rev 229807)
@@ -520,10 +520,10 @@
return indentation + (box.node().tagName ? (box.node().tagName + " ") : "") + box.name() + " at (" + boxRect.left() + "," + boxRect.top() + ") size " + boxRect.width() + "x" + boxRect.height() + "\n";
}
- static _dumpLines(root, level) {
+ static _dumpLines(layoutState, root, level) {
ASSERT(root.establishesInlineFormattingContext());
- let inlineFormattingContext = root.establishedFormattingContext();
- let lines = inlineFormattingContext.lines();
+ let inlineFormattingState = layoutState.formattingState(root);
+ let lines = inlineFormattingState.lines();
let content = "";
let indentation = " ".repeat(level);
lines.forEach(function(line) {
@@ -540,7 +540,7 @@
static _dumpTree(layoutState, root, level) {
let content = "";
if (root.isBlockContainerBox() && root.establishesInlineFormattingContext())
- content += this._dumpLines(root, level);
+ content += this._dumpLines(layoutState, root, level);
for (let child = root.firstChild(); child; child = child.nextSibling()) {
content += this._dumpBox(layoutState, child, level);
if (child.isContainer())
Modified: trunk/Tools/LayoutReloaded/test/index.html (229806 => 229807)
--- trunk/Tools/LayoutReloaded/test/index.html 2018-03-21 14:44:08 UTC (rev 229806)
+++ trunk/Tools/LayoutReloaded/test/index.html 2018-03-21 16:32:00 UTC (rev 229807)
@@ -61,7 +61,8 @@
"floating-box-clear-both-simple.html",
"almost-intruding-left-float-simple.html",
"negative-margin-simple.html",
- "intruding-left-float-simple.html"
+ "intruding-left-float-simple.html",
+ "simple-inline-text.html"
];
let debugThis = [];
Added: trunk/Tools/LayoutReloaded/test/simple-inline-text.html (0 => 229807)
--- trunk/Tools/LayoutReloaded/test/simple-inline-text.html (rev 0)
+++ trunk/Tools/LayoutReloaded/test/simple-inline-text.html 2018-03-21 16:32:00 UTC (rev 229807)
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+<body><div>foobar</div></body>
+</html>
