Browse Source

LibWeb: Don't distribute excess width to constrained columns

Bring our implementation closer to the specification, which distributes
excess width to unconstrained columns first.
Andi Gallo 2 years ago
parent
commit
9cb4fe6a6f

+ 27 - 0
Tests/LibWeb/Layout/expected/table/width-distribution-and-constrained-columns.txt

@@ -0,0 +1,27 @@
+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 784x27.46875 children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 420x27.46875 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 418x25.46875 table-box [TFC] children: not-inline
+          BlockContainer <(anonymous)> (not painted) children: inline
+            TextNode <#text>
+          Box <tbody> at (9,9) content-size 412x21.46875 table-row-group children: not-inline
+            Box <tr> at (11,11) content-size 412x21.46875 table-row children: not-inline
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td> at (13,13) content-size 14.265625x17.46875 table-cell [BFC] children: inline
+                line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 1, rect: [13,13 14.265625x17.46875]
+                    "A"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td> at (33.265625,13) content-size 389.734375x17.46875 table-cell [BFC] children: inline
+                line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 1, rect: [33.265625,13 9.34375x17.46875]
+                    "B"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+            BlockContainer <(anonymous)> (not painted) children: inline
+              TextNode <#text>

+ 6 - 0
Tests/LibWeb/Layout/input/table/width-distribution-and-constrained-columns.html

@@ -0,0 +1,6 @@
+<table style="width:420px;border:1px solid;">
+    <tr>
+        <td style="border:1px solid; width:1px">A</td>
+        <td style="border:1px solid">B</td>
+    </tr>
+</table>

+ 14 - 1
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp

@@ -211,6 +211,8 @@ void TableFormattingContext::compute_cell_measures(AvailableSpace const& availab
             m_columns[cell.column_index].percentage_width = max(m_columns[cell.column_index].percentage_width, computed_values.width().percentage().value());
         } else {
             m_columns[cell.column_index].type = SizeType::Pixel;
+            if (computed_values.width().is_length())
+                m_columns[cell.column_index].is_constrained = true;
         }
 
         auto cell_intrinsic_height_offsets = padding_top + padding_bottom + border_top + border_bottom;
@@ -508,24 +510,35 @@ void TableFormattingContext::distribute_width_to_columns()
         expand_columns_to_fill_available_width(SizeType::Percent);
     }
 
+    // Implements steps 1 and 2 of https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns
+    // FIXME: Implement steps 3-5 as well, which distribute excess width to constrained columns.
     if (columns_total_used_width() < available_width) {
         // NOTE: if all columns got their max width and there is still width to distribute left
         // it should be assigned to columns proportionally to their max width
         CSSPixels grid_max = 0.0f;
+        size_t unconstrained_column_count = 0;
         for (auto& column : m_columns) {
+            if (column.is_constrained) {
+                continue;
+            }
             grid_max += column.max_size;
+            ++unconstrained_column_count;
         }
 
         auto width_to_distribute = available_width - columns_total_used_width();
         if (grid_max == 0) {
             // If total max width of columns is zero then divide distributable width equally among them
-            auto column_width = width_to_distribute / m_columns.size();
+            auto column_width = width_to_distribute / unconstrained_column_count;
             for (auto& column : m_columns) {
+                if (column.is_constrained)
+                    continue;
                 column.used_width = column_width;
             }
         } else {
             // Distribute width to columns proportionally to their max width
             for (auto& column : m_columns) {
+                if (column.is_constrained)
+                    continue;
                 column.used_width += width_to_distribute * column.max_size / grid_max;
             }
         }

+ 2 - 0
Userland/Libraries/LibWeb/Layout/TableFormattingContext.h

@@ -69,6 +69,8 @@ private:
         CSSPixels max_size { 0 };
         CSSPixels used_width { 0 };
         double percentage_width { 0 };
+        // Store whether the column is constrained: https://www.w3.org/TR/css-tables-3/#constrainedness
+        bool is_constrained { false };
     };
 
     struct Row {