From ac7974d0561689a77b0121b845a9287ed60a25b3 Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Tue, 20 Jul 2021 14:40:57 +0200
Subject: [PATCH] Introduce minimal support for "grid-template-columns" and
 "grid-template-rows" in CSS API

---
 .../compose/web/css/properties/grid.kt        | 11 ++++++
 web/core/src/jsTest/kotlin/css/GridTests.kt   | 36 +++++++++++++++++++
 2 files changed, 47 insertions(+)

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
index ae781a9be4..79c96c236f 100644
--- 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
@@ -47,3 +47,14 @@ fun StyleBuilder.gridRow(start: Int, end: String) {
 fun StyleBuilder.gridRow(start: Int, end: Int) {
     property("grid-row", "$start / $end")
 }
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+fun StyleBuilder.gridTemplateColumns(value: String) {
+    property("grid-template-columns", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+fun StyleBuilder.gridTemplateRows(value: String) {
+    property("grid-template-rows", value)
+}
+
diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt
index fc2d1ab77a..2046dc4d4d 100644
--- a/web/core/src/jsTest/kotlin/css/GridTests.kt
+++ b/web/core/src/jsTest/kotlin/css/GridTests.kt
@@ -8,6 +8,8 @@ package org.jetbrains.compose.web.core.tests.css
 import org.jetbrains.compose.web.core.tests.runTest
 import org.jetbrains.compose.web.css.gridColumn
 import org.jetbrains.compose.web.css.gridRow
+import org.jetbrains.compose.web.css.gridTemplateColumns
+import org.jetbrains.compose.web.css.gridTemplateRows
 import org.jetbrains.compose.web.dom.Div
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
@@ -127,4 +129,38 @@ class GridRawTests {
         assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridRowStart)
         assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridRowStart)
     }
+}
+
+class GridTemplateRows {
+    @Test
+    fun gridTemplateRawsGlobalValues() = runTest {
+        composition {
+            Div({ style { gridTemplateRows("inherit") } })
+            Div({ style { gridTemplateRows("initial") } })
+            Div({ style { gridTemplateRows("revert") } })
+            Div({ style { gridTemplateRows("unset") } })
+        }
+
+        assertEquals("inherit", (root.children[0] as HTMLElement).style.asDynamic().gridTemplateRows)
+        assertEquals("initial", (root.children[1] as HTMLElement).style.asDynamic().gridTemplateRows)
+        assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridTemplateRows)
+        assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridTemplateRows)
+    }
+}
+
+class GridTemplateColumns {
+    @Test
+    fun gridTemplateColumnsGlobalValues() = runTest {
+        composition {
+            Div({ style { gridTemplateColumns("inherit") } })
+            Div({ style { gridTemplateColumns("initial") } })
+            Div({ style { gridTemplateColumns("revert") } })
+            Div({ style { gridTemplateColumns("unset") } })
+        }
+
+        assertEquals("inherit", (root.children[0] as HTMLElement).style.asDynamic().gridTemplateColumns)
+        assertEquals("initial", (root.children[1] as HTMLElement).style.asDynamic().gridTemplateColumns)
+        assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridTemplateColumns)
+        assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridTemplateColumns)
+    }
 }
\ No newline at end of file