From b08fd1b9ae5ce6446fa33fd7eb2b4ddbde3b55b6 Mon Sep 17 00:00:00 2001 From: implicitfield <114500360+implicitfield@users.noreply.github.com> Date: Wed, 28 Feb 2024 19:45:25 +0400 Subject: [PATCH] LibWeb: Improve support for 'vertical-align: middle' This rebaselines a few table-related layout tests since our default stylesheet applies 'vertical-align: middle' to a few table-related elements. --- .../table/border-collapse-is-inherited.txt | 2 +- .../expected/table/inline-table-width.txt | 2 +- .../expected/table/nested-table-box-width.txt | 15 ++++++------- .../table/row-span-and-nested-tables.txt | 15 ++++++------- .../Layout/expected/vertical-align-middle.txt | 21 +++++++++++++++++++ .../Layout/input/vertical-align-middle.html | 17 +++++++++++++++ .../LibWeb/Layout/FormattingContext.cpp | 3 +++ 7 files changed, 55 insertions(+), 20 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/vertical-align-middle.txt create mode 100644 Tests/LibWeb/Layout/input/vertical-align-middle.html diff --git a/Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt b/Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt index 48250d0a08..394f679dfd 100644 --- a/Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt +++ b/Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt @@ -6,7 +6,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline TextNode <#text> BlockContainer at (8,8) content-size 784x197 children: inline - frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 161.90625x195] baseline: 191.296875 + frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 161.90625x195] baseline: 12.796875 TextNode <#text> BlockContainer at (9,9) content-size 161.90625x195 inline-block [BFC] children: not-inline BlockContainer <(anonymous)> at (9,9) content-size 161.90625x0 children: inline diff --git a/Tests/LibWeb/Layout/expected/table/inline-table-width.txt b/Tests/LibWeb/Layout/expected/table/inline-table-width.txt index 3ac39f5f54..73f8d6595f 100644 --- a/Tests/LibWeb/Layout/expected/table/inline-table-width.txt +++ b/Tests/LibWeb/Layout/expected/table/inline-table-width.txt @@ -1,7 +1,7 @@ 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 784x46 children: inline - frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 135.984375x44] baseline: 38.296875 + frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 135.984375x44] baseline: 12.796875 BlockContainer
at (9,9) content-size 135.984375x44 inline-block [BFC] children: not-inline TableWrapper <(anonymous)> at (9,9) content-size 135.984375x44 inline-block [BFC] children: not-inline Box <(anonymous)> at (9,9) content-size 135.984375x44 inline-table table-box [TFC] children: not-inline diff --git a/Tests/LibWeb/Layout/expected/table/nested-table-box-width.txt b/Tests/LibWeb/Layout/expected/table/nested-table-box-width.txt index de39de8402..c7655e3e63 100644 --- a/Tests/LibWeb/Layout/expected/table/nested-table-box-width.txt +++ b/Tests/LibWeb/Layout/expected/table/nested-table-box-width.txt @@ -49,11 +49,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 1, rect: [75.5625,81 9.34375x17] baseline: 13.296875 "B" TextNode <#text> - BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline + BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline + BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline + BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> BlockContainer <(anonymous)> at (58.5625,115) content-size 48.265625x0 children: inline TextNode <#text> @@ -91,17 +91,14 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] PaintableWithLines (BlockContainer
) [48.5625,15 68.265625x110] PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 48.265625x0] PaintableWithLines (TableWrapper(anonymous)) [58.5625,25 48.265625x90] - PaintableBox (Box) [58.5625,25 48.265625x90] overflow: [58.5625,25 43.265625x85] - PaintableBox (Box) [63.5625,30 34.265625x74] overflow: [58.5625,25 41.265625x83] + PaintableBox (Box
) [58.5625,25 48.265625x90] + PaintableBox (Box) [63.5625,30 34.265625x74] overflow: [63.5625,30 36.265625x78] PaintableBox (Box) [65.5625,32 34.265625x37] PaintableWithLines (BlockContainer) [65.5625,71 34.265625x37] overflow: [58.5625,25 41.265625x83] + PaintableBox (Box) [65.5625,71 34.265625x37] PaintableWithLines (BlockContainer) [15,71 99.828125x54] PaintableWithLines (BlockContainer
) [65.5625,32 34.265625x37] TextPaintable (TextNode<#text>) - PaintableBox (Box
) [65.5625,71 34.265625x37] TextPaintable (TextNode<#text>) - PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 0x0] - PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 0x0] - PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 0x0] PaintableWithLines (BlockContainer(anonymous)) [58.5625,115 48.265625x0] PaintableBox (Box
) [15,71 31.5625x54] diff --git a/Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt b/Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt index fe2dcda2fc..d5356e60df 100644 --- a/Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt +++ b/Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt @@ -60,11 +60,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 1, rect: [51.5625,88 10.3125x17] baseline: 13.296875 "C" TextNode <#text> - BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline + BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline + BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline + BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> BlockContainer <(anonymous)> at (42.5625,114) content-size 32.265625x0 children: inline TextNode <#text> @@ -102,20 +102,17 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] PaintableWithLines (BlockContainer) [36.5625,11 44.265625x109] PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 32.265625x0] PaintableWithLines (TableWrapper(anonymous)) [42.5625,17 32.265625x97] - PaintableBox (Box) [42.5625,17 32.265625x97] overflow: [42.5625,17 31.265625x96] - PaintableBox (Box) [43.5625,18 26.265625x87] overflow: [42.5625,17 29.265625x94] + PaintableBox (Box
) [42.5625,17 32.265625x97] + PaintableBox (Box) [43.5625,18 26.265625x87] overflow: [43.5625,18 28.265625x93] PaintableBox (Box) [45.5625,20 26.265625x29] PaintableWithLines (BlockContainer) [45.5625,51 26.265625x29] PaintableWithLines (BlockContainer) [45.5625,82 26.265625x29] overflow: [42.5625,17 29.265625x94] + PaintableBox (Box) [45.5625,82 26.265625x29] PaintableWithLines (BlockContainer) [11,66.5 67.828125x53.5] PaintableWithLines (BlockContainer
) [45.5625,20 26.265625x29] TextPaintable (TextNode<#text>) PaintableBox (Box
) [45.5625,51 26.265625x29] TextPaintable (TextNode<#text>) - PaintableBox (Box
) [45.5625,82 26.265625x29] TextPaintable (TextNode<#text>) - PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 0x0] - PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 0x0] - PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 0x0] PaintableWithLines (BlockContainer(anonymous)) [42.5625,114 32.265625x0] PaintableBox (Box
) [11,66.5 23.5625x53.5] diff --git a/Tests/LibWeb/Layout/expected/vertical-align-middle.txt b/Tests/LibWeb/Layout/expected/vertical-align-middle.txt new file mode 100644 index 0000000000..0640f3c5ba --- /dev/null +++ b/Tests/LibWeb/Layout/expected/vertical-align-middle.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 <(anonymous)> at (0,0) content-size 800x0 children: inline + TextNode <#text> + BlockContainer at (8,8) content-size 784x50 children: inline + TextNode <#text> + InlineNode + frag 0 from TextNode start: 0, length: 6, rect: [8,24 41.296875x17] baseline: 13.296875 + "inline" + frag 1 from BlockContainer start: 0, length: 0, rect: [49,8 50x50] baseline: 29.296875 + TextNode <#text> + BlockContainer at (49,8) content-size 50x50 inline-block [BFC] children: not-inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x66] + PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0] + PaintableWithLines (BlockContainer) [8,8 784x50] + InlinePaintable (InlineNode) + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.test) [49,8 50x50] diff --git a/Tests/LibWeb/Layout/input/vertical-align-middle.html b/Tests/LibWeb/Layout/input/vertical-align-middle.html new file mode 100644 index 0000000000..4128f63411 --- /dev/null +++ b/Tests/LibWeb/Layout/input/vertical-align-middle.html @@ -0,0 +1,17 @@ + + + + + + + inline
 + + diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index f1e7835fe5..074f069dc8 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -1736,6 +1736,9 @@ CSSPixels FormattingContext::box_baseline(Box const& box) const case CSS::VerticalAlign::Top: // Top: Align the top of the aligned subtree with the top of the line box. return box_state.border_box_top(); + case CSS::VerticalAlign::Middle: + // Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. + return box_state.content_height() / 2 + CSSPixels::nearest_value_for(box.containing_block()->first_available_font().pixel_metrics().x_height / 2); case CSS::VerticalAlign::Bottom: // Bottom: Align the bottom of the aligned subtree with the bottom of the line box. return box_state.content_height() + box_state.margin_box_top();