diff --git a/Tests/LibWeb/Layout/expected/table/acid2-reduction.txt b/Tests/LibWeb/Layout/expected/table/acid2-reduction.txt new file mode 100644 index 00000000000..acec1964ca6 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/table/acid2-reduction.txt @@ -0,0 +1,21 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x66 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x50 children: not-inline + TableWrapper <(anonymous)> at (8,8) content-size 100x50 [BFC] children: not-inline + Box 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 at (8,8) content-size 50x50 table-box [TFC] children: not-inline + BlockContainer at (58,58) content-size 50x0 table-cell [BFC] children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x66] + PaintableWithLines (BlockContainer) [8,8 784x50] + PaintableWithLines (TableWrapper(anonymous)) [8,8 100x50] + PaintableBox (Box
.table) [8,8 100x50] + PaintableBox (Box(anonymous)) [8,8 100x50] + PaintableWithLines (BlockContainer(anonymous)) [8,8 50x50] + PaintableWithLines (TableWrapper(anonymous)) [8,8 50x50] + PaintableBox (Box
.second-part) [8,8 50x50] + PaintableWithLines (BlockContainer
.third-part) [58,8 50x50] diff --git a/Tests/LibWeb/Layout/expected/table/vertical-align-baseline.txt b/Tests/LibWeb/Layout/expected/table/vertical-align-baseline.txt new file mode 100644 index 00000000000..84cef8a7a02 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/table/vertical-align-baseline.txt @@ -0,0 +1,50 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x114 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x98 children: not-inline + TableWrapper <(anonymous)> at (8,8) content-size 615.53125x98 [BFC] children: not-inline + Box at (9,9) content-size 613.53125x96 table-box [TFC] children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + Box at (9,9) content-size 613.53125x96 table-row-group children: not-inline + Box at (9,9) content-size 613.53125x48 table-row children: not-inline + BlockContainer at (9,57) content-size 613.53125x48 table-row children: not-inline + BlockContainer
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 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
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 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) [0,0 800x114] + PaintableWithLines (BlockContainer) [8,8 784x98] + PaintableWithLines (TableWrapper(anonymous)) [8,8 615.53125x98] + PaintableBox (Box) [8,8 615.53125x98] + PaintableBox (Box) [9,9 613.53125x96] + PaintableBox (Box) [9,9 613.53125x48] + PaintableWithLines (BlockContainer) [9,57 613.53125x48] + PaintableWithLines (BlockContainer
) [9,9 353.84375x48] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer.small-text) [362.84375,9 259.6875x48] + TextPaintable (TextNode<#text>) + PaintableBox (Box
) [9,57 353.84375x48] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer) [362.84375,57 259.6875x48] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,106 784x0] diff --git a/Tests/LibWeb/Layout/input/table/acid2-reduction.html b/Tests/LibWeb/Layout/input/table/acid2-reduction.html new file mode 100644 index 00000000000..b667df7eea1 --- /dev/null +++ b/Tests/LibWeb/Layout/input/table/acid2-reduction.html @@ -0,0 +1,17 @@ +
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/table/vertical-align-baseline.html b/Tests/LibWeb/Layout/input/table/vertical-align-baseline.html new file mode 100644 index 00000000000..e03a22c6dcb --- /dev/null +++ b/Tests/LibWeb/Layout/input/table/vertical-align-baseline.html @@ -0,0 +1,20 @@ + + + + + +
Text baselineSmaller text
Another baselineRegular text
diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp index a11070c57dc..1bed19238c6 100644 --- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp @@ -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()) { - auto height_diff = row_content_height - cell_border_box_height; switch (vertical_align.get()) { 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: {