Introduce basic support for grid-column/row-start/end

This contributes to #895
JetBrains · Jul 21, 2021 · 636694a · 636694a
1 parent f4f53d6
commit 636694a
Show file tree

Hide file tree

Showing 2 changed files with 189 additions and 0 deletions.
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
@@ -27,6 +27,24 @@ fun StyleBuilder.gridColumn(start: Int, end: Int) {
 }
 
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start
+fun StyleBuilder.gridColumnStart(value: String) {
+    property("grid-column-start", value)
+}
+
+fun StyleBuilder.gridColumnStart(value: Int) {
+    property("grid-column-start", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end
+fun StyleBuilder.gridColumnEnd(value: String) {
+    property("grid-column-end", value)
+}
+
+fun StyleBuilder.gridColumnEnd(value: Int) {
+    property("grid-column-end", value)
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
 fun StyleBuilder.gridRow(value: String) {
     property("grid-row", value)
@@ -48,6 +66,24 @@ fun StyleBuilder.gridRow(start: Int, end: Int) {
     property("grid-row", "$start / $end")
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start
+fun StyleBuilder.gridRowStart(value: String) {
+    property("grid-row-start", value)
+}
+
+fun StyleBuilder.gridRowStart(value: Int) {
+    property("grid-row-start", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end
+fun StyleBuilder.gridRowEnd(value: String) {
+    property("grid-row-end", value)
+}
+
+fun StyleBuilder.gridRowEnd(value: Int) {
+    property("grid-row-end", value)
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
 fun StyleBuilder.gridTemplateColumns(value: String) {
     property("grid-template-columns", value)

diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt
@@ -63,6 +63,159 @@ class GridColumnTests {
     }
 }
 
+class GridColumnEndTests {
+    @Test
+    fun gridColumnEndOneValue() = runTest {
+        composition {
+            Div({ style { gridColumnEnd("1") } })
+            Div({ style { gridColumnEnd("somegridarea") } })
+        }
+
+        assertEquals("1", nextChild().style.asDynamic().gridColumnEnd)
+        assertEquals("somegridarea", nextChild().style.asDynamic().gridColumnEnd)
+    }
+
+    @Test
+    fun gridColumnEndIntValue() = runTest {
+        composition {
+            Div({ style { gridColumnEnd(-4) } })
+        }
+
+        val el = nextChild().style.asDynamic()
+        assertEquals("-4", el.gridColumnEnd)
+    }
+
+    @Test
+    fun gridColumnEndGlobalValues() = runTest {
+        composition {
+            Div({ style { gridColumn("inherit") } })
+            Div({ style { gridColumn("initial") } })
+            Div({ style { gridColumn("revert") } })
+            Div({ style { gridColumn("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridColumnEnd)
+        assertEquals("initial", nextChild().style.asDynamic().gridColumnEnd)
+        assertEquals("revert", nextChild().style.asDynamic().gridColumnEnd)
+        assertEquals("unset", nextChild().style.asDynamic().gridColumnEnd)
+    }
+}
+
+class GridColumnStartTests {
+    @Test
+    fun gridColumnStartOneValue() = runTest {
+        composition {
+            Div({ style { gridColumnStart("1") } })
+            Div({ style { gridColumnStart("somegridarea") } })
+        }
+
+        assertEquals("1", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("somegridarea", nextChild().style.asDynamic().gridColumnStart)
+    }
+
+    @Test
+    fun gridColumnStartIntValue() = runTest {
+        composition {
+            Div({ style { gridColumnStart(-4) } })
+        }
+
+        val el = nextChild().style.asDynamic()
+        assertEquals("-4", el.gridColumnStart)
+    }
+
+    @Test
+    fun gridColumnStartGlobalValues() = runTest {
+        composition {
+            Div({ style { gridColumn("inherit") } })
+            Div({ style { gridColumn("initial") } })
+            Div({ style { gridColumn("revert") } })
+            Div({ style { gridColumn("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("initial", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("revert", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("unset", nextChild().style.asDynamic().gridColumnStart)
+    }
+}
+
+class GridRowStartTests {
+    @Test
+    fun gridRowStartOneValue() = runTest {
+        composition {
+            Div({ style { gridRowStart("1") } })
+            Div({ style { gridRowStart("somegridarea") } })
+        }
+
+        assertEquals("1", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("somegridarea", nextChild().style.asDynamic().gridRowStart)
+    }
+
+    @Test
+    fun gridRowStartIntValue() = runTest {
+        composition {
+            Div({ style { gridRowStart(-4) } })
+        }
+
+        val el = nextChild().style.asDynamic()
+        assertEquals("-4", el.gridRowStart)
+    }
+
+    @Test
+    fun gridRowStartGlobalValues() = runTest {
+        composition {
+            Div({ style { gridRow("inherit") } })
+            Div({ style { gridRow("initial") } })
+            Div({ style { gridRow("revert") } })
+            Div({ style { gridRow("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("initial", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("revert", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("unset", nextChild().style.asDynamic().gridRowStart)
+    }
+}
+
+class GridRowEndTests {
+    @Test
+    fun gridRowEndOneValue() = runTest {
+        composition {
+            Div({ style { gridRowEnd("1") } })
+            Div({ style { gridRowEnd("somegridarea") } })
+        }
+
+        assertEquals("1", nextChild().style.asDynamic().gridRowEnd)
+        assertEquals("somegridarea", nextChild().style.asDynamic().gridRowEnd)
+    }
+
+    @Test
+    fun gridRowEndIntValue() = runTest {
+        composition {
+            Div({ style { gridRowEnd(-4) } })
+        }
+
+        val el = nextChild().style.asDynamic()
+        assertEquals("-4", el.gridRowEnd)
+    }
+
+    @Test
+    fun gridRowEndGlobalValues() = runTest {
+        composition {
+            Div({ style { gridRow("inherit") } })
+            Div({ style { gridRow("initial") } })
+            Div({ style { gridRow("revert") } })
+            Div({ style { gridRow("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridRowEnd)
+        assertEquals("initial", nextChild().style.asDynamic().gridRowEnd)
+        assertEquals("revert", nextChild().style.asDynamic().gridRowEnd)
+        assertEquals("unset", nextChild().style.asDynamic().gridRowEnd)
+    }
+}
+
+
 class GridRawTests {
 
     @Test