We use cookies to ensure you get the best experience on our website
Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
0ct0pu5
/
ladybird
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

LibWeb: Include gaps in for_each_spanned_track_by_item in GFC

This fixes the issue when left free space is calculated incorrectly
because for_each_spanned_track_by_item does not include gap tracks.
Aliaksandr Kalenik 2 lat temu
rodzic
85d14bdc5e
commit
10cab5fbdb
3 zmienionych plików z 201 dodań i 7 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 108 0
      Tests/LibWeb/Layout/expected/grid/row-span-2-with-gaps.txt
  2. 55 0
      Tests/LibWeb/Layout/input/grid/row-span-2-with-gaps.html
  3. 38 7
      Userland/Libraries/LibWeb/Layout/GridFormattingContext.h

+ 108 - 0
Tests/LibWeb/Layout/expected/grid/row-span-2-with-gaps.txt
Wyświetl plik 

@@ -0,0 +1,108 @@
 
+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 784x352.34375 children: not-inline
 
+      Box <div.grid-container> at (8,8) content-size 784x352.34375 [GFC] children: not-inline
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.grid-item.item-span-one-one> at (411.46875,8) content-size 382x139.765625 [BFC] children: inline
 
+          line 0 width: 319.171875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 1, length: 40, rect: [411.46875,8 319.171875x17.46875]
 
+              "In a sollicitudin augue. Sed ante augue,"
 
+          line 1 width: 335.125, height: 17.9375, bottom: 35.40625, baseline: 13.53125
 
+            frag 0 from TextNode start: 42, length: 42, rect: [411.46875,25 335.125x17.46875]
 
+              "rhoncus nec porttitor id, lacinia et nibh."
 
+          line 2 width: 378.625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
 
+            frag 0 from TextNode start: 85, length: 48, rect: [411.46875,42 378.625x17.46875]
 
+              "Pellentesque diam libero, ultrices eget eleifend"
 
+          line 3 width: 182.8125, height: 17.875, bottom: 70.28125, baseline: 13.53125
 
+            frag 0 from TextNode start: 134, length: 22, rect: [411.46875,60 182.8125x17.46875]
 
+              "at, consequat ut orci."
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.grid-item.item-span-one-two> at (411.46875,167.765625) content-size 382x192.578125 [BFC] children: inline
 
+          line 0 width: 359.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 1, length: 43, rect: [411.46875,167.765625 359.15625x17.46875]
 
+              "Suspendisse potenti. Pellentesque at varius"
 
+          line 1 width: 318.5625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
 
+            frag 0 from TextNode start: 45, length: 41, rect: [411.46875,184.765625 318.5625x17.46875]
 
+              "lacus, sed sollicitudin leo. Pellentesque"
 
+          line 2 width: 377.640625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
 
+            frag 0 from TextNode start: 87, length: 44, rect: [411.46875,201.765625 377.640625x17.46875]
 
+              "malesuada mi eget pellentesque tempor. Donec"
 
+          line 3 width: 378.03125, height: 17.875, bottom: 70.28125, baseline: 13.53125
 
+            frag 0 from TextNode start: 132, length: 47, rect: [411.46875,219.765625 378.03125x17.46875]
 
+              "egestas mauris est, ut lobortis nisi luctus at."
 
+          line 4 width: 345.953125, height: 18.34375, bottom: 88.21875, baseline: 13.53125
 
+            frag 0 from TextNode start: 180, length: 41, rect: [411.46875,236.765625 345.953125x17.46875]
 
+              "Vivamus eleifend, lorem vulputate maximus"
 
+          line 5 width: 312.765625, height: 17.8125, bottom: 105.15625, baseline: 13.53125
 
+            frag 0 from TextNode start: 222, length: 37, rect: [411.46875,254.765625 312.765625x17.46875]
 
+              "porta, nunc metus porttitor nibh, nec"
 
+          line 6 width: 242.921875, height: 18.28125, bottom: 123.09375, baseline: 13.53125
 
+            frag 0 from TextNode start: 260, length: 31, rect: [411.46875,271.765625 242.921875x17.46875]
 
+              "bibendum nulla lectus ut felis."
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.grid-item.item-span-two> at (8,8) content-size 383.46875x352.34375 [BFC] children: inline
 
+          line 0 width: 337.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 1, length: 39, rect: [8,8 337.6875x17.46875]
 
+              "Lorem ipsum dolor sit amet, consectetur"
 
+          line 1 width: 376.34375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
 
+            frag 0 from TextNode start: 41, length: 47, rect: [8,25 376.34375x17.46875]
 
+              "adipiscing elit. Sed vitae condimentum erat, ac"
 
+          line 2 width: 365.84375, height: 18.40625, bottom: 53.34375, baseline: 13.53125
 
+            frag 0 from TextNode start: 89, length: 45, rect: [8,42 365.84375x17.46875]
 
+              "posuere arcu. Aenean tincidunt mi ligula, vel"
 
+          line 3 width: 381.96875, height: 17.875, bottom: 70.28125, baseline: 13.53125
 
+            frag 0 from TextNode start: 135, length: 46, rect: [8,60 381.96875x17.46875]
 
+              "semper dolor aliquet at. Phasellus scelerisque"
 
+          line 4 width: 377.203125, height: 18.34375, bottom: 88.21875, baseline: 13.53125
 
+            frag 0 from TextNode start: 182, length: 45, rect: [8,77 377.203125x17.46875]
 
+              "dapibus diam sed rhoncus. Proin sed orci leo."
 
+          line 5 width: 375.390625, height: 17.8125, bottom: 105.15625, baseline: 13.53125
 
+            frag 0 from TextNode start: 228, length: 45, rect: [8,95 375.390625x17.46875]
 
+              "Praesent pellentesque mi eu nunc gravida, vel"
 
+          line 6 width: 271.078125, height: 18.28125, bottom: 123.09375, baseline: 13.53125
 
+            frag 0 from TextNode start: 274, length: 32, rect: [8,112 271.078125x17.46875]
 
+              "consectetur nulla malesuada. Sed"
 
+          line 7 width: 303.5625, height: 17.75, bottom: 140.03125, baseline: 13.53125
 
+            frag 0 from TextNode start: 307, length: 40, rect: [8,130 303.5625x17.46875]
 
+              "pellentesque, elit sit amet sollicitudin"
 
+          line 8 width: 346.625, height: 18.21875, bottom: 157.96875, baseline: 13.53125
 
+            frag 0 from TextNode start: 348, length: 46, rect: [8,147 346.625x17.46875]
 
+              "sollicitudin, lectus justo facilisis lacus, ac"
 
+          line 9 width: 350.234375, height: 17.6875, bottom: 174.90625, baseline: 13.53125
 
+            frag 0 from TextNode start: 395, length: 42, rect: [8,165 350.234375x17.46875]
 
+              "vehicula metus neque ac mi. In in augue et"
 
+          line 10 width: 361.0625, height: 18.15625, bottom: 192.84375, baseline: 13.53125
 
+            frag 0 from TextNode start: 438, length: 40, rect: [8,182 361.0625x17.46875]
 
+              "massa maximus venenatis auctor fermentum"
 
+          line 11 width: 371.734375, height: 17.625, bottom: 209.78125, baseline: 13.53125
 
+            frag 0 from TextNode start: 479, length: 46, rect: [8,200 371.734375x17.46875]
 
+              "dui. Aliquam dictum finibus urna, quis lacinia"
 
+          line 12 width: 369.59375, height: 18.09375, bottom: 227.71875, baseline: 13.53125
 
+            frag 0 from TextNode start: 526, length: 42, rect: [8,217 369.59375x17.46875]
 
+              "massa laoreet a. Suspendisse elementum non"
 
+          line 13 width: 323.78125, height: 17.5625, bottom: 244.65625, baseline: 13.53125
 
