Browse Source

LibWeb: Fix auto-fill track counting to correctly handle gaps in GFC

Fixes the mistake that gaps are counted as if they exist after each
track, when actually gaps are present only between tracks.

Visual progression on https://kde.org/products/
Aliaksandr Kalenik 1 năm trước cách đây
mục cha
commit
a32046ea50

+ 23 - 0
Tests/LibWeb/Layout/expected/grid/columns-auto-fill-with-gap-2.txt

@@ -0,0 +1,23 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
+      Box <div.grid> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
+        BlockContainer <div> at (8,8) content-size 367x17.46875 [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: [8,8 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (425,8) content-size 367x17.46875 [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [425,8 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x33.46875]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x17.46875]
+      PaintableBox (Box<DIV>.grid) [8,8 784x17.46875]
+        PaintableWithLines (BlockContainer<DIV>) [8,8 367x17.46875]
+          TextPaintable (TextNode<#text>)
+        PaintableWithLines (BlockContainer<DIV>) [425,8 367x17.46875]
+          TextPaintable (TextNode<#text>)

+ 10 - 0
Tests/LibWeb/Layout/input/grid/columns-auto-fill-with-gap-2.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html><style type="text/css">
+* {
+    outline: 1px solid black;
+}
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 50px) / 2), 1fr));
+    grid-gap: 50px;
+}
+</style><div class="grid"><div>a</div><div>b</div></div>

+ 7 - 7
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp

@@ -107,8 +107,8 @@ int GridFormattingContext::count_of_repeated_auto_fill_or_fit_tracks(Vector<CSS:
     // (treating each track as its max track sizing function if that is definite or its minimum track sizing
     // (treating each track as its max track sizing function if that is definite or its minimum track sizing
     // function otherwise, flooring the max track sizing function by the min track sizing function if both
     // function otherwise, flooring the max track sizing function by the min track sizing function if both
     // are definite, and taking gap into account)
     // are definite, and taking gap into account)
-    auto const& column_gap = grid_container().computed_values().column_gap();
-    for (auto& explicit_grid_track : track_list.first().repeat().grid_track_size_list().track_list()) {
+    auto const& repeat_track_list = track_list.first().repeat().grid_track_size_list().track_list();
+    for (auto& explicit_grid_track : repeat_track_list) {
         auto track_sizing_function = explicit_grid_track;
         auto track_sizing_function = explicit_grid_track;
         if (track_sizing_function.is_minmax()) {
         if (track_sizing_function.is_minmax()) {
             if (track_sizing_function.minmax().max_grid_size().is_definite() && !track_sizing_function.minmax().min_grid_size().is_definite())
             if (track_sizing_function.minmax().max_grid_size().is_definite() && !track_sizing_function.minmax().min_grid_size().is_definite())
@@ -120,14 +120,14 @@ int GridFormattingContext::count_of_repeated_auto_fill_or_fit_tracks(Vector<CSS:
         } else {
         } else {
             sum_of_grid_track_sizes += min(resolve_definite_track_size(track_sizing_function.grid_size(), *m_available_space), resolve_definite_track_size(track_sizing_function.grid_size(), *m_available_space));
             sum_of_grid_track_sizes += min(resolve_definite_track_size(track_sizing_function.grid_size(), *m_available_space), resolve_definite_track_size(track_sizing_function.grid_size(), *m_available_space));
         }
         }
-
-        if (!column_gap.is_auto())
-            sum_of_grid_track_sizes += column_gap.to_px(grid_container(), m_available_space->width.to_px_or_zero());
     }
     }
 
 
-    if (sum_of_grid_track_sizes == 0)
+    auto free_space = get_free_space(*m_available_space, GridDimension::Column).to_px_or_zero();
+    auto const& column_gap = grid_container().computed_values().column_gap();
+    free_space -= repeat_track_list.size() * column_gap.to_px(grid_container(), m_available_space->width.to_px_or_zero());
+    if (free_space <= 0 || sum_of_grid_track_sizes == 0)
         return 0;
         return 0;
-    return max(1, (get_free_space(*m_available_space, GridDimension::Column).to_px_or_zero() / sum_of_grid_track_sizes).to_int());
+    return (free_space / sum_of_grid_track_sizes).to_int();
 
 
     // For the purpose of finding the number of auto-repeated tracks in a standalone axis, the UA must
     // For the purpose of finding the number of auto-repeated tracks in a standalone axis, the UA must
     // floor the track size to a UA-specified value to avoid division by zero. It is suggested that this
     // floor the track size to a UA-specified value to avoid division by zero. It is suggested that this