Browse Source

Introduce minimal support for "grid-template-columns" and "grid-template-rows" in CSS API

pull/883/merge
Shagen Ogandzhanian 3 years ago
parent
commit
ac7974d056
  1. 11
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
  2. 36
      web/core/src/jsTest/kotlin/css/GridTests.kt

11
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) { fun StyleBuilder.gridRow(start: Int, end: Int) {
property("grid-row", "$start / $end") 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)
}

36
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.core.tests.runTest
import org.jetbrains.compose.web.css.gridColumn import org.jetbrains.compose.web.css.gridColumn
import org.jetbrains.compose.web.css.gridRow 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.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLElement
import org.w3c.dom.get import org.w3c.dom.get
@ -127,4 +129,38 @@ class GridRawTests {
assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridRowStart) assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridRowStart)
assertEquals("unset", (root.children[3] 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)
}
} }
Loading…
Cancel
Save