Skip to content
Permalink
Browse files
Incorrect sizing of elements with visually hidden text inside
https://bugs.webkit.org/show_bug.cgi?id=241459

Reviewed by Antti Koivisto.

This patch fixes the incorrect inline width computation when an inline box (e.g. <span>) with margin-inline-start (e.g. margin-left) is followed by an out-of-flow element.

<div id=container>some<span style="margin-left: 10px"><div style="position: absolute"></div>text</span></div>

In LineBreaker::nextLineBreak, while iterating through the content of [container], the margin-left of the inline box (span) is included twice; first for the out-of-flow box and second for the [text] content. This patch ensures that when we reach the [text] content, we check if we have already reserved the space for the inline box's margin (padding and border).
(While out-of-flow inline level boxes are not supposed to participate in inline layout, (in legacy line layout) in order to compute their static position we include them in line layout. A more involved fix would be to exclude all out-of-flow boxes from line layout and deal with their static positioning after completing the core line layout).

* LayoutTests/fast/block/shrink-to-fit-with-out-of-flow-and-inline-box-margin-expected.html: Added.
* LayoutTests/fast/block/shrink-to-fit-with-out-of-flow-and-inline-box-margin.html: Added.
* Source/WebCore/rendering/line/BreakingContext.h: Make sure when the out-of-flow box takes the margin, we don't add it again for the text content. Also, reset this flag for subsequent content.
(WebCore::inlineLogicalWidth):

Canonical link: https://commits.webkit.org/251483@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295478 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
alanbujtas committed Jun 12, 2022
1 parent a8ac5e3 commit 79ad9ed64760e9fb1d02e26be2ff69b849907061
Showing 3 changed files with 33 additions and 4 deletions.
@@ -0,0 +1,12 @@
<style>
.container {
float: left;
font-size: 20px;
}

.margin_offset {
margin-inline-start: 10px;
}
</style>
<div class=container>this content<span class=margin_offset>should not wrap</span></div>
<div class=container style="direction: rtl">this content<span class=margin_offset>should not wrap</span></div>
@@ -0,0 +1,16 @@
<style>
.container {
float: left;
font-size: 20px;
}

.margin_offset {
margin-inline-start: 10px;
}

.out_of_flow {
position: absolute;
}
</style>
<div class=container>this content<span class=margin_offset><div class=out_of_flow></div>should not wrap</span></div>
<div class=container style="direction: rtl">this content<span class=margin_offset><div class=out_of_flow></div>should not wrap</span></div>
@@ -352,7 +352,10 @@ inline void BreakingContext::handleOutOfFlowPositioned(Vector<RenderBox*>& posit
} else
positionedObjects.append(&box);

m_width.addUncommittedWidth(inlineLogicalWidth(box));
if (auto inlineBoxStartWidth = inlineLogicalWidth(box)) {
m_width.addUncommittedWidth(inlineBoxStartWidth);
m_appliedStartWidth = true;
}
// Reset prior line break context characters.
m_renderTextInfo.lineBreakIterator.resetPriorContext();
}
@@ -637,9 +640,6 @@ inline float BreakingContext::computeAdditionalBetweenWordsWidth(RenderText& ren

inline bool BreakingContext::handleText(WordMeasurements& wordMeasurements, bool& hyphenated, unsigned& consecutiveHyphenatedLines)
{
if (!m_current.offset())
m_appliedStartWidth = false;

auto& renderer = downcast<RenderText>(*m_current.renderer());
bool isSVGText = renderer.isSVGInlineText();

@@ -1050,6 +1050,7 @@ inline bool BreakingContext::handleText(WordMeasurements& wordMeasurements, bool
m_atEnd = true;
}
}
m_appliedStartWidth = false;
return false;
}

0 comments on commit 79ad9ed

Please sign in to comment.