diff --git a/Tests/LibWeb/Layout/expected/css-table-cell-verticalalign-text-top.txt b/Tests/LibWeb/Layout/expected/css-table-cell-verticalalign-text-top.txt new file mode 100644 index 00000000000..3c756b5b323 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/css-table-cell-verticalalign-text-top.txt @@ -0,0 +1,38 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x116 [BFC] children: not-inline + BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline + TextNode <#text> + BlockContainer at (8,8) content-size 784x100 children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline + TextNode <#text> + TableWrapper <(anonymous)> at (8,8) content-size 204x100 [BFC] children: not-inline + Box at (8,8) content-size 204x100 table-box [TFC] children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + Box at (8,8) content-size 204x100 table-row-group children: not-inline + Box at (8,8) content-size 204x100 table-row children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer
at (10,10) content-size 200x17 table-cell [BFC] children: inline + frag 0 from TextNode start: 0, length: 15, rect: [10,10 129.296875x17] baseline: 13.296875 + "Text at the top" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x116] + PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0] + PaintableWithLines (BlockContainer) [8,8 784x100] + PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0] + PaintableWithLines (TableWrapper(anonymous)) [8,8 204x100] + PaintableBox (Box) [8,8 204x100] + PaintableBox (Box) [8,8 204x100] + PaintableBox (Box) [8,8 204x100] + PaintableWithLines (BlockContainer
) [8,8 204x100] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,108 784x0] diff --git a/Tests/LibWeb/Layout/input/css-table-cell-verticalalign-text-top.html b/Tests/LibWeb/Layout/input/css-table-cell-verticalalign-text-top.html new file mode 100644 index 00000000000..693f7fbb7d7 --- /dev/null +++ b/Tests/LibWeb/Layout/input/css-table-cell-verticalalign-text-top.html @@ -0,0 +1,23 @@ + + + + + + + + + + +
Text at the top
+ + \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp index ceb8c414b5e..7a155f471d6 100644 --- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp @@ -1094,43 +1094,38 @@ void TableFormattingContext::position_cell_boxes() 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 + // https://drafts.csswg.org/css2/#height-layout + // In the context of tables, values for vertical-align have the following meanings: if (vertical_align.has()) { switch (vertical_align.get()) { + // The center of the cell is aligned with the center of the rows it spans. 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; } + // The top of the cell box is aligned with the top of the first row it spans. case CSS::VerticalAlign::Top: { cell_state.padding_bottom += row_content_height - cell_state.border_box_height(); break; } + // The bottom of the cell box is aligned with the bottom of the last row it spans. case CSS::VerticalAlign::Bottom: { cell_state.padding_top += row_content_height - cell_state.border_box_height(); break; } + // These values do not apply to cells; the cell is aligned at the baseline instead. + case CSS::VerticalAlign::Sub: + case CSS::VerticalAlign::Super: + case CSS::VerticalAlign::TextBottom: + case CSS::VerticalAlign::TextTop: + // The baseline of the cell is put at the same height as the baseline of the first of the rows it spans. case CSS::VerticalAlign::Baseline: { cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline; cell_state.padding_bottom += row_content_height - cell_state.border_box_height(); break; } - case CSS::VerticalAlign::Sub: { - dbgln("FIXME: Implement \"vertical-align: sub\" support for table cells"); - break; - } - case CSS::VerticalAlign::Super: { - dbgln("FIXME: Implement \"vertical-align: super\" support for table cells"); - break; - } - case CSS::VerticalAlign::TextBottom: { - dbgln("FIXME: Implement \"vertical-align: text-bottom\" support for table cells"); - break; - } - case CSS::VerticalAlign::TextTop: { - dbgln("FIXME: Implement \"vertical-align: text-top\" support for table cells"); - break; - } default: VERIFY_NOT_REACHED(); }