mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-11 12:06:07 +00:00
LibWeb: Actually, don't align all inline content to alphabetic baseline
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
Andreas Kling
parent
7d4d7da28a
commit
47f5da7523
Notes:
github-actions[bot]
2025-02-25 22:56:46 +00:00
Author: https://github.com/awesomekling
Commit: 47f5da7523
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3696
5 changed files with 112 additions and 4 deletions
|
|
@ -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;
|
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) {
|
switch (vertical_align) {
|
||||||
case CSS::VerticalAlign::Baseline:
|
case CSS::VerticalAlign::Baseline:
|
||||||
return alphabetic_baseline;
|
return alphabetic_baseline;
|
||||||
|
|
|
||||||
|
|
@ -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]
|
||||||
|
|
@ -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>)
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
Loading…
Add table
Add a link
Reference in a new issue