+            frag 0 from TextNode start: 569, length: 39, rect: [8,235 323.78125x17.46875]
 
+              "lectus nec elementum. Quisque ultricies"
 
+          line 14 width: 337, height: 18.03125, bottom: 262.59375, baseline: 13.53125
 
+            frag 0 from TextNode start: 609, length: 40, rect: [8,252 337x17.46875]
 
+              "suscipit porttitor. Sed non urna rutrum,"
 
+          line 15 width: 351.828125, height: 17.5, bottom: 279.53125, baseline: 13.53125
 
+            frag 0 from TextNode start: 650, length: 46, rect: [8,270 351.828125x17.46875]
 
+              "mattis nulla at, feugiat erat. Duis orci elit,"
 
+          line 16 width: 361.328125, height: 17.96875, bottom: 297.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 697, length: 45, rect: [8,287 361.328125x17.46875]
 
+              "vehicula sed blandit eget, auctor in arcu. Ut"
 
+          line 17 width: 345.75, height: 18.4375, bottom: 315.40625, baseline: 13.53125
 
+            frag 0 from TextNode start: 743, length: 41, rect: [8,304 345.75x17.46875]
 
+              "cursus magna sit amet nulla cursus, vitae"
 
+          line 18 width: 180.234375, height: 17.90625, bottom: 332.34375, baseline: 13.53125
 
+            frag 0 from TextNode start: 785, length: 22, rect: [8,322 180.234375x17.46875]
 
+              "gravida mauris dictum."
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>

+ 55 - 0
Tests/LibWeb/Layout/input/grid/row-span-2-with-gaps.html
Wyświetl plik 

@@ -0,0 +1,55 @@
 
+<style>
 
+.grid-container {
 
+    display: grid;
 
+    grid-template-columns: auto auto;
 
+    grid-template-rows: auto auto;
 
+    row-gap: 20px;
 
+    column-gap: 20px;
 
+}
 
+
 
+.item-span-one-one {
 
+    background-color: lightpink;
 
+    grid-row: 1 / span 1;
 
+    grid-column: 2;
 
+}
 
+
 
+.item-span-one-two {
 
+    background-color: lightgreen;
 
+    grid-row: 2 / span 1;
 
+    grid-column: 2;
 
+}
 
+
 
+.item-span-two {
 
+    background-color: lightskyblue;
 
+    grid-row: 1 / span 2;
 
+    grid-column: 1;
 
+}
 
+</style>
 
+<div class="grid-container">
 
+<div class="grid-item item-span-one-one">
 
+In a sollicitudin augue. Sed ante augue, rhoncus nec porttitor id,
 
+lacinia et nibh. Pellentesque diam libero, ultrices eget eleifend at,
 
+consequat ut orci.
 
+</div>
 
+<div class="grid-item item-span-one-two">
 
+Suspendisse potenti. Pellentesque at varius lacus, sed sollicitudin leo.
 
+Pellentesque malesuada mi eget pellentesque tempor. Donec egestas mauris
 
+est, ut lobortis nisi luctus at. Vivamus eleifend, lorem vulputate
 
+maximus porta, nunc metus porttitor nibh, nec bibendum nulla lectus ut
 
+felis.
 
+</div>
 
+<div class="grid-item item-span-two">
 
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae
 
+condimentum erat, ac posuere arcu. Aenean tincidunt mi ligula, vel
 
+semper dolor aliquet at. Phasellus scelerisque dapibus diam sed rhoncus.
 
+Proin sed orci leo. Praesent pellentesque mi eu nunc gravida, vel
 
+consectetur nulla malesuada. Sed pellentesque, elit sit amet
 
+sollicitudin sollicitudin, lectus justo facilisis lacus, ac vehicula
 
+metus neque ac mi. In in augue et massa maximus venenatis auctor
 
+fermentum dui. Aliquam dictum finibus urna, quis lacinia massa laoreet
 
