mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-31 21:29:06 +00:00
LibWeb: Fix height distribution in "vertical-align: baseline" in TFC
This line changes padding top to align cell content to baseline: `cell.padding_top += m_rows[cell.row_index].baseline - cell.baseline` Which means available for distribution height `height_diff` could have changed so it needs to be refreshed before assigning the rest of it to padding bottom: `cell_state.padding_bottom += height_diff;` Fixes https://github.com/SerenityOS/serenity/issues/22032
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
eb2c05e906
commit
7b75d0c1f0
Notes:
sideshowbarker
2024-07-17 07:43:44 +09:00
Author: https://github.com/kalenikaliaksandr
Commit: 7b75d0c1f0
Pull-request: https://github.com/SerenityOS/serenity/pull/24022
Issue: https://github.com/SerenityOS/serenity/issues/22032
5 changed files with 113 additions and 6 deletions
21
Tests/LibWeb/Layout/expected/table/acid2-reduction.txt
Normal file
21
Tests/LibWeb/Layout/expected/table/acid2-reduction.txt
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 100x50 [BFC] children: not-inline
|
||||
Box <div.table> at (8,8) content-size 100x50 table-box [TFC] children: not-inline
|
||||
Box <(anonymous)> at (8,8) content-size 100x50 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 50x50 table-cell [BFC] children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 50x50 [BFC] children: not-inline
|
||||
Box <div.second-part> at (8,8) content-size 50x50 table-box [TFC] children: not-inline
|
||||
BlockContainer <div.third-part> at (58,58) content-size 50x0 table-cell [BFC] children: not-inline
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x66]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x50]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 100x50]
|
||||
PaintableBox (Box<DIV>.table) [8,8 100x50]
|
||||
PaintableBox (Box(anonymous)) [8,8 100x50]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 50x50]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 50x50]
|
||||
PaintableBox (Box<DIV>.second-part) [8,8 50x50]
|
||||
PaintableWithLines (BlockContainer<DIV>.third-part) [58,8 50x50]
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x114 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x98 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 615.53125x98 [BFC] children: not-inline
|
||||
Box <table> at (9,9) content-size 613.53125x96 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tbody> at (9,9) content-size 613.53125x96 table-row-group children: not-inline
|
||||
Box <tr> at (9,9) content-size 613.53125x48 table-row children: not-inline
|
||||
BlockContainer <td> at (11,11) content-size 349.84375x44 table-cell [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 13, rect: [11,11 273.9375x44] baseline: 34
|
||||
"Text baseline"
|
||||
TextNode <#text>
|
||||
BlockContainer <td.small-text> at (364.84375,36.5) content-size 255.6875x11 table-cell [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 12, rect: [364.84375,36.5 62.296875x11] baseline: 8.5
|
||||
"Smaller text"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tr> at (9,57) content-size 613.53125x48 table-row children: not-inline
|
||||
BlockContainer <td> at (11,59) content-size 349.84375x44 table-cell [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 16, rect: [11,59 349.84375x44] baseline: 34
|
||||
"Another baseline"
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (364.84375,59) content-size 255.6875x44 table-cell [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 12, rect: [364.84375,59 255.6875x44] baseline: 34
|
||||
"Regular text"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,106) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x114]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x98]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 615.53125x98]
|
||||
PaintableBox (Box<TABLE>) [8,8 615.53125x98]
|
||||
PaintableBox (Box<TBODY>) [9,9 613.53125x96]
|
||||
PaintableBox (Box<TR>) [9,9 613.53125x48]
|
||||
PaintableWithLines (BlockContainer<TD>) [9,9 353.84375x48]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>.small-text) [362.84375,9 259.6875x48]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableBox (Box<TR>) [9,57 613.53125x48]
|
||||
PaintableWithLines (BlockContainer<TD>) [9,57 353.84375x48]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>) [362.84375,57 259.6875x48]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,106 784x0]
|
||||
17
Tests/LibWeb/Layout/input/table/acid2-reduction.html
Normal file
17
Tests/LibWeb/Layout/input/table/acid2-reduction.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html><style type="text/css">
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
.second-part {
|
||||
display: table;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: black;
|
||||
}
|
||||
.third-part {
|
||||
display: table-cell;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: black;
|
||||
}
|
||||
</style></head><div class="table"><div class="second-part"></div><div class="third-part"></div></div>
|
||||
20
Tests/LibWeb/Layout/input/table/vertical-align-baseline.html
Normal file
20
Tests/LibWeb/Layout/input/table/vertical-align-baseline.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: baseline;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr><td>Text baseline</td><td class="small-text">Smaller text</td></tr>
|
||||
<tr><td>Another baseline</td><td>Regular text</td></tr>
|
||||
</table>
|
||||
|
|
@ -1080,30 +1080,29 @@ void TableFormattingContext::position_cell_boxes()
|
|||
for (auto& cell : m_cells) {
|
||||
auto& cell_state = m_state.get_mutable(cell.box);
|
||||
auto& row_state = m_state.get(m_rows[cell.row_index].box);
|
||||
CSSPixels const cell_border_box_height = cell_state.content_height() + cell_state.border_box_top() + cell_state.border_box_bottom();
|
||||
CSSPixels const row_content_height = compute_row_content_height(cell);
|
||||
auto const row_content_height = compute_row_content_height(cell);
|
||||
auto const& vertical_align = cell.box->computed_values().vertical_align();
|
||||
// The following image shows various alignment lines of a row:
|
||||
// https://www.w3.org/TR/css-tables-3/images/cell-align-explainer.png
|
||||
if (vertical_align.has<CSS::VerticalAlign>()) {
|
||||
auto height_diff = row_content_height - cell_border_box_height;
|
||||
switch (vertical_align.get<CSS::VerticalAlign>()) {
|
||||
case CSS::VerticalAlign::Middle: {
|
||||
auto const height_diff = row_content_height - cell_state.border_box_height();
|
||||
cell_state.padding_top += height_diff / 2;
|
||||
cell_state.padding_bottom += height_diff / 2;
|
||||
break;
|
||||
}
|
||||
case CSS::VerticalAlign::Top: {
|
||||
cell_state.padding_bottom += height_diff;
|
||||
cell_state.padding_bottom += row_content_height - cell_state.border_box_height();
|
||||
break;
|
||||
}
|
||||
case CSS::VerticalAlign::Bottom: {
|
||||
cell_state.padding_top += height_diff;
|
||||
cell_state.padding_top += row_content_height - cell_state.border_box_height();
|
||||
break;
|
||||
}
|
||||
case CSS::VerticalAlign::Baseline: {
|
||||
cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline;
|
||||
cell_state.padding_bottom += height_diff;
|
||||
cell_state.padding_bottom += row_content_height - cell_state.border_box_height();
|
||||
break;
|
||||
}
|
||||
case CSS::VerticalAlign::Sub: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue