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

@@ -130,7 +130,9 @@ void TableFormattingContext::compute_constrainedness()
 
     for (auto& cell : m_cells) {
         auto const& computed_values = cell.box->computed_values();
-        if (computed_values.width().is_length()) {
+        // https://www.w3.org/TR/css-tables-3/#fixed-layout
+        // In fixed layout, only cells in the first row are considered for column measurement.
+        if (computed_values.width().is_length() && (!use_fixed_mode_layout() || cell.row_index == 0)) {
             m_columns[cell.column_index].is_constrained = true;
         }
 
@@ -180,9 +182,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;
+            if (computed_values.width().is_percentage()) {
+                CSSPixels reference_width = 0;
+                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);
+                min_content_width = max_content_width = computed_values.width().to_px(cell.box, reference_width);
+            } else if (computed_values.width().is_length()) {
+                min_content_width = max_content_width = computed_values.width().to_px(cell.box, containing_block_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);
+                min_content_width = max_content_width = max(CSSPixels(0), min_content_width - cell_intrinsic_width_offsets);
         }
 
         if (!use_fixed_mode_layout() || width_is_specified_length_or_percentage) {
@@ -283,8 +296,11 @@ void TableFormattingContext::initialize_table_measures<TableFormattingContext::C
     // Implement the following parts of the specification, accounting for fixed layout mode:
     // https://www.w3.org/TR/css-tables-3/#min-content-width-of-a-column-based-on-cells-of-span-up-to-1
     // https://www.w3.org/TR/css-tables-3/#max-content-width-of-a-column-based-on-cells-of-span-up-to-1
+    bool const fixed = use_fixed_mode_layout();
     for (auto& cell : m_cells) {
-        if (cell.column_span == 1 && (cell.row_index == 0 || !use_fixed_mode_layout())) {
+        // https://www.w3.org/TR/css-tables-3/#fixed-layout
+        // In fixed layout, only cells in the first row are considered for column measurement.
+        if (cell.column_span == 1 && (cell.row_index == 0 || !fixed)) {
             m_columns[cell.column_index].min_size = max(m_columns[cell.column_index].min_size, cell.outer_min_width);
             m_columns[cell.column_index].max_size = max(m_columns[cell.column_index].max_size, cell.outer_max_width);
         }
@@ -307,9 +323,16 @@ void TableFormattingContext::compute_intrinsic_percentage(size_t max_cell_span)
         intrinsic_percentage_contribution_by_index[rc_index] = rows_or_columns[rc_index].intrinsic_percentage;
     }
 
+    [[maybe_unused]] bool const fixed_layout = use_fixed_mode_layout();
     for (size_t current_span = 2; current_span <= max_cell_span; current_span++) {
         // https://www.w3.org/TR/css-tables-3/#intrinsic-percentage-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
         for (auto& cell : m_cells) {
+            if constexpr (IsSame<RowOrColumn, Column>) {
+                // https://www.w3.org/TR/css-tables-3/#fixed-layout
+                // In fixed layout, only cells in the first row are considered for column measurement.
+                if (fixed_layout && cell.row_index != 0)
+                    continue;
+            }
             auto cell_span_value = cell_span<RowOrColumn>(cell);
             if (cell_span_value != current_span) {
                 continue;
@@ -378,8 +401,15 @@ void TableFormattingContext::compute_table_measures()
 
     auto& rows_or_columns = table_rows_or_columns<RowOrColumn>();
 
+    [[maybe_unused]] bool const fixed_layout = use_fixed_mode_layout();
     size_t max_cell_span = 1;
     for (auto& cell : m_cells) {
+        if constexpr (IsSame<RowOrColumn, Column>) {
+            // https://www.w3.org/TR/css-tables-3/#fixed-layout
+            // In fixed layout, only cells in the first row are considered for column measurement.
+            if (fixed_layout && cell.row_index != 0)
+                continue;
+        }
         max_cell_span = max(max_cell_span, cell_span<RowOrColumn>(cell));
     }
 
@@ -395,6 +425,12 @@ void TableFormattingContext::compute_table_measures()
         Vector<Vector<CSSPixels>> cell_max_contributions_by_rc_index;
         cell_max_contributions_by_rc_index.resize(rows_or_columns.size());
         for (auto& cell : m_cells) {
+            if constexpr (IsSame<RowOrColumn, Column>) {
+                // https://www.w3.org/TR/css-tables-3/#fixed-layout
+                // In fixed layout, only cells in the first row are considered for column measurement.
+                if (fixed_layout && cell.row_index != 0)
+                    continue;
+            }
             auto cell_span_value = cell_span<RowOrColumn>(cell);
             if (cell_span_value == current_span) {
                 // Define the baseline max-content size as the sum of the max-content sizes based on cells of span up to N-1 of all columns that the cell spans.
@@ -604,17 +640,21 @@ void TableFormattingContext::compute_table_width()
         // https://www.w3.org/TR/CSS22/tables.html#auto-table-layout
         // A percentage value for a column width is relative to the table width. If the table has 'width: auto',
         // a percentage represents a constraint on the column's width, which a UA should try to satisfy.
-        for (auto& cell : m_cells) {
-            auto const& cell_width = cell.box->computed_values().width();
-            if (cell_width.is_percentage()) {
-                CSSPixels adjusted_used_width = undistributable_space;
-                if (cell_width.percentage().value() != 0)
-                    adjusted_used_width += CSSPixels::nearest_value_for(ceil(100 / cell_width.percentage().value() * cell.outer_max_width));
-
-                if (width_of_table_containing_block.is_definite())
-                    used_width = min(max(used_width, adjusted_used_width), width_of_table_containing_block.to_px_or_zero());
-                else
+        if (!use_fixed_mode_layout()) {
+            for (auto& cell : m_cells) {
+                auto const& cell_width = cell.box->computed_values().width();
+                if (cell_width.is_percentage()) {
+                    auto const pct = cell_width.percentage().value();
+                    if (pct == 0)
+                        continue;
+
+                    CSSPixels adjusted_used_width = undistributable_space
+                        + CSSPixels::nearest_value_for(ceil(100 / pct * cell.outer_max_width));
+
                     used_width = max(used_width, adjusted_used_width);
+                    if (width_of_table_containing_block.is_definite())
+                        used_width = min(used_width, width_of_table_containing_block.to_px_or_zero());
+                }
             }
         }
     } else if (computed_values.width().is_max_content()) {
@@ -1961,7 +2001,14 @@ void TableFormattingContext::initialize_intrinsic_percentages_from_cells()
 {
     auto& rows_or_columns = table_rows_or_columns<RowOrColumn>();
 
+    [[maybe_unused]] bool const fixed_layout = use_fixed_mode_layout();
     for (auto& cell : m_cells) {
+        if constexpr (IsSame<RowOrColumn, Column>) {
+            // https://www.w3.org/TR/css-tables-3/#fixed-layout
+            // In fixed layout, only cells in the first row are considered for column measurement.
+            if (fixed_layout && cell.row_index != 0)
+                continue;
+        }
         auto cell_span_value = cell_span<RowOrColumn>(cell);
         auto cell_start_rc_index = cell_index<RowOrColumn>(cell);
         auto cell_end_rc_index = cell_start_rc_index + cell_span_value;

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)