LibWeb: Resolve percentage cell widths properly in fixed layout tables

In fixed table layouts, cell percentage widths were incorrectly being
resolved against the containing block of the table wrapper (the page)
instead of the table's computed width. This caused cells with percentage
widths to evaluate to incorrect absolute dimensions and throw off the
table column distribution logic.

This commit properly queries the table's computed width first
and uses that as the reference width when resolving percentage widths in
TableFormattingContext::compute_cell_measures(), ensuring that the
math adheres to the CSS Tables Level 3 Specification. Test baselines
have been updated to match the correct output.

Author: Darshanx256

Libraries/LibWeb/Layout/TableFormattingContext.cpp

@@ -180,7 +180,20 @@ void TableFormattingContext::compute_cell_measures()
         // in which case they are resolved based on the table width (if it is definite, otherwise use 0).
         auto width_is_specified_length_or_percentage = computed_values.width().is_length() || computed_values.width().is_percentage();
         if (use_fixed_mode_layout()) {
-            min_content_width = max_content_width = width_is_specified_length_or_percentage ? computed_values.width().to_px(cell.box, containing_block_width) : 0;
+            CSSPixels reference_width = 0;
+            if (width_is_specified_length_or_percentage) {
+                if (computed_values.width().is_percentage()) {
+                    auto table_width = table_box().computed_values().width();
+                    if (table_width.is_length() || table_width.is_percentage())
+                        reference_width = table_width.to_px(table_box(), containing_block_width);
+                } else {
+                    reference_width = containing_block_width;
+                }
+                min_content_width = max_content_width = computed_values.width().to_px(cell.box, reference_width);
+            } else {
+                min_content_width = max_content_width = 0;
+            }
+
             if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox)
                 min_content_width = max_content_width = max(CSSPixels(0), min_content_width - padding_left - padding_right - border_left - border_right);
         }

Tests/LibWeb/Layout/expected/table/fixed-layout-percentage-width-all-columns.txt

@@ -5,59 +5,59 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children
         Box <table> at [9,9] table-box [0+1+0 598 0+1+0] [0+1+0 44 0+1+0] [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text> (not painted)
-          Box <tbody> at [9,9] table-row-group [0+0+0 598 0+0+0] [0+0+0 44 0+0+0] children: not-inline
-            Box <tr> at [9,9] table-row [0+0+0 598 0+0+0] [0+0+0 22 0+0+0] children: not-inline
+          Box <tbody> at [9,9] table-row-group [0+0+0 597.984375 0+0+0] [0+0+0 44 0+0+0] children: not-inline
+            Box <tr> at [9,9] table-row [0+0+0 597.984375 0+0+0] [0+0+0 22 0+0+0] children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
-              BlockContainer <td> at [11,11] table-cell [0+1+1 62.4375 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
+              BlockContainer <td> at [11,11] table-cell [0+1+1 64.828125 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
                 frag 0 from TextNode start: 0, length: 4, rect: [11,11 26.078125x18] baseline: 13.796875
                     "cell"
                 TextNode <#text> (not painted)
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
-              BlockContainer <td> at [77.4375,11] table-cell [0+1+1 62.4375 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
-                frag 0 from TextNode start: 0, length: 4, rect: [77.4375,11 26.078125x18] baseline: 13.796875
+              BlockContainer <td> at [79.828125,11] table-cell [0+1+1 64.828125 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
+                frag 0 from TextNode start: 0, length: 4, rect: [79.828125,11 26.078125x18] baseline: 13.796875
                     "cell"
                 TextNode <#text> (not painted)
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
-              BlockContainer <td> at [143.875,11] table-cell [0+1+1 128.890625 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
-                frag 0 from TextNode start: 0, length: 12, rect: [143.875,11 94.96875x18] baseline: 13.796875
+              BlockContainer <td> at [148.65625,11] table-cell [0+1+1 129.359375 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
+                frag 0 from TextNode start: 0, length: 12, rect: [148.65625,11 94.96875x18] baseline: 13.796875
                     "A table cell"
                 TextNode <#text> (not painted)
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
-              BlockContainer <td> at [276.765625,11] table-cell [0+1+1 328.234375 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
-                frag 0 from TextNode start: 0, length: 12, rect: [276.765625,11 94.96875x18] baseline: 13.796875
+              BlockContainer <td> at [282.015625,11] table-cell [0+1+1 322.96875 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
+                frag 0 from TextNode start: 0, length: 12, rect: [282.015625,11 94.96875x18] baseline: 13.796875
                     "A table cell"
                 TextNode <#text> (not painted)
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
             BlockContainer <(anonymous)> (not painted) children: inline
               TextNode <#text> (not painted)
-            Box <tr> at [9,31] table-row [0+0+0 598 0+0+0] [0+0+0 22 0+0+0] children: not-inline
+            Box <tr> at [9,31] table-row [0+0+0 597.984375 0+0+0] [0+0+0 22 0+0+0] children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
-              BlockContainer <td> at [11,33] table-cell [0+1+1 62.4375 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
+              BlockContainer <td> at [11,33] table-cell [0+1+1 64.828125 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
                 frag 0 from TextNode start: 0, length: 4, rect: [11,33 26.078125x18] baseline: 13.796875
                     "cell"
                 TextNode <#text> (not painted)
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
-              BlockContainer <td> at [77.4375,33] table-cell [0+1+1 62.4375 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
-                frag 0 from TextNode start: 0, length: 4, rect: [77.4375,33 26.078125x18] baseline: 13.796875
+              BlockContainer <td> at [79.828125,33] table-cell [0+1+1 64.828125 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
+                frag 0 from TextNode start: 0, length: 4, rect: [79.828125,33 26.078125x18] baseline: 13.796875
                     "cell"
                 TextNode <#text> (not painted)
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
-              BlockContainer <td> at [143.875,33] table-cell [0+1+1 128.890625 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
-                frag 0 from TextNode start: 0, length: 12, rect: [143.875,33 94.96875x18] baseline: 13.796875
+              BlockContainer <td> at [148.65625,33] table-cell [0+1+1 129.359375 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
+                frag 0 from TextNode start: 0, length: 12, rect: [148.65625,33 94.96875x18] baseline: 13.796875
                     "A table cell"
                 TextNode <#text> (not painted)
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text> (not painted)
-              BlockContainer <td> at [276.765625,33] table-cell [0+1+1 328.234375 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
-                frag 0 from TextNode start: 0, length: 12, rect: [276.765625,33 94.96875x18] baseline: 13.796875
+              BlockContainer <td> at [282.015625,33] table-cell [0+1+1 322.96875 1+1+0] [0+1+1 18 1+1+0] [BFC] children: inline
+                frag 0 from TextNode start: 0, length: 12, rect: [282.015625,33 94.96875x18] baseline: 13.796875
                     "A table cell"
                 TextNode <#text> (not painted)
               BlockContainer <(anonymous)> (not painted) children: inline
@@ -70,24 +70,24 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x46]
       PaintableWithLines (TableWrapper(anonymous)) [8,8 600x46]
         PaintableBox (Box<TABLE>) [8,8 600x46]
-          PaintableBox (Box<TBODY>) [9,9 598x44]
-            PaintableBox (Box<TR>) [9,9 598x22]
-              PaintableWithLines (BlockContainer<TD>) [9,9 66.4375x22]
+          PaintableBox (Box<TBODY>) [9,9 597.984375x44]
+            PaintableBox (Box<TR>) [9,9 597.984375x22]
+              PaintableWithLines (BlockContainer<TD>) [9,9 68.828125x22]
                 TextPaintable (TextNode<#text>)
-              PaintableWithLines (BlockContainer<TD>) [75.4375,9 66.4375x22]
+              PaintableWithLines (BlockContainer<TD>) [77.828125,9 68.828125x22]
                 TextPaintable (TextNode<#text>)
-              PaintableWithLines (BlockContainer<TD>) [141.875,9 132.890625x22]
+              PaintableWithLines (BlockContainer<TD>) [146.65625,9 133.359375x22]
                 TextPaintable (TextNode<#text>)
-              PaintableWithLines (BlockContainer<TD>) [274.765625,9 332.234375x22]
+              PaintableWithLines (BlockContainer<TD>) [280.015625,9 326.96875x22]
                 TextPaintable (TextNode<#text>)
-            PaintableBox (Box<TR>) [9,31 598x22]
-              PaintableWithLines (BlockContainer<TD>) [9,31 66.4375x22]
+            PaintableBox (Box<TR>) [9,31 597.984375x22]
+              PaintableWithLines (BlockContainer<TD>) [9,31 68.828125x22]
                 TextPaintable (TextNode<#text>)
-              PaintableWithLines (BlockContainer<TD>) [75.4375,31 66.4375x22]
+              PaintableWithLines (BlockContainer<TD>) [77.828125,31 68.828125x22]
                 TextPaintable (TextNode<#text>)
-              PaintableWithLines (BlockContainer<TD>) [141.875,31 132.890625x22]
+              PaintableWithLines (BlockContainer<TD>) [146.65625,31 133.359375x22]
                 TextPaintable (TextNode<#text>)
-              PaintableWithLines (BlockContainer<TD>) [274.765625,31 332.234375x22]
+              PaintableWithLines (BlockContainer<TD>) [280.015625,31 326.96875x22]
                 TextPaintable (TextNode<#text>)
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)