Skip to content

Commit 3cf4b31

Browse files
alanbaradlayalanbaradlay
committed
REGRESSION (255598@main): checkbox overlaps Log In button on ally.com
https://bugs.webkit.org/show_bug.cgi?id=252379 <rdar://104303475> Reviewed by Antti Koivisto. While display boxes are positioned based on margin boxes, the left/right side of a display box do not include these margins. e.g. [display box #1]<- 100px margin ->[display box #2] width: 50px width: 50px margin-right: 100px; display box #1's right: 50px display box #2's left: 150px This patch makes sure when we place an out-of-flow box next to display box #1, we put it at 150px and not at 50px. * LayoutTests/fast/inline/out-of-flow-inline-with-previous-next-margin-expected.html: Added. * LayoutTests/fast/inline/out-of-flow-inline-with-previous-next-margin.html: Added. * Source/WebCore/layout/formattingContexts/inline/InlineFormattingGeometry.cpp: (WebCore::Layout::InlineFormattingGeometry::staticPositionForOutOfFlowInlineLevelBox const): Canonical link: https://commits.webkit.org/260380@main
1 parent f8d4e26 commit 3cf4b31

File tree

3 files changed

+92
-4
lines changed

3 files changed

+92
-4
lines changed

‎LayoutTests/fast/inline/out-of-flow-inline-with-previous-next-margin-expected.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<style>
2+
.container {
3+
position: relative;
4+
}
5+
6+
.inline_block {
7+
display: inline-block;
8+
width: 50px;
9+
height: 50px;
10+
background-color: green;
11+
}
12+
13+
.not_abs_pos {
14+
display: inline-block;
15+
width: 50px;
16+
height: 50px;
17+
background-color: blue;
18+
}
19+
</style>
20+
21+
<div class=container>
22+
<div class=inline_block style="margin-inline-end: 10px;"></div><div class=not_abs_pos></div>
23+
</div>
24+
25+
<div class=container>
26+
<div class=inline_block style="margin-inline-start: 10px; margin-inline-end: -60px;"></div><div class=not_abs_pos></div>
27+
</div>
28+
29+
<div class=container>
30+
<div class=inline_block></div>
31+
</div>
32+
<div class=container style="margin-top: 10px">
33+
<div class=not_abs_pos></div>
34+
</div>
35+
36+
<div class=container>
37+
<div class=inline_block></div>
38+
</div>
39+
<div class=container>
40+
<div class=inline_block style="margin-inline-start: 10px; margin-inline-end: -60px;"></div><div class=not_abs_pos></div>
41+
</div>

‎LayoutTests/fast/inline/out-of-flow-inline-with-previous-next-margin.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<style>
2+
.container {
3+
position: relative;
4+
}
5+
6+
.inline_block {
7+
display: inline-block;
8+
width: 50px;
9+
height: 50px;
10+
background-color: green;
11+
}
12+
13+
.abs_pos {
14+
display: inline;
15+
position: absolute;
16+
width: 50px;
17+
height: 50px;
18+
background-color: blue;
19+
}
20+
</style>
21+
22+
<div class=container>
23+
<div class=inline_block style="margin-inline-end: 10px;"></div>
24+
<div class=abs_pos></div>
25+
</div>
26+
27+
<div class=container>
28+
<div class=abs_pos></div>
29+
<div class=inline_block style="margin-inline-start: 10px;"></div>
30+
</div>
31+
32+
<div class=container style="height: 110px; writing-mode: vertical-lr;">
33+
<div class=inline_block style="margin-inline-end: 10px;"></div>
34+
<div class=abs_pos></div>
35+
</div>
36+
37+
<div class=container style="width: 40px">
38+
<div class=inline_block></div>
39+
<div class=abs_pos></div>
40+
<div class=inline_block style="margin-inline-start: 10px;"></div>
41+
</div>

‎Source/WebCore/layout/formattingContexts/inline/InlineFormattingGeometry.cpp‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -273,11 +273,17 @@ LayoutPoint InlineFormattingGeometry::staticPositionForOutOfFlowInlineLevelBox(c
273273
}
274274

275275
auto isHorizontalWritingMode = formattingContext().root().style().isHorizontalWritingMode();
276-
auto leftSideToLogicalTopLeft = [&] (auto& displayBox, auto& line) {
277-
return isHorizontalWritingMode ? LayoutPoint(displayBox.left(), line.top()) : LayoutPoint(displayBox.top(), line.left());
276+
auto leftSideToLogicalTopLeft = [&] (auto& displayBox, auto& line, bool mayNeedMarginAdjustment = true) {
277+
auto marginStart = LayoutUnit { };
278+
if (mayNeedMarginAdjustment && displayBox.isNonRootInlineLevelBox())
279+
marginStart = formattingContext().geometryForBox(displayBox.layoutBox()).marginStart();
280+
return isHorizontalWritingMode ? LayoutPoint(displayBox.left() - marginStart, line.top()) : LayoutPoint(displayBox.top() - marginStart, line.left());
278281
};
279282
auto rightSideToLogicalTopLeft = [&] (auto& displayBox, auto& line) {
280-
return isHorizontalWritingMode ? LayoutPoint(displayBox.right(), line.top()) : LayoutPoint(displayBox.bottom(), line.left());
283+
auto marginEnd = LayoutUnit { };
284+
if (displayBox.isNonRootInlineLevelBox())
285+
marginEnd = formattingContext().geometryForBox(displayBox.layoutBox()).marginEnd();
286+
return isHorizontalWritingMode ? LayoutPoint(displayBox.right() + marginEnd, line.top()) : LayoutPoint(displayBox.bottom() + marginEnd, line.left());
281287
};
282288

283289
auto previousDisplayBoxIndexBeforeOutOfFlowBox = previousDisplayBoxIndex(outOfFlowBox, boxes);
@@ -296,7 +302,7 @@ LayoutPoint InlineFormattingGeometry::staticPositionForOutOfFlowInlineLevelBox(c
296302
inlineBoxDisplayBox.moveHorizontally(inlineContentBoxOffset);
297303
else
298304
inlineBoxDisplayBox.moveVertically(inlineContentBoxOffset);
299-
return leftSideToLogicalTopLeft(inlineBoxDisplayBox, lines[inlineBoxDisplayBox.lineIndex()]);
305+
return leftSideToLogicalTopLeft(inlineBoxDisplayBox, lines[inlineBoxDisplayBox.lineIndex()], false);
300306
}
301307

302308
auto previousBoxOverflows = (isHorizontalWritingMode ? previousDisplayBox.right() > currentLine.right() : previousDisplayBox.bottom() > currentLine.bottom()) || previousDisplayBox.isLineBreakBox();

0 commit comments

Comments
 (0)