diff --git a/Tests/LibWeb/Layout/expected/table/align-top-and-bottom.txt b/Tests/LibWeb/Layout/expected/table/align-top-and-bottom.txt new file mode 100644 index 0000000000..e3a66ad4b9 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/table/align-top-and-bottom.txt @@ -0,0 +1,46 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer 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 at (9,9) content-size 196.328125x98.9375 table-box [TFC] children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + Box at (9,9) content-size 198.328125x98.9375 table-row-group children: not-inline + Box at (9,9) content-size 198.328125x49.46875 table-row children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer at (9,58.46875) content-size 198.328125x49.46875 table-row children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer
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 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 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
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> diff --git a/Tests/LibWeb/Layout/input/table/align-top-and-bottom.html b/Tests/LibWeb/Layout/input/table/align-top-and-bottom.html new file mode 100644 index 0000000000..03b6415800 --- /dev/null +++ b/Tests/LibWeb/Layout/input/table/align-top-and-bottom.html @@ -0,0 +1,22 @@ + + + + + + + + + + + +
TopBottomA
B
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp index 6542341289..61f7e1398e 100644 --- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp @@ -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()) { + auto height_diff = row_content_height - cell_border_box_height; switch (vertical_align.get()) { 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: