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 index d3d53763ef..4cbdd24652 100644 --- 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() + + +object GridAutoFlow : StylePropertyString { + inline val Row get() = "row".unsafeCast() + inline val Column get() = "column".unsafeCast() + inline val Dense get() = "dense".unsafeCast() + inline val RowDense get() = "row dense".unsafeCast() + inline val ColumnDense get() = "column dense".unsafeCast() +} \ No newline at end of file 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 beba429d75..c064bceadc 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 @@ -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 index cf4b1131e4..fa1340985c 100644 --- 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) + } } \ No newline at end of file