Basic support for grid-auto-flow, grid-auto-columns and grid-auto-row…

…s in CSS API This contibutes to #895
JetBrains · Jul 22, 2021 · 2536c29 · 2536c29
1 parent e071b28
commit 2536c29
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 1 deletion.
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSEnums.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSEnums.kt
@@ -252,3 +252,12 @@ interface AnimationPlayState: StylePropertyEnum {
     }
 }
 inline fun AnimationPlayState(value: String) = value.unsafeCast<AnimationPlayState>()
+
+
+object GridAutoFlow : StylePropertyString  {
+    inline val Row get() = "row".unsafeCast<GridAutoFlow>()
+    inline val Column get() = "column".unsafeCast<GridAutoFlow>()
+    inline val Dense get() = "dense".unsafeCast<GridAutoFlow>()
+    inline val RowDense get() = "row dense".unsafeCast<GridAutoFlow>()
+    inline val ColumnDense get() = "column dense".unsafeCast<GridAutoFlow>()
+}
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
@@ -89,11 +89,26 @@ fun StyleBuilder.gridTemplateColumns(value: String) {
     property("grid-template-columns", value)
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
+fun StyleBuilder.gridAutoColumns(value: String) {
+    property("grid-auto-columns", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+fun StyleBuilder.gridAutoFlow(value: GridAutoFlow) {
+    property("grid-auto-flow", value)
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
 fun StyleBuilder.gridTemplateRows(value: String) {
     property("grid-template-rows", value)
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
+fun StyleBuilder.gridAutoRows(value: String) {
+    property("grid-auto-rows", value)
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
 fun StyleBuilder.gridArea(rowStart: String) {
     property("grid-area", rowStart)

diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt
@@ -9,6 +9,7 @@ import androidx.compose.runtime.compositionLocalOf
 import org.jetbrains.compose.web.core.tests.runTest
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
+import kotlin.js.Json
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
@@ -282,7 +283,7 @@ class GridRawTests {
 
 class GridTemplateRowsTests {
     @Test
-    fun gridTemplateRawsGlobalValues() = runTest {
+    fun gridTemplateRowsGlobalValues() = runTest {
         composition {
             Div({ style { gridTemplateRows("inherit") } })
             Div({ style { gridTemplateRows("initial") } })
@@ -295,6 +296,22 @@ class GridTemplateRowsTests {
         assertEquals("revert", nextChild().style.asDynamic().gridTemplateRows)
         assertEquals("unset", nextChild().style.asDynamic().gridTemplateRows)
     }
+
+    @Test
+    fun gridAutoRowsGlobalValues() = runTest {
+        composition {
+            Div({ style { gridAutoRows("inherit") } })
+            Div({ style { gridAutoRows("initial") } })
+            Div({ style { gridAutoRows("revert") } })
+            Div({ style { gridAutoRows("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridAutoRows)
+        assertEquals("initial", nextChild().style.asDynamic().gridAutoRows)
+        assertEquals("revert", nextChild().style.asDynamic().gridAutoRows)
+        assertEquals("unset", nextChild().style.asDynamic().gridAutoRows)
+    }
+
 }
 
 class GridTemplateColumnsTests {
@@ -312,6 +329,21 @@ class GridTemplateColumnsTests {
         assertEquals("revert", nextChild().style.asDynamic().gridTemplateColumns)
         assertEquals("unset", nextChild().style.asDynamic().gridTemplateColumns)
     }
+
+    @Test
+    fun gridAutoColumnsGlobalValues() = runTest {
+        composition {
+            Div({ style { gridAutoColumns("inherit") } })
+            Div({ style { gridAutoColumns("initial") } })
+            Div({ style { gridAutoColumns("revert") } })
+            Div({ style { gridAutoColumns("unset") } })
+        }
+
+        assertEquals("inherit", nextChild().style.asDynamic().gridAutoColumns)
+        assertEquals("initial", nextChild().style.asDynamic().gridAutoColumns)
+        assertEquals("revert", nextChild().style.asDynamic().gridAutoColumns)
+        assertEquals("unset", nextChild().style.asDynamic().gridAutoColumns)
+    }
 }
 
 class GridAreaTests {
@@ -599,4 +631,21 @@ class GridGapTests {
         assertEquals("20px 30%", nextChild().style.asDynamic().gap)
     }
 
+}
+
+class GridAutoFlowTests {
+    @Test
+    fun gridAutoFlowKeywords() = runTest {
+        composition {
+            Div({ style { gridAutoFlow(GridAutoFlow.Column) } })
+            Div({ style { gridAutoFlow(GridAutoFlow.ColumnDense) } })
+            Div({ style { gridAutoFlow(GridAutoFlow.Dense) } })
+            Div({ style { gridAutoFlow(GridAutoFlow.Row) } })
+        }
+
+        assertEquals("column", nextChild().style.asDynamic().gridAutoFlow)
+        assertEquals("column dense", nextChild().style.asDynamic().gridAutoFlow)
+        assertEquals("dense", nextChild().style.asDynamic().gridAutoFlow)
+        assertEquals("row", nextChild().style.asDynamic().gridAutoFlow)
+    }
 }