We use cookies to ensure you get the best experience on our website
Home Verkennen Help
Registreren Inloggen
0ct0pu5
/
ladybird
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

LibWeb: Fix height distribution in "vertical-align: baseline" in TFC

This line changes padding top to align cell content to baseline:
`cell.padding_top += m_rows[cell.row_index].baseline - cell.baseline`

Which means available for distribution height `height_diff` could have
changed so it needs to be refreshed before assigning the rest of it to
padding bottom:
`cell_state.padding_bottom += height_diff;`

Fixes https://github.com/SerenityOS/serenity/issues/22032
Aliaksandr Kalenik 1 jaar geleden
bovenliggende
eb2c05e906
commit
7b75d0c1f0
5 gewijzigde bestanden met toevoegingen van 113 en 6 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 21 0
      Tests/LibWeb/Layout/expected/table/acid2-reduction.txt
  2. 50 0
      Tests/LibWeb/Layout/expected/table/vertical-align-baseline.txt
  3. 17 0
      Tests/LibWeb/Layout/input/table/acid2-reduction.html
  4. 20 0
      Tests/LibWeb/Layout/input/table/vertical-align-baseline.html
  5. 5 6
      Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp

+ 21 - 0
Tests/LibWeb/Layout/expected/table/acid2-reduction.txt
Bestand weergeven 

@@ -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 <body> at (8,8) content-size 784x50 children: not-inline
 
+      TableWrapper <(anonymous)> at (8,8) content-size 100x50 [BFC] children: not-inline
 
+        Box <div.table> 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 <div.second-part> at (8,8) content-size 50x50 table-box [TFC] children: not-inline
 
+            BlockContainer <div.third-part> at (58,58) content-size 50x0 table-cell [BFC] children: not-inline
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x66]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x50]
 
+      PaintableWithLines (TableWrapper(anonymous)) [8,8 100x50]
 
+        PaintableBox (Box<DIV>.table) [8,8 100x50]
 
+          PaintableBox (Box(anonymous)) [8,8 100x50]
 
+            PaintableWithLines (BlockContainer(anonymous)) [8,8 50x50]
 
+              PaintableWithLines (TableWrapper(anonymous)) [8,8 50x50]
 
+                PaintableBox (Box<DIV>.second-part) [8,8 50x50]
 
+            PaintableWithLines (BlockContainer<DIV>.third-part) [58,8 50x50]

+ 50 - 0
Tests/LibWeb/Layout/expected/table/vertical-align-baseline.txt
Bestand weergeven 

@@ -0,0 +1,50 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x114 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x98 children: not-inline
 
+      TableWrapper <(anonymous)> at (8,8) content-size 615.53125x98 [BFC] children: not-inline
 
+        Box <table> at (9,9) content-size 613.53125x96 table-box [TFC] children: not-inline
 
+          BlockContainer <(anonymous)> (not painted) children: inline
 
+            TextNode <#text>
 
+          Box <tbody> at (9,9) content-size 613.53125x96 table-row-group children: not-inline
 
+            Box <tr> at (9,9) content-size 613.53125x48 table-row children: not-inline
 
+              BlockContainer <td> 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 <td.small-text> 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 <tr> at (9,57) content-size 613.53125x48 table-row children: not-inline
 
+              BlockContainer <td> 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 <td> 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<HTML>) [0,0 800x114]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x98]
 
+      PaintableWithLines (TableWrapper(anonymous)) [8,8 615.53125x98]
 
+        PaintableBox (Box<TABLE>) [8,8 615.53125x98]
 
+          PaintableBox (Box<TBODY>) [9,9 613.53125x96]
 
+            PaintableBox (Box<TR>) [9,9 613.53125x48]
 
+              PaintableWithLines (BlockContainer<TD>) [9,9 353.84375x48]
 
+                TextPaintable (TextNode<#text>)
 
+              PaintableWithLines (BlockContainer<TD>.small-text) [362.84375,9 259.6875x48]
 
+                TextPaintable (TextNode<#text>)
 
+            PaintableBox (Box<TR>) [9,57 613.53125x48]
 
+              PaintableWithLines (BlockContainer<TD>) [9,57 353.84375x48]
 
+                TextPaintable (TextNode<#text>)
 
+              PaintableWithLines (BlockContainer<TD>) [362.84375,57 259.6875x48]
 
+                TextPaintable (TextNode<#text>)
 
+      PaintableWithLines (BlockContainer(anonymous)) [8,106 784x0]

+ 17 - 0
Tests/LibWeb/Layout/input/table/acid2-reduction.html
Bestand weergeven 

@@ -0,0 +1,17 @@
 
+<!DOCTYPE html><style type="text/css">
 
+.table {
 
+    display: table;
 
+}
 
+.second-part {
 
+    display: table;
 
+    height: 50px;
 
+    width: 50px;
 
+    background: black;
 
+}
 
+.third-part {
 
+    display: table-cell;
 
+    height: 50px;
 
+    width: 50px;
 
+    background: black;
 
+}
 
+</style></head><div class="table"><div class="second-part"></div><div class="third-part"></div></div>

+ 20 - 0
Tests/LibWeb/Layout/input/table/vertical-align-baseline.html
Bestand weergeven 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<style>
 
+table, th, td {
 
+    border: 1px solid black;
 
+    border-collapse: collapse;
 
+}
 
+
 
+td {
 
+    vertical-align: baseline;
 
+    font-size: 40px;
 
+}
 
+
 
+.small-text {
 
+    font-size: 10px;
 
+}
 
+</style>
 
+<table>
 
+<tr><td>Text baseline</td><td class="small-text">Smaller text</td></tr>
 
+<tr><td>Another baseline</td><td>Regular text</td></tr>
 
+</table>

+ 5 - 6
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
Bestand weergeven 

@@ -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<CSS::VerticalAlign>()) {
 
-            auto height_diff = row_content_height - cell_border_box_height;
 
             switch (vertical_align.get<CSS::VerticalAlign>()) {
 
             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: {

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