We use cookies to ensure you get the best experience on our website
Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
0ct0pu5
/
ladybird
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

LibWeb: Use grid item *outer* size when calculating minimum contribution

Previously we used the border box, which meant that tracks did not grow
to accommodate item margins.
Andreas Kling 2 rokov pred
rodič
741c7aef21
commit
867e04768e
4 zmenil súbory, kde vykonal 33 pridanie a 15 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 8 0
      Tests/LibWeb/Layout/expected/grid/grid-row-height-affected-by-item-margins.txt
  2. 10 0
      Tests/LibWeb/Layout/input/grid/grid-row-height-affected-by-item-margins.html
  3. 10 8
      Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
  4. 5 7
      Userland/Libraries/LibWeb/Layout/GridFormattingContext.h

+ 8 - 0
Tests/LibWeb/Layout/expected/grid/grid-row-height-affected-by-item-margins.txt
Zobraziť súbor 

@@ -0,0 +1,8 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (1,1) content-size 798x97.817501 [BFC] children: not-inline
 
+    Box <body> at (10,10) content-size 780x79.817501 [GFC] children: not-inline
 
+      BlockContainer <h1> at (55.5,32.440000) content-size 689x34.9375 [BFC] children: inline
 
+        line 0 width: 492.96875, height: 34.9375, bottom: 34.9375, baseline: 27.0625
 
+          frag 0 from TextNode start: 0, length: 31, rect: [55.5,32.440000 492.96875x34.9375]
 
+            "Null publishes fine indie games"
 
+        TextNode <#text>

+ 10 - 0
Tests/LibWeb/Layout/input/grid/grid-row-height-affected-by-item-margins.html
Zobraziť súbor 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html><style>
 
+    * { border: 1px solid black; }
 
+    body {
 
+        display: grid;
 
+        grid-template-columns: 1fr min(89ch, 100% - 89px) 1fr;
 
+    }
 
+    h1 {
 
+        grid-column: 2 / auto;
 
+    }
 
+</style><body><h1>Null publishes fine indie games</h1>

+ 10 - 8
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
Zobraziť súbor 

@@ -1443,7 +1443,9 @@ void GridFormattingContext::resolve_grid_item_heights()
 
         box_state.border_bottom = border_bottom;
 
 
         auto const& computed_height = item.box().computed_values().height();
 
-        auto used_height = computed_height.is_auto() ? (containing_block_height - box_state.border_top - box_state.border_bottom - box_state.padding_top - box_state.padding_bottom) : computed_height.to_px(grid_container(), containing_block_height);
 
+        auto used_height = computed_height.is_auto()
 
+            ? (containing_block_height - box_state.margin_box_top() - box_state.margin_box_bottom())
 
+            : computed_height.to_px(grid_container(), containing_block_height);
 
         box_state.set_content_height(used_height);
 
     }
 
 }
 
@@ -1771,12 +1773,12 @@ CSSPixels GridFormattingContext::calculate_min_content_contribution(GridItem con
 
     }();
 
 
     if (should_treat_preferred_size_as_auto) {
 
-        return item.add_border_box_sizes(calculate_min_content_size(item, dimension), dimension, m_state);
 
+        return item.add_margin_box_sizes(calculate_min_content_size(item, dimension), dimension, m_state);
 
     }
 
 
     auto preferred_size = get_item_preferred_size(item, dimension);
 
     auto containing_block_size = containing_block_size_for_item(item, dimension);
 
-    return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state);
 
+    return item.add_margin_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state);
 
 }
 
 
 CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem const& item, GridDimension const dimension) const
 
@@ -1790,12 +1792,12 @@ CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem con
 
     }();
 
 
     if (should_treat_preferred_size_as_auto) {
 
-        return item.add_border_box_sizes(calculate_max_content_size(item, dimension), dimension, m_state);
 
+        return item.add_margin_box_sizes(calculate_max_content_size(item, dimension), dimension, m_state);
 
     }
 
 
     auto preferred_size = get_item_preferred_size(item, dimension);
 
     auto containing_block_size = containing_block_size_for_item(item, dimension);
 
-    return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state);
 
+    return item.add_margin_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state);
 
 }
 
 
 CSSPixels GridFormattingContext::calculate_limited_min_content_contribution(GridItem const& item, GridDimension const dimension) const
 
@@ -1881,7 +1883,7 @@ CSSPixels GridFormattingContext::automatic_minimum_size(GridItem const& item, Gr
 
     AvailableSize const& available_size = dimension == GridDimension::Column ? m_available_space->width : m_available_space->height;
 
     auto item_spans_auto_tracks = tracks[item_track_index].min_track_sizing_function.is_auto(available_size);
 
     if (item_spans_auto_tracks && !item.box().is_scroll_container()) {
 
-        return item.add_border_box_sizes(content_based_minimum_size(item, dimension), dimension, m_state);
 
+        return content_based_minimum_size(item, dimension);
 
     }
 
 
     // Otherwise, the automatic minimum size is zero, as usual.
 
@@ -1907,9 +1909,9 @@ CSSPixels GridFormattingContext::calculate_minimum_contribution(GridItem const&
 
     if (should_treat_preferred_size_as_auto) {
 
         auto minimum_size = get_item_minimum_size(item, dimension);
 
         if (minimum_size.is_auto())
 
-            return automatic_minimum_size(item, dimension);
 
+            return item.add_margin_box_sizes(automatic_minimum_size(item, dimension), dimension, m_state);
 
         auto containing_block_size = containing_block_size_for_item(item, dimension);
 
-        return item.add_border_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension, m_state);
 
+        return item.add_margin_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension, m_state);
 
     }
 
 
     return calculate_min_content_contribution(item, dimension);

+ 5 - 7
Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
Zobraziť súbor 

@@ -45,14 +45,12 @@ public:
 
         return dimension == GridDimension::Column ? m_column : m_row;
 
     }
 
 
-    CSSPixels add_border_box_sizes(CSSPixels content_size, GridDimension dimension, LayoutState const& state) const
 
+    [[nodiscard]] CSSPixels add_margin_box_sizes(CSSPixels content_size, GridDimension dimension, LayoutState const& state) const
 
     {
 
-        auto& box_state = state.get(box());
 
-        if (dimension == GridDimension::Column) {
 
-            return box_state.border_left + box_state.padding_left + content_size + box_state.padding_right + box_state.border_right;
 
-        } else {
 
-            return box_state.border_top + box_state.padding_top + content_size + box_state.padding_bottom + box_state.border_bottom;
 
-        }
 
+        auto const& box_state = state.get(box());
 
+        if (dimension == GridDimension::Column)
 
+            return box_state.margin_box_left() + content_size + box_state.margin_box_right();
 
+        return box_state.margin_box_top() + content_size + box_state.margin_box_bottom();
 
     }
 
 
     int raw_row() const { return m_row; }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5