Browse Source

Basic support for grid-auto-flow, grid-auto-columns and grid-auto-rows in CSS API

This contibutes to #895
pull/927/head
Shagen Ogandzhanian 3 years ago
parent
commit
2536c29766
  1. 9
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSEnums.kt
  2. 15
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
  3. 51
      web/core/src/jsTest/kotlin/css/GridTests.kt

9
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>()
}

15
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)

51
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 {
@ -600,3 +632,20 @@ class GridGapTests {
}
}
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)
}
}
Loading…
Cancel
Save