0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Implement top and bottom vertical-align for table cells

Browse source
This commit is contained in:
Andi Gallo 2023-06-22 02:20:41 +00:00 • committed by Andreas Kling
parent 4ed7456486
commit caa24d0805
Notes: sideshowbarker 2024-07-17 08:35:21 +09:00
3 changed files with 82 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
Tests/LibWeb/Layout/expected/table/align-top-and-bottom.txt Normal file
View file

@ -0,0 +1,46 @@
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 784x100.9375 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 196.328125x100.9375 [BFC] children: not-inline
Box <table> at (9,9) content-size 196.328125x98.9375 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tbody> at (9,9) content-size 198.328125x98.9375 table-row-group children: not-inline
Box <tr> at (9,9) content-size 198.328125x49.46875 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (25,25) content-size 32.078125x17.46875 table-cell [BFC] children: inline
line 0 width: 32.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [25,25 32.078125x17.46875]
"Top"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (89.078125,74.46875) content-size 55.984375x17.46875 table-cell [BFC] children: inline
line 0 width: 55.984375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [89.078125,74.46875 55.984375x17.46875]
"Bottom"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (177.0625,25) 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: [177.0625,25 14.265625x17.46875]
"A"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,58.46875) content-size 198.328125x49.46875 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (177.0625,74.46875) content-size 14.265625x17.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: [177.0625,74.46875 9.34375x17.46875]
"B"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>

22
Tests/LibWeb/Layout/input/table/align-top-and-bottom.html Normal file
View file

@ -0,0 +1,22 @@
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 15px;
}
</style>
<table>
<tr>
<td rowspan="2" style="vertical-align: top;">Top</td>
<td rowspan="2" style="vertical-align: bottom;">Bottom</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>

20
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
View file

@ -764,19 +764,27 @@ void TableFormattingContext::position_cell_boxes()
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& 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: {
cell_state.padding_top += (row_content_height - cell_border_box_height) / 2;
cell_state.padding_bottom += (row_content_height - cell_border_box_height) / 2;
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;
break;
}
case CSS::VerticalAlign::Bottom: {
cell_state.padding_top += height_diff;
break;
}
// FIXME: implement actual 'top' and 'bottom' support instead of fall back to 'baseline'
case CSS::VerticalAlign::Top:
case CSS::VerticalAlign::Bottom:
case CSS::VerticalAlign::Baseline: {
cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline;
cell_state.padding_bottom += row_content_height - cell_border_box_height;
cell_state.padding_bottom += height_diff;
break;
}
default: