Merge pull request #1640 from Textualize/fix-1406

Correct the dimension relative units in grid-rows/columns were assigned to

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.11.0] - Unreleased
+
+### Fixed
+
+- Fixed relative units in `grid-rows` and `grid-columns` being computed with respect to the wrong dimension https://github.com/Textualize/textual/issues/1406
+
 ## [0.10.1] - 2023-01-20
 
 ### Added

src/textual/css/_style_properties.py

@@ -202,6 +202,9 @@ class ScalarProperty:
 
 
 class ScalarListProperty:
+    def __init__(self, percent_unit: Unit) -> None:
+        self.percent_unit = percent_unit
+
     def __set_name__(self, owner: Styles, name: str) -> None:
         self.name = name
 
@@ -229,7 +232,7 @@ class ScalarListProperty:
                 scalars.append(Scalar.from_number(parse_value))
             else:
                 scalars.append(
-                    Scalar.parse(parse_value)
+                    Scalar.parse(parse_value, self.percent_unit)
                     if isinstance(parse_value, str)
                     else parse_value
                 )

src/textual/css/_styles_builder.py

@@ -865,16 +865,12 @@ class StylesBuilder:
 
     def _process_grid_rows_or_columns(self, name: str, tokens: list[Token]) -> None:
         scalars: list[Scalar] = []
+        percent_unit = Unit.WIDTH if name == "grid-columns" else Unit.HEIGHT
         for token in tokens:
             if token.name == "number":
                 scalars.append(Scalar.from_number(float(token.value)))
             elif token.name == "scalar":
-                scalars.append(
-                    Scalar.parse(
-                        token.value,
-                        percent_unit=Unit.WIDTH if name == "rows" else Unit.HEIGHT,
-                    )
-                )
+                scalars.append(Scalar.parse(token.value, percent_unit=percent_unit))
             else:
                 self.error(
                     name,

src/textual/css/styles.py

@@ -277,8 +277,8 @@ class StylesBase(ABC):
     content_align_vertical = StringEnumProperty(VALID_ALIGN_VERTICAL, "top")
     content_align = AlignProperty()
 
-    grid_rows = ScalarListProperty()
-    grid_columns = ScalarListProperty()
+    grid_rows = ScalarListProperty(percent_unit=Unit.HEIGHT)
+    grid_columns = ScalarListProperty(percent_unit=Unit.WIDTH)
 
     grid_size_columns = IntegerProperty(default=1, layout=True)
     grid_size_rows = IntegerProperty(default=0, layout=True)

tests/css/test_grid_rows_columns_relative_units.py

@@ -0,0 +1,42 @@
+"""
+Regression tests for #1406 https://github.com/Textualize/textual/issues/1406
+
+The scalars in grid-rows and grid-columns were not aware of the dimension
+they should be relative to.
+"""
+
+from textual.css.parse import parse_declarations
+from textual.css.scalar import Unit
+from textual.css.styles import Styles
+
+
+def test_grid_rows_columns_relative_units_are_correct():
+    """Ensure correct relative dimensions for programmatic assignments."""
+
+    styles = Styles()
+
+    styles.grid_columns = "1fr 5%"
+    fr, percent = styles.grid_columns
+    assert fr.percent_unit == Unit.WIDTH
+    assert percent.percent_unit == Unit.WIDTH
+
+    styles.grid_rows = "1fr 5%"
+    fr, percent = styles.grid_rows
+    assert fr.percent_unit == Unit.HEIGHT
+    assert percent.percent_unit == Unit.HEIGHT
+
+
+def test_styles_builder_uses_correct_relative_units_grid_rows_columns():
+    """Ensure correct relative dimensions for CSS parsed from files."""
+
+    CSS = "grid-rows: 1fr 5%; grid-columns: 1fr 5%;"
+
+    styles = parse_declarations(CSS, "test")
+
+    fr, percent = styles.grid_columns
+    assert fr.percent_unit == Unit.WIDTH
+    assert percent.percent_unit == Unit.WIDTH
+
+    fr, percent = styles.grid_rows
+    assert fr.percent_unit == Unit.HEIGHT
+    assert percent.percent_unit == Unit.HEIGHT