mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-11 12:06:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Actually, don't align all inline content to alphabetic baseline

Browse source 
This essentially reverts 1b46a52cfc
and adds more tests.

The reverted change was an incorrect workaround for the real issue,
which was that we weren't creating anonymous wrapper boxes around inline
children of table-cell boxes.

Now that this has been fixed, we can go back to aligning text properly.
This commit is contained in:
Andreas Kling 2025-02-25 20:37:10 +01:00 • committed by Andreas Kling
commit 47f5da7523
Notes: github-actions[bot] 2025-02-25 22:56:46 +00:00
5 changed files with 112 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Libraries/LibWeb/Layout/LineBuilder.cpp
View file

@ -286,10 +286,6 @@ void LineBuilder::update_last_line()
auto alphabetic_baseline = m_current_block_offset + line_box_baseline - fragment.baseline() + effective_box_top_offset;
// NOTE: Plain inline text content is always on the alphabetic baseline.
if (!fragment.is_atomic_inline())
return alphabetic_baseline;
switch (vertical_align) {
case CSS::VerticalAlign::Baseline:
return alphabetic_baseline;

35
Tests/LibWeb/Layout/expected/table/vertical-align-middle-td-vs-div.txt Normal file
View file

@ -0,0 +1,35 @@
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 784x204 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 42.84375x104 [BFC] children: not-inline
Box <table> at (8,8) content-size 42.84375x104 table-box [TFC] children: not-inline
Box <tbody> at (10,10) content-size 38.84375x100 table-row-group children: not-inline
Box <tr> at (10,10) content-size 38.84375x100 table-row children: not-inline
BlockContainer <td> at (11,51.5) content-size 36.84375x17 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (11,51.5) content-size 36.84375x17 children: inline
frag 0 from TextNode start: 0, length: 5, rect: [11,51.5 36.84375x17] baseline: 13.296875
"hello"
TextNode <#text>
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div> at (8,112) content-size 784x100 children: inline
frag 0 from TextNode start: 0, length: 5, rect: [8,112 36.84375x17] baseline: 13.296875
"hello"
TextNode <#text>
BlockContainer <(anonymous)> at (8,212) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x204]
PaintableWithLines (TableWrapper(anonymous)) [8,8 42.84375x104]
PaintableBox (Box<TABLE>) [8,8 42.84375x104]
PaintableBox (Box<TBODY>) [10,10 38.84375x100]
PaintableBox (Box<TR>) [10,10 38.84375x100]
PaintableWithLines (BlockContainer<TD>) [10,10 38.84375x100]
PaintableWithLines (BlockContainer(anonymous)) [11,51.5 36.84375x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,112 784x0]
PaintableWithLines (BlockContainer<DIV>) [8,112 784x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,212 784x0]

31
Tests/LibWeb/Layout/expected/table/vertical-align-middle-vs-top.txt Normal file
View file

@ -0,0 +1,31 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x129 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x113 children: not-inline
BlockContainer <main> at (8,8) content-size 784x113 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 346.5x113 [BFC] children: not-inline
Box <table> at (8,8) content-size 346.5x113 table-box [TFC] children: not-inline
Box <tbody> at (10,10) content-size 342.5x109 table-row-group children: not-inline
Box <tr> at (10,10) content-size 342.5x109 table-row children: not-inline
BlockContainer <td> at (10,10) content-size 342.5x109 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (10,10) content-size 342.5x109 children: inline
frag 0 from TextNode start: 0, length: 3, rect: [10,10 169.734375x109] baseline: 84.484375
"foo"
TextNode <#text>
InlineNode <span>
frag 0 from TextNode start: 0, length: 3, rect: [179.734375,10 172.765625x109] baseline: 84.484375
"bar"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x129]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x113]
PaintableWithLines (BlockContainer<MAIN>) [8,8 784x113]
PaintableWithLines (TableWrapper(anonymous)) [8,8 346.5x113]
PaintableBox (Box<TABLE>) [8,8 346.5x113]
PaintableBox (Box<TBODY>) [10,10 342.5x109]
PaintableBox (Box<TR>) [10,10 342.5x109]
PaintableWithLines (BlockContainer<TD>) [10,10 342.5x109]
PaintableWithLines (BlockContainer(anonymous)) [10,10 342.5x109]
TextPaintable (TextNode<#text>)
PaintableWithLines (InlineNode<SPAN>)
TextPaintable (TextNode<#text>)

11
Tests/LibWeb/Layout/input/table/vertical-align-middle-td-vs-div.html Normal file
View file

@ -0,0 +1,11 @@
<style>
* {
outline: 1px solid black;
}
td, div {
height: 100px;
vertical-align: middle;
}
</style>
<table><tr><td>hello</td></tr></table>
<div>hello</div>

35
Tests/LibWeb/Layout/input/table/vertical-align-middle-vs-top.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html><style>
* {
outline: 1px solid black;
}
body {
font-family: monospace;
font-size: 100px;
}
.green {
color: green;
}
.red {
color: red;
}
table {
padding: 0;
margin: 0;
border: none;
}
tr {
padding: 0;
margin: 0;
border: none;
}
td {
padding: 0;
margin: 0;
border: none;
vertical-align: middle;
}
span {
vertical-align: top;
background: orange;
}
</style><body><main><table><tr><td>foo<span>bar