beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 07:30:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Only derive baseline from children with a non-empty line box

Browse source 
If none of the box children have a baseline set, the bottom margin
edge of the box is used as the baseline.
This commit is contained in:
Christophe Naud-Dulude 2023-07-28 09:58:01 -04:00 committed by Andreas Kling
parent 38edab09a0
commit 4f9f21e8fe
Notes: sideshowbarker 2024-07-17 18:06:52 +09:00 
Author: https://github.com/Chris911
Commit: https://github.com/SerenityOS/serenity/commit/4f9f21e8fe
Pull-request: https://github.com/SerenityOS/serenity/pull/20237
Reviewed-by: https://github.com/awesomekling ✅
10 changed files with 84 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/flex/box-baseline-with-inline-flex-empty-child.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x42 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x24 children: not-inline
BlockContainer <div.first> at (11,11) content-size 778x22 children: inline
line 0 width: 22, height: 22, bottom: 22, baseline: 22
frag 0 from Box start: 0, length: 0, rect: [22,22 0x0]
Box <span.second> at (22,22) content-size 0x0 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (22,22) content-size 0x0 [BFC] children: inline
TextNode <#text>

2
Tests/LibWeb/Layout/expected/input-element-with-display-inline.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x45.828125 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x27.828125 children: inline
line 0 width: 202, height: 27.828125, bottom: 27.828125, baseline: 23.828125
line 0 width: 202, height: 27.828125, bottom: 27.828125, baseline: 27.828125
frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 200x25.828125]
BlockContainer <input> at (11,11) content-size 200x25.828125 inline-block [BFC] children: not-inline
Box <div> at (13,12) content-size 196x23.828125 flex-container(row) [FFC] children: not-inline

2
Tests/LibWeb/Layout/expected/svg/svg-negative-elliptical-arg-number.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: inline
line 0 width: 100, height: 100, bottom: 100, baseline: 48
line 0 width: 100, height: 100, bottom: 100, baseline: 100
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 100x100]
SVGSVGBox <svg> at (8,8) content-size 100x100 [SVG] children: not-inline
SVGGeometryBox <path> at (8,9.984375) content-size 100x48 children: not-inline

2
Tests/LibWeb/Layout/expected/svg/svg-path-with-implicit-lineto.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: inline
line 0 width: 100, height: 100, bottom: 100, baseline: 60
line 0 width: 100, height: 100, bottom: 100, baseline: 100
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 100x100]
SVGSVGBox <svg> at (8,8) content-size 100x100 [SVG] children: not-inline
SVGGeometryBox <path> at (28,28) content-size 60x60 children: not-inline

2
Tests/LibWeb/Layout/expected/svg/svg-with-css-variable-in-presentation-hint.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x118 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x102 children: inline
line 0 width: 102, height: 102, bottom: 102, baseline: 60
line 0 width: 102, height: 102, bottom: 102, baseline: 102
frag 0 from SVGSVGBox start: 0, length: 0, rect: [9,9 100x100]
SVGSVGBox <svg> at (9,9) content-size 100x100 [SVG] children: not-inline
SVGGeometryBox <rect> at (29,29) content-size 60x60 children: not-inline

10
Tests/LibWeb/Layout/expected/svg/text-fill-none.txt
View file

@ -1,8 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x163.53125 children: inline
line 0 width: 300, height: 163.53125, bottom: 163.53125, baseline: 13.53125
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,21.53125 300x150]
SVGSVGBox <svg> at (8,21.53125) content-size 300x150 [SVG] children: not-inline
SVGTextBox <text> at (8,21.53125) content-size 0x0 children: not-inline
BlockContainer <body> at (8,8) content-size 784x150 children: inline
line 0 width: 300, height: 150, bottom: 150, baseline: 150
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 300x150]
SVGSVGBox <svg> at (8,8) content-size 300x150 [SVG] children: not-inline
SVGTextBox <text> at (8,8) content-size 0x0 children: not-inline
TextNode <#text>

94
Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt
View file