+a. Suspendisse elementum non lectus nec elementum. Quisque ultricies
 
+suscipit porttitor. Sed non urna rutrum, mattis nulla at, feugiat erat.
 
+Duis orci elit, vehicula sed blandit eget, auctor in arcu. Ut cursus
 
+magna sit amet nulla cursus, vitae gravida mauris dictum.
 
+</div>
 
+</div>

+ 38 - 7
Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
Wyświetl plik 

@@ -188,29 +188,60 @@ private:
 
     Vector<TemporaryTrack> m_grid_rows;
 
     Vector<TemporaryTrack> m_grid_rows;
 
     Vector<TemporaryTrack> m_grid_columns;
 
     Vector<TemporaryTrack> m_grid_columns;
 
 
 
+    bool has_gaps(GridDimension const dimension) const
 
+    {
 
+        if (dimension == GridDimension::Column) {
 
+            return !grid_container().computed_values().column_gap().is_auto();
 
+        } else {
 
+            return !grid_container().computed_values().row_gap().is_auto();
 
+        }
 
+    }
 
+
 
     template<typename Callback>
 
     template<typename Callback>
 
     void for_each_spanned_track_by_item(GridItem const& item, GridDimension const dimension, Callback callback)
 
     void for_each_spanned_track_by_item(GridItem const& item, GridDimension const dimension, Callback callback)
 
     {
 
     {
 
         auto& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows;
 
         auto& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows;
 
-        for (size_t span = 0; span < item.span(dimension); span++) {
 
-            if (item.raw_position(dimension) + span >= tracks.size())
 
+        auto& gaps = dimension == GridDimension::Column ? m_column_gap_tracks : m_row_gap_tracks;
 
+        auto has_gaps = this->has_gaps(dimension);
 
+        auto item_span = item.span(dimension);
 
+        auto item_index = item.raw_position(dimension);
 
+        for (size_t span = 0; span < item_span; span++) {
 
+            auto track_index = item_index + span;
 
+            if (track_index >= tracks.size())
 
                 break;
 
                 break;
 
 
 
-            auto& track = tracks[item.raw_position(dimension) + span];
 
+            auto& track = tracks[track_index];
 
             callback(track);
 
             callback(track);
 
+
 
+            auto is_last_spanned_track = span == item_span - 1;
 
+            if (has_gaps && !is_last_spanned_track) {
 
+                auto& gap = gaps[track_index];
 
+                callback(gap);
 
+            }
 
         }
 
         }
 
     }
 
     }
 
 
 
     template<typename Callback>
 
     template<typename Callback>
 
     void for_each_spanned_track_by_item(GridItem const& item, GridDimension const dimension, Callback callback) const
 
     void for_each_spanned_track_by_item(GridItem const& item, GridDimension const dimension, Callback callback) const
 
     {
 
     {
 
-        auto const& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows;
 
-        for (size_t span = 0; span < item.span(dimension); span++) {
 
-            if (item.raw_position(dimension) + span >= tracks.size())
 
+        auto& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows;
 
+        auto& gaps = dimension == GridDimension::Column ? m_column_gap_tracks : m_row_gap_tracks;
 
+        auto has_gaps = this->has_gaps(dimension);
 
+        auto item_span = item.span(dimension);
 
+        auto item_index = item.raw_position(dimension);
 
+        for (size_t span = 0; span < item_span; span++) {
 
+            auto track_index = item_index + span;
 
+            if (track_index >= tracks.size())
 
                 break;
 
                 break;
 
 
 
-            auto const& track = tracks[item.raw_position(dimension) + span];
 
+            auto& track = tracks[track_index];
 
             callback(track);
 
             callback(track);
 
+
 
+            auto is_last_spanned_track = span == item_span - 1;
 
+            if (has_gaps && !is_last_spanned_track) {
 
+                auto& gap = gaps[track_index];
 
+                callback(gap);
 
+            }
 
         }
 
         }
 
     }
 
     }

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