RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 01:17:34 +00:00
Code Issues Activity Actions

LibWeb: Improve support for 'vertical-align: middle'

Browse source 
This rebaselines a few table-related layout tests since our default
stylesheet applies 'vertical-align: middle' to a few table-related
elements.
This commit is contained in:
implicitfield 2024-02-28 19:45:25 +04:00 • committed by Tim Flynn
parent 41e0a0f0aa
commit b08fd1b9ae
7 changed files with 55 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt
View file

@ -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 BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <div.horizontal> at (8,8) content-size 784x197 children: inline BlockContainer <div.horizontal> 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> TextNode <#text>
BlockContainer <table> at (9,9) content-size 161.90625x195 inline-block [BFC] children: not-inline BlockContainer <table> at (9,9) content-size 161.90625x195 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 161.90625x0 children: inline BlockContainer <(anonymous)> at (9,9) content-size 161.90625x0 children: inline

2
Tests/LibWeb/Layout/expected/table/inline-table-width.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x46 children: inline BlockContainer <body> 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 <table> at (9,9) content-size 135.984375x44 inline-block [BFC] children: not-inline BlockContainer <table> 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 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 Box <(anonymous)> at (9,9) content-size 135.984375x44 inline-table table-box [TFC] children: not-inline

15
Tests/LibWeb/Layout/expected/table/nested-table-box-width.txt
View file

@ -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 frag 0 from TextNode start: 0, length: 1, rect: [75.5625,81 9.34375x17] baseline: 13.296875
"B" "B"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (58.5625,115) content-size 48.265625x0 children: inline BlockContainer <(anonymous)> at (58.5625,115) content-size 48.265625x0 children: inline
TextNode <#text> TextNode <#text>
@ -91,17 +91,14 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<TD>) [48.5625,15 68.265625x110] PaintableWithLines (BlockContainer<TD>) [48.5625,15 68.265625x110]
PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 48.265625x0] PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 48.265625x0]
PaintableWithLines (TableWrapper(anonymous)) [58.5625,25 48.265625x90] PaintableWithLines (TableWrapper(anonymous)) [58.5625,25 48.265625x90]
PaintableBox (Box<TABLE>) [58.5625,25 48.265625x90] overflow: [58.5625,25 43.265625x85] PaintableBox (Box<TABLE>) [58.5625,25 48.265625x90]
PaintableBox (Box<TBODY>) [63.5625,30 34.265625x74] overflow: [58.5625,25 41.265625x83] PaintableBox (Box<TBODY>) [63.5625,30 34.265625x74] overflow: [63.5625,30 36.265625x78]
PaintableBox (Box<TR>) [65.5625,32 34.265625x37] PaintableBox (Box<TR>) [65.5625,32 34.265625x37]
PaintableWithLines (BlockContainer<TD>) [65.5625,32 34.265625x37] PaintableWithLines (BlockContainer<TD>) [65.5625,32 34.265625x37]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [65.5625,71 34.265625x37] overflow: [58.5625,25 41.265625x83] PaintableBox (Box<TR>) [65.5625,71 34.265625x37]
PaintableWithLines (BlockContainer<TD>) [65.5625,71 34.265625x37] PaintableWithLines (BlockContainer<TD>) [65.5625,71 34.265625x37]
TextPaintable (TextNode<#text>) 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] PaintableWithLines (BlockContainer(anonymous)) [58.5625,115 48.265625x0]
PaintableBox (Box<TR>) [15,71 99.828125x54] PaintableBox (Box<TR>) [15,71 99.828125x54]
PaintableWithLines (BlockContainer<TD>) [15,71 31.5625x54] PaintableWithLines (BlockContainer<TD>) [15,71 31.5625x54]

15
Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt
View file

@ -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 frag 0 from TextNode start: 0, length: 1, rect: [51.5625,88 10.3125x17] baseline: 13.296875
"C" "C"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (42.5625,114) content-size 32.265625x0 children: inline BlockContainer <(anonymous)> at (42.5625,114) content-size 32.265625x0 children: inline
TextNode <#text> TextNode <#text>
@ -102,20 +102,17 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<TD>) [36.5625,11 44.265625x109] PaintableWithLines (BlockContainer<TD>) [36.5625,11 44.265625x109]
PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 32.265625x0] PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 32.265625x0]
PaintableWithLines (TableWrapper(anonymous)) [42.5625,17 32.265625x97] PaintableWithLines (TableWrapper(anonymous)) [42.5625,17 32.265625x97]
PaintableBox (Box<TABLE>) [42.5625,17 32.265625x97] overflow: [42.5625,17 31.265625x96] PaintableBox (Box<TABLE>) [42.5625,17 32.265625x97]
PaintableBox (Box<TBODY>) [43.5625,18 26.265625x87] overflow: [42.5625,17 29.265625x94] PaintableBox (Box<TBODY>) [43.5625,18 26.265625x87] overflow: [43.5625,18 28.265625x93]
PaintableBox (Box<TR>) [45.5625,20 26.265625x29] PaintableBox (Box<TR>) [45.5625,20 26.265625x29]
PaintableWithLines (BlockContainer<TD>) [45.5625,20 26.265625x29] PaintableWithLines (BlockContainer<TD>) [45.5625,20 26.265625x29]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [45.5625,51 26.265625x29] PaintableBox (Box<TR>) [45.5625,51 26.265625x29]
PaintableWithLines (BlockContainer<TD>) [45.5625,51 26.265625x29] PaintableWithLines (BlockContainer<TD>) [45.5625,51 26.265625x29]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [45.5625,82 26.265625x29] overflow: [42.5625,17 29.265625x94] PaintableBox (Box<TR>) [45.5625,82 26.265625x29]
PaintableWithLines (BlockContainer<TD>) [45.5625,82 26.265625x29] PaintableWithLines (BlockContainer<TD>) [45.5625,82 26.265625x29]
TextPaintable (TextNode<#text>) 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] PaintableWithLines (BlockContainer(anonymous)) [42.5625,114 32.265625x0]
PaintableBox (Box<TR>) [11,66.5 67.828125x53.5] PaintableBox (Box<TR>) [11,66.5 67.828125x53.5]
PaintableWithLines (BlockContainer<TD>) [11,66.5 23.5625x53.5] PaintableWithLines (BlockContainer<TD>) [11,66.5 23.5625x53.5]

21
Tests/LibWeb/Layout/expected/vertical-align-middle.txt Normal file
View file

@ -0,0 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x50 children: inline
TextNode <#text>
InlineNode <a>
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 <div.test> at (49,8) content-size 50x50 inline-block [BFC] children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x66]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x50]
InlinePaintable (InlineNode<A>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.test) [49,8 50x50]

17
Tests/LibWeb/Layout/input/vertical-align-middle.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<style>
.test {
height: 50px;
width: 50px;
background-color: red;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<a>inline<div class="test"></div></a>
</body>
</html>

3
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -1736,6 +1736,9 @@ CSSPixels FormattingContext::box_baseline(Box const& box) const
case CSS::VerticalAlign::Top: case CSS::VerticalAlign::Top:
// Top: Align the top of the aligned subtree with the top of the line box. // Top: Align the top of the aligned subtree with the top of the line box.
return box_state.border_box_top(); 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: case CSS::VerticalAlign::Bottom:
// Bottom: Align the bottom of the aligned subtree with the bottom of the line box. // 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(); return box_state.content_height() + box_state.margin_box_top();