Grid Lanes: wire display: grid-lanes, grid-lanes-direction and fit-tolerance to Taffy (pins Taffy #1276, Stylo grid-lanes branch)

Cargo.toml

@@ -98,11 +98,12 @@ dioxus-cli-config = { version = "0.7.3" }
 dioxus-core-macro = { version = "0.7.3" }
 
 # Taffy + Parley + Fontations
-taffy = { git = "https://github.com/DioxusLabs/taffy", rev = "2d936b7701f64b0fe95e50f1bfdcfc65a9f88f6f", default-features = false, features = [
+taffy = { git = "https://github.com/DioxusLabs/taffy", rev = "243d109c", default-features = false, features = [
     "std",
     "flexbox",
     "flexbox_balance",
     "grid",
+    "grid_lanes",
     "block_layout",
     "content_size",
     "calc",
@@ -326,3 +327,17 @@ rustc-hash = { workspace = true }
 # [patch."https://github.com/linebender/parley"]
 # parley = { path = "../parley/parley" }
 # fontique = { path = "../parley/fontique" }
+
+[patch.crates-io]
+# Stylo with grid-lanes-direction and flow-tolerance (servo/stylo PR pending)
+stylo = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+stylo_traits = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+stylo_atoms = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+stylo_static_prefs = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+stylo_dom = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+stylo_derive = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+stylo_malloc_size_of = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+selectors = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+servo_arc = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+to_shmem = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }
+to_shmem_derive = { git = "https://github.com/DioxusLabs/stylo", rev = "ee927b58c0ddb84c1f8eb7e4abe669d69ed3f345" }

packages/blitz-dom/src/document.rs

@@ -394,6 +394,7 @@ impl BaseDocument {
 
         // Make sure we turn on stylo features *before* creating the Stylist
         style_config::set_pref!("layout.grid.enabled", true);
+        style_config::set_pref!("layout.css.display-grid-lanes.enabled", true);
         style_config::set_pref!("layout.flexbox.balance", true);
         style_config::set_pref!("layout.unimplemented", true);
         style_config::set_pref!("layout.columns.enabled", true);

packages/blitz-dom/src/layout/construct.rs

@@ -531,7 +531,7 @@ fn collect_layout_children_with_wrap(
             // parent, recursing only through nested contents nodes.
             push_hoisted_children_and_pseudos(doc, container_node_id, out, wrap);
         }
-        DisplayInside::Flex | DisplayInside::Grid => {
+        DisplayInside::Flex | DisplayInside::Grid | DisplayInside::GridLanes => {
             // ::before/::after pseudos must be checked too: a pseudo with
             // display:contents hoists its text content into the container.
             let container = &doc.nodes[container_node_id];

packages/blitz-dom/src/layout/mod.rs

@@ -18,8 +18,8 @@ use taffy::{
     AxisStaticEdge, AxisStaticPosition, BlockContext, CoreStyle as _, DetailedLayoutInfo,
     FlexDirection, LayoutContainingBlock, LayoutPartialTree, MaybeMath as _, NodeId, OofCandidate,
     ResolveOrZero, RoundTree, RunMode, TraversePartialTree, TraverseTree, compute_block_layout,
-    compute_cached_layout, compute_flexbox_layout, compute_grid_layout, compute_leaf_layout,
-    compute_oof_layout, prelude::*,
+    compute_cached_layout, compute_flexbox_layout, compute_grid_lanes_layout, compute_grid_layout,
+    compute_leaf_layout, compute_oof_layout, prelude::*,
 };
 
 pub(crate) mod construct;
@@ -595,6 +595,7 @@ impl LayoutPassState<'_> {
                         compute_flexbox_layout(self, node_id, inputs)
                     }
                     Display::Grid => compute_grid_layout(self, node_id, inputs),
+                    Display::GridLanes => compute_grid_lanes_layout(self, node_id, inputs),
                     Display::None => taffy::LayoutOutput::HIDDEN,
                 }
             }
@@ -926,6 +927,7 @@ impl PrintTree for TaffyDebugTree<'_> {
                         FlexDirection::Column | FlexDirection::ColumnReverse => "FLEX COL",
                     },
                     Display::Grid => "GRID",
+                    Display::GridLanes => "GRID LANES",
                     Display::Block => "BLOCK",
                     Display::FlowRoot => "FLOW ROOT",
                     Display::None => "NONE",

packages/blitz-dom/src/layout/table.rs

@@ -738,7 +738,8 @@ fn collect_table_cells(
         DisplayInside::Flow
         | DisplayInside::FlowRoot
         | DisplayInside::Flex
-        | DisplayInside::Grid => {
+        | DisplayInside::Grid
+        | DisplayInside::GridLanes => {
             node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
             // Probably a table caption: ignore
             // println!(

packages/blitz-dom/src/resolved_style.rs

@@ -412,7 +412,10 @@ impl BaseDocument {
                 }
             }
             "grid-template-columns" | "grid-template-rows"
-                if display.inside() == DisplayInside::Grid =>
+                if matches!(
+                    display.inside(),
+                    DisplayInside::Grid | DisplayInside::GridLanes
+                ) =>
             {
                 if let Some(info) =
                     node.element_data()
@@ -431,7 +434,12 @@ impl BaseDocument {
             // Browsers serialize the `grid-template` shorthand from the computed
             // track lists, except that a `none` track list on a grid container
             // is replaced by the used (implicit) track sizes.
-            "grid-template" if display.inside() == DisplayInside::Grid => {
+            "grid-template"
+                if matches!(
+                    display.inside(),
+                    DisplayInside::Grid | DisplayInside::GridLanes
+                ) =>
+            {
                 let pos_styles = styles.get_position();
                 let rows_are_none =
                     matches!(pos_styles.grid_template_rows, GridTemplateComponent::None);

packages/blitz-paint/src/render.rs

@@ -1215,7 +1215,9 @@ impl ElementCx<'_, '_> {
                     Color::new([1.0, 0.0, 0.0, 1.0])
                 }
                 taffy::Display::Flex => Color::new([0.0, 1.0, 0.0, 1.0]),
-                taffy::Display::Grid => Color::new([0.0, 0.0, 1.0, 1.0]),
+                taffy::Display::Grid | taffy::Display::GridLanes => {
+                    Color::new([0.0, 0.0, 1.0, 1.0])
+                }
                 taffy::Display::None => Color::new([0.0, 0.0, 1.0, 1.0]),
             };
 

packages/stylo_taffy/Cargo.toml

@@ -18,11 +18,12 @@ style = { workspace = true }
 style_atoms = { workspace = true }
 
 [features]
-default = ["std", "block", "flexbox", "grid"]
+default = ["std", "block", "flexbox", "grid", "grid-lanes"]
 std = ["taffy/std"]
 block = ["taffy/block_layout"]
 flexbox = ["taffy/flexbox", "taffy/flexbox_balance"]
 grid = ["taffy/grid"]
+grid-lanes = ["grid", "taffy/grid_lanes"]
 floats = ["taffy/float_layout"]
 # Frame-aware style getters for CSS vertical writing modes (transposes physical styles into Taffy's
 # inline/block axes). Off by default: every getter is the plain physical mapping.

packages/stylo_taffy/src/convert.rs

@@ -50,6 +50,8 @@ pub(crate) mod stylo {
     pub(crate) use style::values::computed::text::TextAlign;
     #[cfg(feature = "block")]
     pub(crate) use style::values::computed::{AlignmentBaseline, BaselineShift};
+    #[cfg(feature = "grid-lanes")]
+    pub(crate) use style::values::computed::{GridLanesDirection, length::FitTolerance};
     #[cfg(feature = "block")]
     pub(crate) use style::values::generics::box_::BaselineShiftKeyword;
     #[cfg(feature = "grid")]
@@ -219,6 +221,8 @@ pub fn display(input: stylo::Display) -> taffy::Display {
         stylo::DisplayInside::Flex => taffy::Display::Flex,
         #[cfg(feature = "grid")]
         stylo::DisplayInside::Grid => taffy::Display::Grid,
+        #[cfg(feature = "grid-lanes")]
+        stylo::DisplayInside::GridLanes => taffy::Display::GridLanes,
         #[cfg(feature = "block")]
         stylo::DisplayInside::Flow => taffy::Display::Block,
         #[cfg(feature = "block")]
@@ -709,6 +713,45 @@ pub fn clear(input: stylo::Clear) -> taffy::Clear {
 // CSS Grid styles
 // ===============
 
+#[inline]
+#[cfg(feature = "grid-lanes")]
+/// Resolves `grid-lanes-direction`. `normal` establishes rows only when `grid-template-columns`
+/// is `none` and `grid-template-rows` is not (css-grid-3 §2.3).
+pub fn grid_lanes_direction(
+    position: &style::properties::style_structs::Position,
+) -> taffy::GridLanesDirection {
+    match position.grid_lanes_direction {
+        stylo::GridLanesDirection::Row => taffy::GridLanesDirection::Row,
+        stylo::GridLanesDirection::Column => taffy::GridLanesDirection::Column,
+        stylo::GridLanesDirection::Normal => {
+            let columns_none = matches!(
+                position.grid_template_columns,
+                stylo::GenericGridTemplateComponent::None
+            );
+            let rows_none = matches!(
+                position.grid_template_rows,
+                stylo::GenericGridTemplateComponent::None
+            );
+            if columns_none && !rows_none {
+                taffy::GridLanesDirection::Row
+            } else {
+                taffy::GridLanesDirection::Column
+            }
+        }
+    }
+}
+
+/// `normal` is 1em (css-grid-3 §4.2), so the container's font size is resolved here.
+#[inline]
+#[cfg(feature = "grid-lanes")]
+pub fn fit_tolerance(input: &stylo::FitTolerance, font_size: f32) -> taffy::LengthPercentage {
+    match input {
+        stylo::FitTolerance::Normal => taffy::LengthPercentage::length(font_size),
+        stylo::FitTolerance::LengthPercentage(lp) => length_percentage(&lp.0),
+        stylo::FitTolerance::Infinite => taffy::LengthPercentage::length(f32::INFINITY),
+    }
+}
+
 #[inline]
 #[cfg(feature = "grid")]
 pub fn grid_auto_flow(input: stylo::GridAutoFlow) -> taffy::GridAutoFlow {
@@ -776,9 +819,8 @@ pub fn grid_template_tracks(
             })
             .collect(),
 
-        // TODO: Implement subgrid and masonry
+        // TODO: Implement subgrid
         stylo::GenericGridTemplateComponent::Subgrid(_) => Vec::new(),
-        stylo::GenericGridTemplateComponent::Masonry => Vec::new(),
     }
 }
 
@@ -793,9 +835,8 @@ pub fn grid_template_line_names(
             Some(crate::wrapper::StyloLineNameIter::new(&list.line_names))
         }
 
-        // TODO: Implement subgrid and masonry
+        // TODO: Implement subgrid
         stylo::GenericGridTemplateComponent::Subgrid(_) => None,
-        stylo::GenericGridTemplateComponent::Masonry => None,
     }
 }
 
@@ -1037,6 +1078,13 @@ pub fn to_taffy_style(style: &stylo::ComputedValues) -> taffy::Style<Atom> {
         // Grid
         #[cfg(feature = "grid")]
         grid_auto_flow: self::grid_auto_flow(pos.grid_auto_flow),
+        #[cfg(feature = "grid-lanes")]
+        grid_lanes_direction: grid_lanes_direction(pos),
+        #[cfg(feature = "grid-lanes")]
+        fit_tolerance: fit_tolerance(
+            &style.clone_fit_tolerance(),
+            style.clone_font_size().used_size().px(),
+        ),
         #[cfg(feature = "grid")]
         grid_template_rows: self::grid_template_tracks(&pos.grid_template_rows),
         #[cfg(feature = "grid")]