Sfoglia il codice sorgente

LibWeb: Support grid-auto-columns and grid-auto-rows properties in GFC

Implements assignment of sizes specified in grid-auto-columns/rows for
implicitly created tracks.
Aliaksandr Kalenik 2 anni fa
parent
commit
193290b19a

+ 8 - 0
Tests/LibWeb/Layout/expected/grid/auto-track-sizes.txt

@@ -0,0 +1,8 @@
+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 784x60 children: not-inline
+      Box <div.grid> at (8,8) content-size 784x60 [GFC] children: not-inline
+        BlockContainer <div#c1> at (8,8) content-size 23x11 [BFC] children: not-inline
+        BlockContainer <div#c2> at (8,8) content-size 52x24 [BFC] children: not-inline
+        BlockContainer <div#c3> at (8,8) content-size 83x41 [BFC] children: not-inline
+        BlockContainer <div#c4> at (8,8) content-size 120x60 [BFC] children: not-inline

+ 27 - 0
Tests/LibWeb/Layout/input/grid/auto-track-sizes.html

@@ -0,0 +1,27 @@
+<!-- https://wpt.live/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html -->
+<style>
+.grid {
+    display: grid;
+    grid-template-areas: "a b c" "d e f" "g e h";
+    grid-template-rows: 11px 13px;
+    grid-auto-rows: 17px 19px;
+    grid-template-columns: 23px 29px;
+    grid-auto-columns: 31px 37px;
+}
+
+.grid > div {
+    background: rgba(0, 0, 0, 0.2);
+}
+#c1 {
+    grid-area: 1 / 1 / 2 / 2;
+}
+#c2 {
+    grid-area: 1 / 1 / 3 / 3;
+}
+#c3 {
+    grid-area: 1 / 1 / 4 / 4;
+}
+#c4 {
+    grid-area: 1 / 1 / 5 / 5;
+}
+</style><div class="grid"><div id="c1"></div><div id="c2"></div><div id="c3"></div><div id="c4"></div></div>

+ 26 - 6
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp

@@ -553,13 +553,33 @@ void GridFormattingContext::initialize_grid_tracks_from_definition(AvailableSpac
 
 void GridFormattingContext::initialize_grid_tracks_for_columns_and_rows(AvailableSpace const& available_space)
 {
-    initialize_grid_tracks_from_definition(available_space, grid_container().computed_values().grid_template_columns().track_list(), m_grid_columns);
-    initialize_grid_tracks_from_definition(available_space, grid_container().computed_values().grid_template_rows().track_list(), m_grid_rows);
+    auto const& grid_computed_values = grid_container().computed_values();
+    initialize_grid_tracks_from_definition(available_space, grid_computed_values.grid_template_columns().track_list(), m_grid_columns);
+    initialize_grid_tracks_from_definition(available_space, grid_computed_values.grid_template_rows().track_list(), m_grid_rows);
+
+    auto const& grid_auto_columns = grid_computed_values.grid_auto_columns().track_list();
+    size_t implicit_column_index = 0;
+    for (size_t column_index = m_grid_columns.size(); column_index < m_occupation_grid.column_count(); column_index++) {
+        if (grid_auto_columns.size() > 0) {
+            auto size = grid_auto_columns[implicit_column_index % grid_auto_columns.size()];
+            m_grid_columns.append(TemporaryTrack(size.grid_size()));
+        } else {
+            m_grid_columns.append(TemporaryTrack());
+        }
+        implicit_column_index++;
+    }
 
-    for (size_t column_index = m_grid_columns.size(); column_index < m_occupation_grid.column_count(); column_index++)
-        m_grid_columns.append(TemporaryTrack());
-    for (size_t row_index = m_grid_rows.size(); row_index < m_occupation_grid.row_count(); row_index++)
-        m_grid_rows.append(TemporaryTrack());
+    auto const& grid_auto_rows = grid_computed_values.grid_auto_rows().track_list();
+    size_t implicit_row_index = 0;
+    for (size_t row_index = m_grid_rows.size(); row_index < m_occupation_grid.row_count(); row_index++) {
+        if (grid_auto_rows.size() > 0) {
+            auto size = grid_auto_rows[implicit_row_index % grid_auto_rows.size()];
+            m_grid_rows.append(TemporaryTrack(size.grid_size()));
+        } else {
+            m_grid_rows.append(TemporaryTrack());
+        }
+        implicit_row_index++;
+    }
 }
 
 void GridFormattingContext::initialize_gap_tracks(AvailableSpace const& available_space)