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.
This commit is contained in:
implicitfield
Tim Flynn
parent
41e0a0f0aa
commit
b08fd1b9ae
Notes:
sideshowbarker
2024-07-17 06:45:52 +09:00
Author: https://github.com/implicitfield Commit: https://github.com/SerenityOS/serenity/commit/b08fd1b9ae Pull-request: https://github.com/SerenityOS/serenity/pull/23388 Issue: https://github.com/SerenityOS/serenity/issues/23369
7 changed files with 55 additions and 20 deletions
|
|
@ -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 <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>
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 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
|
||||
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
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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<TD>) [48.5625,15 68.265625x110]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 48.265625x0]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [58.5625,25 48.265625x90]
|
||||
PaintableBox (Box<TABLE>) [58.5625,25 48.265625x90] overflow: [58.5625,25 43.265625x85]
|
||||
PaintableBox (Box<TBODY>) [63.5625,30 34.265625x74] overflow: [58.5625,25 41.265625x83]
|
||||
PaintableBox (Box<TABLE>) [58.5625,25 48.265625x90]
|
||||
PaintableBox (Box<TBODY>) [63.5625,30 34.265625x74] overflow: [63.5625,30 36.265625x78]
|
||||
PaintableBox (Box<TR>) [65.5625,32 34.265625x37]
|
||||
PaintableWithLines (BlockContainer<TD>) [65.5625,32 34.265625x37]
|
||||
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]
|
||||
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<TR>) [15,71 99.828125x54]
|
||||
PaintableWithLines (BlockContainer<TD>) [15,71 31.5625x54]
|
||||
|
|
|
|||
|
|
@ -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<TD>) [36.5625,11 44.265625x109]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 32.265625x0]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [42.5625,17 32.265625x97]
|
||||
PaintableBox (Box<TABLE>) [42.5625,17 32.265625x97] overflow: [42.5625,17 31.265625x96]
|
||||
PaintableBox (Box<TBODY>) [43.5625,18 26.265625x87] overflow: [42.5625,17 29.265625x94]
|
||||
PaintableBox (Box<TABLE>) [42.5625,17 32.265625x97]
|
||||
PaintableBox (Box<TBODY>) [43.5625,18 26.265625x87] overflow: [43.5625,18 28.265625x93]
|
||||
PaintableBox (Box<TR>) [45.5625,20 26.265625x29]
|
||||
PaintableWithLines (BlockContainer<TD>) [45.5625,20 26.265625x29]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableBox (Box<TR>) [45.5625,51 26.265625x29]
|
||||
PaintableWithLines (BlockContainer<TD>) [45.5625,51 26.265625x29]
|
||||
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]
|
||||
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<TR>) [11,66.5 67.828125x53.5]
|
||||
PaintableWithLines (BlockContainer<TD>) [11,66.5 23.5625x53.5]
|
||||
|
|
|
|||
21
Tests/LibWeb/Layout/expected/vertical-align-middle.txt
Normal file
21
Tests/LibWeb/Layout/expected/vertical-align-middle.txt
Normal 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
17
Tests/LibWeb/Layout/input/vertical-align-middle.html
Normal 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>
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue