浏览代码

LibWeb: Fix regression in definite grid row heights

Fixes a row height bug when a grid item in a row has a definite height.
martinfalisse 2 年之前
父节点
当前提交
6f52272d34

+ 34 - 0
Tests/LibWeb/Layout/expected/grid/row-height.txt

@@ -0,0 +1,34 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x83.46875 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x67.46875 children: not-inline
+      Box <div.grid-container> at (8,8) content-size 784x67.46875 children: not-inline
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (8,8) content-size 392.140625x50 children: inline
+          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (400.140625,8) content-size 392x50 children: inline
+          line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [400.140625,8 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (8,58) content-size 392.140625x17.46875 children: inline
+          line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [8,58 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (400.140625,58) content-size 392x17.46875 children: inline
+          line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [400.140625,58 7.75x17.46875]
+              "4"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>

+ 22 - 0
Tests/LibWeb/Layout/input/grid/row-height.html

@@ -0,0 +1,22 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Should render a 2x2 grid with the first row having a height of 50px -->
+<div class="grid-container" style="grid-template-columns: auto auto;">
+  <div class="grid-item" style="height: 50px;">1</div>
+  <div class="grid-item">2</div>
+  <div class="grid-item">3</div>
+  <div class="grid-item">4</div>
+</div>

+ 18 - 5
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp

@@ -1261,7 +1261,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
         case CSS::GridSize::Type::MinContent: {
             CSSPixels row_height = 0;
             for (auto& grid_item : grid_items_of_row)
-                row_height = max(row_height, calculate_min_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size)));
+                row_height = max(row_height, content_based_minimum_height(grid_item, box));
             grid_row.base_size = row_height;
         } break;
         // - For max-content minimums:
@@ -1270,7 +1270,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
         case CSS::GridSize::Type::MaxContent: {
             CSSPixels row_height = 0;
             for (auto& grid_item : grid_items_of_row)
-                row_height = max(row_height, calculate_max_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size)));
+                row_height = max(row_height, content_based_minimum_height(grid_item, box));
             grid_row.base_size = row_height;
         } break;
         // - For auto minimums:
@@ -1294,7 +1294,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
         case CSS::GridSize::Type::FlexibleLength: {
             CSSPixels grid_row_height = 0;
             for (auto& grid_item : grid_items_of_row)
-                grid_row_height = max(grid_row_height, calculate_min_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size)));
+                grid_row_height = max(grid_row_height, content_based_minimum_height(grid_item, box));
             grid_row.base_size = grid_row_height;
         } break;
         default:
@@ -1308,7 +1308,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
         case CSS::GridSize::Type::MinContent: {
             CSSPixels row_height = 0;
             for (auto& grid_item : grid_items_of_row)
-                row_height = max(row_height, calculate_max_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size)));
+                row_height = max(row_height, content_based_minimum_height(grid_item, box));
             grid_row.base_size = row_height;
         } break;
         // - For max-content maximums:
@@ -1318,7 +1318,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
         case CSS::GridSize::Type::MaxContent: {
             CSSPixels row_height = 0;
             for (auto& grid_item : grid_items_of_row)
-                row_height = max(row_height, calculate_max_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size)));
+                row_height = max(row_height, content_based_minimum_height(grid_item, box));
             grid_row.base_size = row_height;
         } break;
         case CSS::GridSize::Type::Length:
@@ -2056,4 +2056,17 @@ int GridItem::gap_adjusted_column(Box const& parent_box) const
     return parent_box.computed_values().column_gap().is_auto() ? m_column : m_column * 2;
 }
 
+// https://www.w3.org/TR/css-grid-2/#min-size-auto
+CSSPixels GridFormattingContext::content_based_minimum_height(GridItem const& item, Box const& parent_box)
+{
+    // The content-based minimum size for a grid item in a given dimension is its specified size suggestion if it exists
+    if (!item.box().computed_values().height().is_auto()) {
+        if (item.box().computed_values().height().is_length())
+            return item.box().computed_values().height().length().to_px(item.box());
+    }
+    // FIXME: otherwise its transferred size suggestion if that exists
+    // else its content size suggestion
+    return calculate_min_content_height(item.box(), AvailableSize::make_definite(m_grid_columns[item.gap_adjusted_column(parent_box)].base_size));
+}
+
 }

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

@@ -145,6 +145,8 @@ private:
     void initialize_grid_tracks(Box const&, AvailableSpace const&, int column_count, int row_count);
     void calculate_sizes_of_columns(Box const&, AvailableSpace const&);
     void calculate_sizes_of_rows(Box const&);
+
+    CSSPixels content_based_minimum_height(GridItem const&, Box const& parent_box);
 };
 
 }