fast/layoutformattingcontext/absolute-positioned-box-with-inline-sibling.html [ Skip ]

body {

margin: 0px;

font-family: Ahem;

}

div {

line-height: 40px;

}

img {

position: absolute;

width: 10px;

height: 10px;

background-color: green;

}

<div>text</div>

<div>text</div>

<div>text</div>

<div>text</div>

<div><span></span>text</div>

<div><span><span></span></span>text</div>

<div><span>text</span>text</div>

<div><span>text</span>text</div>

<div><br>text</div>

<div>text<br></div>

<div>text<br></div>

<img style="left: 0px; top: 0px;">

<img style="left: 0px; top: 40px;">

<img style="left: 64px; top: 80px;">

<img style="left: 0px; top: 120px;"><img style="left: 64px; top: 120px;">

<img style="left: 0px; top: 160px;"><img style="left: 64px; top: 160px;">

<img style="left: 0px; top: 200px;"><img style="left: 64px; top: 200px;">

<img style="left: 64px; top: 240px;"><img style="left: 128px; top: 240px;">

<img style="left: 64px; top: 280px;"><img style="left: 128px; top: 280px;">

<img style="left: 0px; top: 360px;">

<img style="left: 64px; top: 400px;">

<img style="left: 0px; top: 520px;">

<img style="left: 0px; top: 560px;">

<img style="left: 0px; top: 600px;">

body {

margin: 0px;

font-family: Ahem;

}

div {

line-height: 40px;

}

img {

position: absolute;

width: 10px;

height: 10px;

background-color: green;

}

<div><img>text</div>

<div><img><img>text</div>

<div>text<img></div>

<div><img>text<img></div>

<div><span><img></span>text<img></div>

<div><span><span><img></span></span>text<img></div>

<div><span>text<img></span>text<img></div>

<div><span>text</span><img>text<img></div>

<div><br>text<img></div>

<div>text<br><img></div>

<div>text<br><img><img></div>

2021-08-22 Alan Bujtas <zalan@apple.com>

[LFC][IFC] Add support for out-of-flow box static positioning

https://bugs.webkit.org/show_bug.cgi?id=229103

Reviewed by Antti Koivisto.

This patch is in preparation for enabling positioned content for IFC handling.

In this patch we compute the static position for out-of-flow content inside the inline formatting context.

As per spec, the static position of an out-of-flow box is computed as if the position was set to static.

However it does not mean that the out-of-flow box should be involved in the inline layout process.

Instead we figure out this static position after the inline layout by looking at

the previous sibling (or parent) box's geometry and place the out-of-flow box at the logical right position.

* layout/formattingContexts/inline/InlineFormattingContext.cpp:

(WebCore::Layout::InlineFormattingContext::layoutInFlowContent):

(WebCore::Layout::InlineFormattingContext::lineLayoutForIntergration):

(WebCore::Layout::InlineFormattingContext::computeStaticPositionForOutOfFlowContent):

(WebCore::Layout::InlineFormattingContext::computedIntrinsicWidthConstraints):

(WebCore::Layout::InlineFormattingContext::collectContentIfNeeded):

(WebCore::Layout::InlineFormattingContext::collectInlineContentIfNeeded): Deleted.

* layout/formattingContexts/inline/InlineFormattingContext.h:

collectContentIfNeeded();

computeStaticPositionForOutOfFlowContent(formattingState().outOfFlowBoxes());

collectContentIfNeeded();

computeStaticPositionForOutOfFlowContent(formattingState().outOfFlowBoxes());

void InlineFormattingContext::computeStaticPositionForOutOfFlowContent(const FormattingState::OutOfFlowBoxList& outOfFlowBoxes)

