Browse Source

Introduce basic support for grid-area in CSS API

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

18
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt

@ -58,3 +58,21 @@ fun StyleBuilder.gridTemplateRows(value: String) {
property("grid-template-rows", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
fun StyleBuilder.gridArea(rowStart: String) {
property("grid-area", rowStart)
}
fun StyleBuilder.gridArea(rowStart: String, columnStart: String) {
property("grid-area", "$rowStart / $columnStart")
}
fun StyleBuilder.gridArea(rowStart: String, columnStart: String, rowEnd: String) {
property("grid-area", "$rowStart / $columnStart / $rowEnd")
}
fun StyleBuilder.gridArea(rowStart: String, columnStart: String, rowEnd: String, columnEnd: String) {
property("grid-area", "$rowStart / $columnStart / $rowEnd / $columnEnd")
}

54
web/core/src/jsTest/kotlin/css/GridTests.kt

@ -6,10 +6,7 @@
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.css.*
import org.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLElement
import org.w3c.dom.get
@ -131,7 +128,7 @@ class GridRawTests {
}
}
class GridTemplateRows {
class GridTemplateRowsTests {
@Test
fun gridTemplateRawsGlobalValues() = runTest {
composition {
@ -148,7 +145,7 @@ class GridTemplateRows {
}
}
class GridTemplateColumns {
class GridTemplateColumnsTests {
@Test
fun gridTemplateColumnsGlobalValues() = runTest {
composition {
@ -164,3 +161,48 @@ class GridTemplateColumns {
assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridTemplateColumns)
}
}
class GridAreaTests {
@Test
fun gridAreaOneValue() = runTest {
composition {
Div({ style { gridArea("span 3") } })
}
assertEquals("span 3", (root.children[0] as HTMLElement).style.asDynamic().gridRowStart)
}
@Test
fun gridAreaTwoValues() = runTest {
composition {
Div({ style { gridArea("some-grid-area", "another-grid-area") } })
}
val el = root.children[0] as HTMLElement
assertEquals("some-grid-area", el.style.asDynamic().gridRowStart)
assertEquals("another-grid-area", el.style.asDynamic().gridColumnStart)
}
@Test
fun gridAreaThreeValues() = runTest {
composition {
Div({ style { gridArea("some-grid-area", "another-grid-area", "yet-another-grid-area") } })
}
val el = root.children[0] as HTMLElement
assertEquals("some-grid-area", el.style.asDynamic().gridRowStart)
assertEquals("another-grid-area", el.style.asDynamic().gridColumnStart)
assertEquals("yet-another-grid-area", el.style.asDynamic().gridRowEnd)
}
@Test
fun gridAreaFourValues() = runTest {
composition {
Div({ style { gridArea("2 span", "another-grid-area span", "span 3", "2 span") } })
}
val el = root.children[0] as HTMLElement
assertEquals("span 2 / span another-grid-area / span 3 / span 2", el.style.asDynamic().gridArea)
}
}
Loading…
Cancel
Save