@ -1,154 +1,154 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x223.875 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x210.34375 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x207.875 children: not-inline
BlockContainer <body> at (8,8) content-size 784x194.34375 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.horizontal> at (8,8) content-size 784x207.875 children: inline
line 0 width: 160.90625, height: 207.875, bottom: 207.875, baseline: 13.53125
frag 0 from BlockContainer start: 0, length: 0, rect: [9,22.53125 158.90625x192.34375]
BlockContainer <div.horizontal> at (8,8) content-size 784x194.34375 children: inline
line 0 width: 160.90625, height: 194.34375, bottom: 194.34375, baseline: 194.34375
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 158.90625x192.34375]
TextNode <#text>
BlockContainer <table> at (9,22.53125) content-size 158.90625x192.34375 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,22.53125) content-size 158.90625x0 children: inline
BlockContainer <table> at (9,9) content-size 158.90625x192.34375 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 158.90625x0 children: inline
TextNode <#text>
TableWrapper <(anonymous)> at (9,22.53125) content-size 158.90625x192.34375 inline-block [BFC] children: not-inline
Box <(anonymous)> at (9,22.53125) content-size 158.90625x192.34375 inline-table table-box [TFC] children: not-inline
Box <tbody> at (9,22.53125) content-size 158.90625x192.34375 table-row-group children: not-inline
TableWrapper <(anonymous)> at (9,9) content-size 158.90625x192.34375 inline-block [BFC] children: not-inline
Box <(anonymous)> at (9,9) content-size 158.90625x192.34375 inline-table table-box [TFC] children: not-inline
Box <tbody> at (9,9) content-size 158.90625x192.34375 table-row-group children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,22.53125) content-size 158.90625x38.46875 table-row children: not-inline
Box <tr> at (9,9) content-size 158.90625x38.46875 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (29.5,33.03125) content-size 14.265625x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (29.5,19.5) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [29.5,33.03125 14.265625x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [29.5,19.5 14.265625x17.46875]
"A"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (84.765625,33.03125) content-size 12.546875x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (84.765625,19.5) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [86.359375,33.03125 9.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [86.359375,19.5 9.34375x17.46875]
"B"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (138.3125,33.03125) content-size 9.09375x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (138.3125,19.5) content-size 9.09375x17.46875 table-cell [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [139.6875,33.03125 6.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [139.6875,19.5 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,61) content-size 158.90625x38.46875 table-row children: not-inline
Box <tr> at (9,47.46875) content-size 158.90625x38.46875 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (29.5,71.5) content-size 14.265625x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (29.5,57.96875) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 10.3125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [31.46875,71.5 10.3125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [31.46875,57.96875 10.3125x17.46875]
"C"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (84.765625,71.5) content-size 12.546875x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (84.765625,57.96875) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 11.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [85.46875,71.5 11.140625x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [85.46875,57.96875 11.140625x17.46875]
"D"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (138.3125,71.5) content-size 9.09375x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (138.3125,57.96875) content-size 9.09375x17.46875 table-cell [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [138.453125,71.5 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [138.453125,57.96875 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,99.46875) content-size 158.90625x38.46875 table-row children: not-inline
Box <tr> at (9,85.9375) content-size 158.90625x38.46875 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (29.5,109.96875) content-size 14.265625x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (29.5,96.4375) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 11.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [30.703125,109.96875 11.859375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [30.703125,96.4375 11.859375x17.46875]
"E"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (84.765625,109.96875) content-size 12.546875x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (84.765625,96.4375) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 12.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [84.765625,109.96875 12.546875x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [84.765625,96.4375 12.546875x17.46875]
"F"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (138.3125,109.96875) content-size 9.09375x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (138.3125,96.4375) content-size 9.09375x17.46875 table-cell [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [138.3125,109.96875 9.09375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [138.3125,96.4375 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,137.9375) content-size 158.90625x38.46875 table-row children: not-inline
Box <tr> at (9,124.40625) content-size 158.90625x38.46875 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (29.5,148.4375) content-size 14.265625x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (29.5,134.90625) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 13.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [30.015625,148.4375 13.234375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [30.015625,134.90625 13.234375x17.46875]
"G"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (84.765625,148.4375) content-size 12.546875x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (84.765625,134.90625) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 12.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [84.921875,148.4375 12.234375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [84.921875,134.90625 12.234375x17.46875]
"H"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (138.3125,148.4375) content-size 9.09375x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (138.3125,134.90625) content-size 9.09375x17.46875 table-cell [BFC] children: inline
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [138.984375,148.4375 7.75x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [138.984375,134.90625 7.75x17.46875]
"4"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,176.40625) content-size 158.90625x38.46875 table-row children: not-inline
Box <tr> at (9,162.875) content-size 158.90625x38.46875 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (29.5,186.90625) content-size 14.265625x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (29.5,173.375) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 4.59375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [34.328125,186.90625 4.59375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [34.328125,173.375 4.59375x17.46875]
"I"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (84.765625,186.90625) content-size 12.546875x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (84.765625,173.375) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 8.90625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [86.578125,186.90625 8.90625x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [86.578125,173.375 8.90625x17.46875]
"J"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (138.3125,186.90625) content-size 9.09375x17.46875 table-cell [BFC] children: inline
BlockContainer <td> at (138.3125,173.375) content-size 9.09375x17.46875 table-cell [BFC] children: inline
line 0 width: 8.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [138.625,186.90625 8.453125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [138.625,173.375 8.453125x17.46875]
"5"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (9,22.53125) content-size 0x0 children: inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (8,215.875) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,202.34375) content-size 784x0 children: inline
TextNode <#text>

2
Tests/LibWeb/Layout/expected/table/inline-table-width.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x46.9375 children: inline
line 0 width: 137.984375, height: 46.9375, bottom: 46.9375, baseline: 39
line 0 width: 137.984375, height: 46.9375, bottom: 46.9375, baseline: 46.9375
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 135.984375x44.9375]
BlockContainer <table> at (9,9) content-size 135.984375x44.9375 inline-block [BFC] children: not-inline
TableWrapper <(anonymous)> at (9,9) content-size 135.984375x44.9375 inline-block [BFC] children: not-inline

12
Tests/LibWeb/Layout/input/flex/box-baseline-with-inline-flex-empty-child.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html><style>
* { border: 1px solid black; }
.first {
background-color: aqua;
}
.second {
display: inline-flex;
padding: 10px;
background-color: violet;
}
</style>
<div class="first"><span class="second"> <!-- bar -->

11
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -1700,8 +1700,8 @@ Box const* FormattingContext::box_child_to_derive_baseline_from(Box const& box)
continue;
return &child_box;
}
// If none of the children has a line box, the baseline is formed by the last in-flow child.
return last_box_child;
// None of the children has a line box.
return nullptr;
}
CSSPixels FormattingContext::box_baseline(Box const& box) const
@ -1732,9 +1732,10 @@ CSSPixels FormattingContext::box_baseline(Box const& box) const
if (!box_state.line_boxes.is_empty())
return box_state.margin_box_top() + box_state.offset.y() + box_state.line_boxes.last().baseline();
if (box.has_children() && !box.children_are_inline()) {
auto const* child_box = box_child_to_derive_baseline_from(box);
VERIFY(child_box);
return box_baseline(*child_box);
// If none of the children have a baseline set, the bottom margin edge of the box is used.
if (auto const* child_box = box_child_to_derive_baseline_from(box)) {
return box_baseline(*child_box);
}
}
return box_state.margin_box_height();
}