We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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.
implicitfield 1 year ago
parent
41e0a0f0aa
commit
b08fd1b9ae
7 changed files with 55 additions and 20 deletions
Split View Show Diff Stats
  1. 1 1
      Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt
  2. 1 1
      Tests/LibWeb/Layout/expected/table/inline-table-width.txt
  3. 6 9
      Tests/LibWeb/Layout/expected/table/nested-table-box-width.txt
  4. 6 9
      Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt
  5. 21 0
      Tests/LibWeb/Layout/expected/vertical-align-middle.txt
  6. 17 0
      Tests/LibWeb/Layout/input/vertical-align-middle.html
  7. 3 0
      Userland/Libraries/LibWeb/Layout/FormattingContext.cpp

+ 1 - 1
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
 
         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 - 1
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
 
   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

+ 6 - 9
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
 
                               "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]

+ 6 - 9
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
 
                               "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 - 0
Tests/LibWeb/Layout/expected/vertical-align-middle.txt
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 - 0
Tests/LibWeb/Layout/input/vertical-align-middle.html
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 - 0
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View File 

@@ -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();

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5