{

// This function computes the static position for out-of-flow content inside the inline formatting context.

// As per spec, the static position of an out-of-flow box is computed as if the position was set to static.

// However it does not mean that the out-of-flow box should be involved in the inline layout process.

// Instead we figure out this static position after the inline layout by looking at the previous/next sibling (or parent) box's geometry and

// place the out-of-flow box at the logical right position.

auto& formattingState = this->formattingState();

auto& lines = formattingState.lines();

auto& lineRuns = formattingState.lineRuns();

for (auto& outOfFlowBox : outOfFlowBoxes) {

auto& outOfFlowGeometry = formattingState.boxGeometry(*outOfFlowBox);

// Both previous float and out-of-flow boxes are skipped here. A series of adjoining out-of-flow boxes should all be placed

// at the same static position (they don't affect next-sibling positions) and while floats do participate in the inline layout

// their positions have already been taken into account during the inline layout.

auto previousContentSkippingFloats = [&]() -> const Layout::Box* {

auto* previousSibling = outOfFlowBox->previousSibling();

for (; previousSibling && previousSibling->isFloatingPositioned(); previousSibling = previousSibling->previousSibling()) { }

if (previousSibling)

return previousSibling;

// Parent is either the root here or another inline box (e.g. <span><img style="position: absolute"></span>)

auto& parent = outOfFlowBox->parent();

return &parent == &root() ? nullptr : &parent;

}();

if (!previousContentSkippingFloats) {

// This is the first (non-float)child. Let's place it to the left of the first run.

// <div><img style="position: absolute">text content</div>

ASSERT(lineRuns.size());

outOfFlowGeometry.setLogicalTopLeft({ lineRuns[0].logicalLeft(), lines[0].lineBoxLogicalRect().top() });

continue;

}

if (previousContentSkippingFloats->isOutOfFlowPositioned()) {

// Subsequent out-of-flow positioned boxes share the same static position.

// <div>text content<img style="position: absolute"><img style="position: absolute"></div>

outOfFlowGeometry.setLogicalTopLeft(BoxGeometry::borderBoxTopLeft(geometryForBox(*previousContentSkippingFloats)));

continue;

}

ASSERT(previousContentSkippingFloats->isInFlow());

auto placeOutOfFlowBoxAfterPreviousInFlowBox = [&] {

// The out-of-flow box should be placed after this inflow box.

// Skip to the last run of this layout box. The last run's geometry is used to compute the out-of-flow box's static position.

size_t lastRunIndexOnPreviousLayoutBox = 0;

for (; lastRunIndexOnPreviousLayoutBox < lineRuns.size() && &lineRuns[lastRunIndexOnPreviousLayoutBox].layoutBox() != previousContentSkippingFloats; ++lastRunIndexOnPreviousLayoutBox) { }

if (lastRunIndexOnPreviousLayoutBox == lineRuns.size()) {

// FIXME: In very rare cases, the previous box's content might have been completely collapsed and left us with no run.

ASSERT_NOT_IMPLEMENTED_YET();

return;

}

for (; lastRunIndexOnPreviousLayoutBox < lineRuns.size() && &lineRuns[lastRunIndexOnPreviousLayoutBox].layoutBox() == previousContentSkippingFloats; ++lastRunIndexOnPreviousLayoutBox) { }

--lastRunIndexOnPreviousLayoutBox;

// Let's check if the previous run is the last run on the current line and use the next run's left instead.

auto& previousRun = lineRuns[lastRunIndexOnPreviousLayoutBox];

auto* nextRun = lastRunIndexOnPreviousLayoutBox + 1 < lineRuns.size() ? &lineRuns[lastRunIndexOnPreviousLayoutBox + 1] : nullptr;

if (nextRun && nextRun->lineIndex() == previousRun.lineIndex()) {

// Previous and next runs are on the same line. The out-of-flow box is right at the previous run's logical right.

// <div>text<img style="position: absolute">content</div>

auto logicalLeft = previousRun.logicalRight();

if (previousContentSkippingFloats->isInlineBox() && !previousContentSkippingFloats->isAnonymous()) {

// <div>text<span><img style="position: absolute">content</span></div>

// or

// <div>text<span>content</span><img style="position: absolute"></div>

auto& inlineBoxBoxGeometry = geometryForBox(*previousContentSkippingFloats);

logicalLeft = previousContentSkippingFloats == &outOfFlowBox->parent()

? BoxGeometry::borderBoxLeft(inlineBoxBoxGeometry) + inlineBoxBoxGeometry.contentBoxLeft()

: BoxGeometry::borderBoxRect(inlineBoxBoxGeometry).right();

}

outOfFlowGeometry.setLogicalTopLeft({ logicalLeft, lines[previousRun.lineIndex()].lineBoxLogicalRect().top() });

return;

}

if (nextRun) {

// The out of flow box is placed at the beginning of the next line (where the first run on the line is).

// <div>text<br><img style="position: absolute"><img style="position: absolute">content</div>

outOfFlowGeometry.setLogicalTopLeft({ nextRun->logicalLeft(), lines[nextRun->lineIndex()].lineBoxLogicalRect().top() });

return;

}

auto& lastLineLogicalRect = lines[previousRun.lineIndex()].lineBoxLogicalRect();

// This out-of-flow box is the last box.

// FIXME: Use isLineBreak instead to cover preserved new lines too.

if (previousRun.layoutBox().isLineBreakBox()) {

// <div>text<br><img style="position: absolute"><img style="position: absolute"></div>

outOfFlowGeometry.setLogicalTopLeft({ lastLineLogicalRect.left(), lastLineLogicalRect.bottom() });

return;

}

// FIXME: We may need to check if this box actually fits the last line and move it over to the "next" line.

outOfFlowGeometry.setLogicalTopLeft({ previousRun.logicalRight(), lastLineLogicalRect.top() });

};

placeOutOfFlowBoxAfterPreviousInFlowBox();

}

}

collectContentIfNeeded();

void InlineFormattingContext::collectContentIfNeeded()

layoutQueue.append(root().firstChild());

auto isInlineBoxWithInlineContent = layoutBox.isInlineBox() && !layoutBox.isInlineTextBox() && !layoutBox.isLineBreakBox() && !layoutBox.isOutOfFlowPositioned();

if (!isInlineBoxWithInlineContent)

if (!inlineBoxWithInlineContent.hasChild())

layoutQueue.append(inlineBoxWithInlineContent.firstChild());

if (layoutBox.isOutOfFlowPositioned()) {

// Let's not construct InlineItems for out-of-flow content as they don't participate in the inline layout.

// However to be able to static positioning them, we need to compute their approximate positions.

formattingState.addOutOfFlowBox(layoutBox);

} else if (is<LineBreakBox>(layoutBox)) {

if (auto* nextSibling = layoutBox.nextSibling()) {

#include "FormattingState.h"

void computeStaticPositionForOutOfFlowContent(const FormattingState::OutOfFlowBoxList&);

void collectContentIfNeeded();