mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-09 09:34:57 +09:00
LibWeb: Correct the calculation for right float intrusion
We used to subtract the maximum right margin of any containing box, but we want to subtract the entire right margin instead. This yielded incorrect intrusions for right floats not placed in the root.
This commit is contained in:
Ruben
Jelle Raaijmakers
parent
8e5cc74eb1
commit
3263b629c6
Notes:
github-actions[bot]
2025-05-27 15:33:02 +00:00
Author: https://github.com/rubenqwertyuiop
Commit: 3263b629c6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4869
Reviewed-by: https://github.com/gmta ✅
7 changed files with 150 additions and 38 deletions
|
|
@ -1267,6 +1267,7 @@ BlockFormattingContext::SpaceUsedAndContainingMarginForFloats BlockFormattingCon
|
||||||
space_and_containing_margin.right_used_space = floating_box.offset_from_edge
|
space_and_containing_margin.right_used_space = floating_box.offset_from_edge
|
||||||
+ floating_box.used_values.margin_box_left();
|
+ floating_box.used_values.margin_box_left();
|
||||||
space_and_containing_margin.right_total_containing_margin = offset_from_containing_block_chain_margins_between_here_and_root;
|
space_and_containing_margin.right_total_containing_margin = offset_from_containing_block_chain_margins_between_here_and_root;
|
||||||
|
space_and_containing_margin.matching_right_float_box = floating_box.box;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1290,11 +1291,17 @@ FormattingContext::SpaceUsedByFloats BlockFormattingContext::intrusion_by_floats
|
||||||
|
|
||||||
auto left_intrusion = max(CSSPixels(0), left_side_floats_limit_to_right - max(CSSPixels(0), box_in_root_rect.x()));
|
auto left_intrusion = max(CSSPixels(0), left_side_floats_limit_to_right - max(CSSPixels(0), box_in_root_rect.x()));
|
||||||
|
|
||||||
CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0;
|
// If we did not match a right float, the right_total_containing_margin will be 0 (as its never set). Since no floats means
|
||||||
for (auto const* containing_block = &box_used_values; containing_block && &containing_block->node() != &root(); containing_block = containing_block->containing_block_used_values()) {
|
// no intrusion we would instead want it to be exactly equal to offset_from_containing_block_chain_margins_between_here_and_root.
|
||||||
offset_from_containing_block_chain_margins_between_here_and_root = max(offset_from_containing_block_chain_margins_between_here_and_root, containing_block->margin_box_right());
|
// Since this is not the case we have to explicitly handle this case.
|
||||||
|
CSSPixels right_intrusion = 0;
|
||||||
|
if (space_and_containing_margin.matching_right_float_box) {
|
||||||
|
CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0;
|
||||||
|
for (auto const* containing_block = &box_used_values; containing_block && &containing_block->node() != &root(); containing_block = containing_block->containing_block_used_values()) {
|
||||||
|
offset_from_containing_block_chain_margins_between_here_and_root += containing_block->margin_box_right();
|
||||||
|
}
|
||||||
|
right_intrusion = max(CSSPixels(0), right_side_floats_limit_to_right - offset_from_containing_block_chain_margins_between_here_and_root);
|
||||||
}
|
}
|
||||||
auto right_intrusion = max(CSSPixels(0), right_side_floats_limit_to_right - offset_from_containing_block_chain_margins_between_here_and_root);
|
|
||||||
|
|
||||||
return { left_intrusion, right_intrusion };
|
return { left_intrusion, right_intrusion };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -123,6 +123,7 @@ protected:
|
||||||
CSSPixels left_total_containing_margin;
|
CSSPixels left_total_containing_margin;
|
||||||
CSSPixels right_total_containing_margin;
|
CSSPixels right_total_containing_margin;
|
||||||
GC::Ptr<Box const> matching_left_float_box;
|
GC::Ptr<Box const> matching_left_float_box;
|
||||||
|
GC::Ptr<Box const> matching_right_float_box;
|
||||||
};
|
};
|
||||||
|
|
||||||
struct ShrinkToFitResult {
|
struct ShrinkToFitResult {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x68 [BFC] children: not-inline
|
||||||
|
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x52 children: not-inline
|
||||||
|
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.container> at (9,9) content-size 400x50 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.right.w320.red> at (89,9) content-size 320x50 floating [BFC] children: not-inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.left.w80.blue> at (9,9) content-size 80x50 floating [BFC] children: not-inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,60) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
||||||
|
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||||
|
PaintableWithLines (BlockContainer<HTML>) [0,0 800x68]
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
|
||||||
|
PaintableWithLines (BlockContainer<BODY>) [8,8 784x52]
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>.container) [8,8 402x52]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>.right.w320.red) [89,9 320x50]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>.left.w80.blue) [9,9 80x50]
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,60 784x0]
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x48 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
|
||||||
|
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.w500> at (8,8) content-size 500x0 children: not-inline
|
||||||
|
BlockContainer <(anonymous)> at (8,8) content-size 500x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.w400> at (8,8) content-size 400x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.w200.right.red> at (208,8) content-size 200x20 floating [BFC] children: not-inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,8) content-size 500x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.w220.right.blue> at (288,28) content-size 220x20 floating [BFC] children: not-inline
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
||||||
|
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||||
|
PaintableWithLines (BlockContainer<HTML>) [0,0 800x48]
|
||||||
|
PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>.w500) [8,8 500x0]
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,8 500x0]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>.w400) [8,8 400x0]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>.w200.right.red) [208,8 200x20]
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,8 500x0]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>.w220.right.blue) [288,28 220x20]
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0]
|
||||||
|
|
@ -14,36 +14,30 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
"baz"
|
"baz"
|
||||||
frag 4 from TextNode start: 13, length: 3, rect: [263,57 27.15625x16] baseline: 12.796875
|
frag 4 from TextNode start: 13, length: 3, rect: [263,57 27.15625x16] baseline: 12.796875
|
||||||
"foo"
|
"foo"
|
||||||
frag 5 from TextNode start: 17, length: 7, rect: [9,77 62.84375x16] baseline: 12.796875
|
frag 5 from TextNode start: 17, length: 11, rect: [9,77 98x16] baseline: 12.796875
|
||||||
|
"bar baz foo"
|
||||||
|
frag 6 from TextNode start: 29, length: 11, rect: [9,93 98x16] baseline: 12.796875
|
||||||
|
"bar baz foo"
|
||||||
|
frag 7 from TextNode start: 41, length: 7, rect: [9,109 62.84375x16] baseline: 12.796875
|
||||||
"bar baz"
|
"bar baz"
|
||||||
frag 6 from TextNode start: 25, length: 7, rect: [9,93 62.796875x16] baseline: 12.796875
|
frag 8 from TextNode start: 1, length: 7, rect: [9,125 62.796875x16] baseline: 12.796875
|
||||||
"foo bar"
|
"foo bar"
|
||||||
frag 7 from TextNode start: 33, length: 7, rect: [9,109 62.359375x16] baseline: 12.796875
|
frag 9 from TextNode start: 9, length: 31, rect: [9,141 274.359375x16] baseline: 12.796875
|
||||||
"baz foo"
|
"baz foo bar baz foo bar baz foo"
|
||||||
frag 8 from TextNode start: 41, length: 7, rect: [9,125 62.84375x16] baseline: 12.796875
|
frag 10 from TextNode start: 41, length: 31, rect: [9,157 274.84375x16] baseline: 12.796875
|
||||||
"bar baz"
|
"bar baz foo bar baz foo bar baz"
|
||||||
frag 9 from TextNode start: 1, length: 27, rect: [9,141 239.15625x16] baseline: 12.796875
|
frag 11 from TextNode start: 1, length: 23, rect: [61,173 204x16] baseline: 12.796875
|
||||||
"foo bar baz foo bar baz foo"
|
"foo bar baz foo bar baz"
|
||||||
frag 10 from TextNode start: 29, length: 27, rect: [9,157 239.640625x16] baseline: 12.796875
|
frag 12 from TextNode start: 1, length: 23, rect: [61,189 204x16] baseline: 12.796875
|
||||||
"bar baz foo bar baz foo bar"
|
"foo bar baz foo bar baz"
|
||||||
frag 11 from TextNode start: 57, length: 16, rect: [61,173 141.203125x16] baseline: 12.796875
|
frag 13 from TextNode start: 25, length: 27, rect: [61,205 239.15625x16] baseline: 12.796875
|
||||||
"baz foo bar baz "
|
"foo bar baz foo bar baz foo"
|
||||||
frag 12 from TextNode start: 1, length: 11, rect: [202.203125,173 98x16] baseline: 12.796875
|
frag 14 from TextNode start: 53, length: 27, rect: [61,221 239.640625x16] baseline: 12.796875
|
||||||
"foo bar baz"
|
"bar baz foo bar baz foo bar"
|
||||||
frag 13 from TextNode start: 13, length: 12, rect: [61,189 106x16] baseline: 12.796875
|
frag 15 from TextNode start: 81, length: 31, rect: [9,237 274.359375x16] baseline: 12.796875
|
||||||
"foo bar baz "
|
"baz foo bar baz foo bar baz foo"
|
||||||
frag 14 from TextNode start: 1, length: 11, rect: [167,189 98x16] baseline: 12.796875
|
frag 16 from TextNode start: 113, length: 31, rect: [9,253 274.84375x16] baseline: 12.796875
|
||||||
"foo bar baz"
|
|
||||||
frag 15 from TextNode start: 13, length: 23, rect: [61,205 204x16] baseline: 12.796875
|
|
||||||
"foo bar baz foo bar baz"
|
|
||||||
frag 16 from TextNode start: 37, length: 27, rect: [61,221 239.15625x16] baseline: 12.796875
|
|
||||||
"foo bar baz foo bar baz foo"
|
|
||||||
frag 17 from TextNode start: 65, length: 31, rect: [9,237 274.84375x16] baseline: 12.796875
|
|
||||||
"bar baz foo bar baz foo bar baz"
|
"bar baz foo bar baz foo bar baz"
|
||||||
frag 18 from TextNode start: 97, length: 31, rect: [9,253 274.796875x16] baseline: 12.796875
|
|
||||||
"foo bar baz foo bar baz foo bar"
|
|
||||||
frag 19 from TextNode start: 129, length: 15, rect: [9,269 133.203125x16] baseline: 12.796875
|
|
||||||
"baz foo bar baz"
|
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.lefty> at (10,10) content-size 50x50 floating [BFC] children: not-inline
|
BlockContainer <div.lefty> at (10,10) content-size 50x50 floating [BFC] children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
|
@ -51,26 +45,26 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.two> at (108,78) content-size 200x50 floating [BFC] children: not-inline
|
BlockContainer <div.two> at (108,78) content-size 200x50 floating [BFC] children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.righty> at (278,142) content-size 30x30 floating [BFC] children: not-inline
|
BlockContainer <div.righty> at (76,110) content-size 30x30 floating [BFC] children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.lefty.shwifty> at (10,174) content-size 50x50 floating [BFC] children: not-inline
|
BlockContainer <div.lefty.shwifty> at (10,174) content-size 50x50 floating [BFC] children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.righty> at (278,190) content-size 30x30 floating [BFC] children: not-inline
|
BlockContainer <div.righty> at (278,174) content-size 30x30 floating [BFC] children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
|
||||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x268] overflow: [0,0 800x285]
|
PaintableWithLines (BlockContainer<HTML>) [0,0 800x268] overflow: [0,0 800x269]
|
||||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x252] overflow: [8,8 784x277]
|
PaintableWithLines (BlockContainer<BODY>) [8,8 784x252] overflow: [8,8 784x261]
|
||||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
||||||
PaintableWithLines (BlockContainer<DIV>.outer) [8,8 302x252] overflow: [9,9 300x276]
|
PaintableWithLines (BlockContainer<DIV>.outer) [8,8 302x252] overflow: [9,9 300x260]
|
||||||
TextPaintable (TextNode<#text>)
|
TextPaintable (TextNode<#text>)
|
||||||
PaintableWithLines (BlockContainer<DIV>.lefty) [9,9 52x52]
|
PaintableWithLines (BlockContainer<DIV>.lefty) [9,9 52x52]
|
||||||
PaintableWithLines (BlockContainer<DIV>.one) [61,25 202x52]
|
PaintableWithLines (BlockContainer<DIV>.one) [61,25 202x52]
|
||||||
PaintableWithLines (BlockContainer<DIV>.two) [107,77 202x52]
|
PaintableWithLines (BlockContainer<DIV>.two) [107,77 202x52]
|
||||||
TextPaintable (TextNode<#text>)
|
TextPaintable (TextNode<#text>)
|
||||||
PaintableWithLines (BlockContainer<DIV>.righty) [277,141 32x32]
|
PaintableWithLines (BlockContainer<DIV>.righty) [75,109 32x32]
|
||||||
TextPaintable (TextNode<#text>)
|
TextPaintable (TextNode<#text>)
|
||||||
PaintableWithLines (BlockContainer<DIV>.lefty.shwifty) [9,173 52x52]
|
PaintableWithLines (BlockContainer<DIV>.lefty.shwifty) [9,173 52x52]
|
||||||
TextPaintable (TextNode<#text>)
|
TextPaintable (TextNode<#text>)
|
||||||
PaintableWithLines (BlockContainer<DIV>.righty) [277,189 32x32]
|
PaintableWithLines (BlockContainer<DIV>.righty) [277,173 32x32]
|
||||||
TextPaintable (TextNode<#text>)
|
TextPaintable (TextNode<#text>)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
width: 400px;
|
||||||
|
height: 50px;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
float: left;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w320 { width: 320px; }
|
||||||
|
.w80 { width: 80px; }
|
||||||
|
|
||||||
|
.red { background: red; }
|
||||||
|
.blue { background: blue; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="right w320 red"></div>
|
||||||
|
<div class="left w80 blue"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
.w500 { width: 500px; }
|
||||||
|
.w400 { width: 400px; }
|
||||||
|
.w220 { width: 220px; }
|
||||||
|
.w200 { width: 200px; }
|
||||||
|
.right {
|
||||||
|
height: 20px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.blue { background: blue; }
|
||||||
|
.red { background: red; }
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div class="w500">
|
||||||
|
<div class="w400">
|
||||||
|
<div class="w200 right red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="w220 right blue"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue