Browse Source

Introduce minimal support of alignSelf, justifySelf, alignItems, justifyItems, gap in CSS API

pull/927/head
Shagen Ogandzhanian 3 years ago
parent
commit
4c6388f995
  1. 46
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
  2. 232
      web/core/src/jsTest/kotlin/css/GridTests.kt

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

@ -116,3 +116,49 @@ fun StyleBuilder.gridTemplateAreas(vararg rows: String) {
property("grid-template-areas", rows.joinToString(" ") { "\"$it\"" }) property("grid-template-areas", rows.joinToString(" ") { "\"$it\"" })
} }
// https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
fun StyleBuilder.justifySelf(value: String) {
property("justify-self", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
fun StyleBuilder.justifyItems(value: String) {
property("justify-items", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
fun StyleBuilder.alignSelf(value: String) {
property("align-self", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
fun StyleBuilder.alignItems(value: String) {
property("align-items", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
fun StyleBuilder.placeSelf(value: String) {
property("place-self", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
fun StyleBuilder.rowGap(value: CSSNumeric) {
property("row-gap", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
fun StyleBuilder.columnGap(value: CSSNumeric) {
property("column-gap", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/gap
fun StyleBuilder.gap(value: CSSNumeric) {
property("gap", value)
}
fun StyleBuilder.gap(rowGap: CSSNumeric, columnGap: CSSNumeric) {
property("gap", "$rowGap $columnGap")
}

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

@ -5,6 +5,7 @@
package org.jetbrains.compose.web.core.tests.css package org.jetbrains.compose.web.core.tests.css
import androidx.compose.runtime.compositionLocalOf
import org.jetbrains.compose.web.core.tests.runTest import org.jetbrains.compose.web.core.tests.runTest
import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Div
@ -368,3 +369,234 @@ class GridTemplateAreasTests {
assertEquals("\"head head\" \"nav main\" \"nav foot\"", nextChild().style.asDynamic().gridTemplateAreas) assertEquals("\"head head\" \"nav main\" \"nav foot\"", nextChild().style.asDynamic().gridTemplateAreas)
} }
} }
class GridJustifyTests {
@Test
fun justifySelf() = runTest {
composition {
Div({ style { justifySelf("auto") } })
Div({ style { justifySelf("normal") } })
Div({ style { justifySelf("stretch") } })
Div({ style { justifySelf("center") } })
Div({ style { justifySelf("start") } })
Div({ style { justifySelf("end") } })
Div({ style { justifySelf("flex-start") } })
Div({ style { justifySelf("flex-end") } })
Div({ style { justifySelf("self-start") } })
Div({ style { justifySelf("self-end") } })
Div({ style { justifySelf("left") } })
Div({ style { justifySelf("right") } })
Div({ style { justifySelf("baseline") } })
Div({ style { justifySelf("safe center") } })
Div({ style { justifySelf("unsafe center") } })
Div({ style { justifySelf("inherit") } })
Div({ style { justifySelf("initial") } })
Div({ style { justifySelf("revert") } })
Div({ style { justifySelf("unset") } })
}
assertEquals("auto", nextChild().style.asDynamic().justifySelf)
assertEquals("normal", nextChild().style.asDynamic().justifySelf)
assertEquals("stretch", nextChild().style.asDynamic().justifySelf)
assertEquals("center", nextChild().style.asDynamic().justifySelf)
assertEquals("start", nextChild().style.asDynamic().justifySelf)
assertEquals("end", nextChild().style.asDynamic().justifySelf)
assertEquals("flex-start", nextChild().style.asDynamic().justifySelf)
assertEquals("flex-end", nextChild().style.asDynamic().justifySelf)
assertEquals("self-start", nextChild().style.asDynamic().justifySelf)
assertEquals("self-end", nextChild().style.asDynamic().justifySelf)
assertEquals("left", nextChild().style.asDynamic().justifySelf)
assertEquals("right", nextChild().style.asDynamic().justifySelf)
assertEquals("baseline", nextChild().style.asDynamic().justifySelf)
assertEquals("safe center", nextChild().style.asDynamic().justifySelf)
assertEquals("unsafe center", nextChild().style.asDynamic().justifySelf)
assertEquals("inherit", nextChild().style.asDynamic().justifySelf)
assertEquals("initial", nextChild().style.asDynamic().justifySelf)
assertEquals("revert", nextChild().style.asDynamic().justifySelf)
assertEquals("unset", nextChild().style.asDynamic().justifySelf)
}
@Test
fun justifyItems() = runTest {
composition {
Div({ style { justifyItems("normal") } })
Div({ style { justifyItems("stretch") } })
Div({ style { justifyItems("center") } })
Div({ style { justifyItems("start") } })
Div({ style { justifyItems("end") } })
Div({ style { justifyItems("flex-start") } })
Div({ style { justifyItems("flex-end") } })
Div({ style { justifyItems("self-start") } })
Div({ style { justifyItems("self-end") } })
Div({ style { justifyItems("left") } })
Div({ style { justifyItems("right") } })
Div({ style { justifyItems("baseline") } })
Div({ style { justifyItems("safe center") } })
Div({ style { justifyItems("unsafe center") } })
Div({ style { justifyItems("inherit") } })
Div({ style { justifyItems("initial") } })
Div({ style { justifyItems("revert") } })
Div({ style { justifyItems("unset") } })
}
assertEquals("normal", nextChild().style.asDynamic().justifyItems)
assertEquals("stretch", nextChild().style.asDynamic().justifyItems)
assertEquals("center", nextChild().style.asDynamic().justifyItems)
assertEquals("start", nextChild().style.asDynamic().justifyItems)
assertEquals("end", nextChild().style.asDynamic().justifyItems)
assertEquals("flex-start", nextChild().style.asDynamic().justifyItems)
assertEquals("flex-end", nextChild().style.asDynamic().justifyItems)
assertEquals("self-start", nextChild().style.asDynamic().justifyItems)
assertEquals("self-end", nextChild().style.asDynamic().justifyItems)
assertEquals("left", nextChild().style.asDynamic().justifyItems)
assertEquals("right", nextChild().style.asDynamic().justifyItems)
assertEquals("baseline", nextChild().style.asDynamic().justifyItems)
assertEquals("safe center", nextChild().style.asDynamic().justifyItems)
assertEquals("unsafe center", nextChild().style.asDynamic().justifyItems)
assertEquals("inherit", nextChild().style.asDynamic().justifyItems)
assertEquals("initial", nextChild().style.asDynamic().justifyItems)
assertEquals("revert", nextChild().style.asDynamic().justifyItems)
assertEquals("unset", nextChild().style.asDynamic().justifyItems)
}
}
class GridAlignSelfTests {
@Test
fun alignSelf() = runTest {
composition {
Div({ style { alignSelf("auto") } })
Div({ style { alignSelf("normal") } })
Div({ style { alignSelf("stretch") } })
Div({ style { alignSelf("center") } })
Div({ style { alignSelf("start") } })
Div({ style { alignSelf("end") } })
Div({ style { alignSelf("flex-start") } })
Div({ style { alignSelf("flex-end") } })
Div({ style { alignSelf("self-start") } })
Div({ style { alignSelf("self-end") } })
Div({ style { alignSelf("baseline") } })
Div({ style { alignSelf("safe center") } })
Div({ style { alignSelf("unsafe center") } })
Div({ style { alignSelf("inherit") } })
Div({ style { alignSelf("initial") } })
Div({ style { alignSelf("revert") } })
Div({ style { alignSelf("unset") } })
}
assertEquals("auto", nextChild().style.asDynamic().alignSelf)
assertEquals("normal", nextChild().style.asDynamic().alignSelf)
assertEquals("stretch", nextChild().style.asDynamic().alignSelf)
assertEquals("center", nextChild().style.asDynamic().alignSelf)
assertEquals("start", nextChild().style.asDynamic().alignSelf)
assertEquals("end", nextChild().style.asDynamic().alignSelf)
assertEquals("flex-start", nextChild().style.asDynamic().alignSelf)
assertEquals("flex-end", nextChild().style.asDynamic().alignSelf)
assertEquals("self-start", nextChild().style.asDynamic().alignSelf)
assertEquals("self-end", nextChild().style.asDynamic().alignSelf)
assertEquals("baseline", nextChild().style.asDynamic().alignSelf)
assertEquals("safe center", nextChild().style.asDynamic().alignSelf)
assertEquals("unsafe center", nextChild().style.asDynamic().alignSelf)
assertEquals("inherit", nextChild().style.asDynamic().alignSelf)
assertEquals("initial", nextChild().style.asDynamic().alignSelf)
assertEquals("revert", nextChild().style.asDynamic().alignSelf)
assertEquals("unset", nextChild().style.asDynamic().alignSelf)
}
@Test
fun alignItems() = runTest {
composition {
Div({ style { alignItems("normal") } })
Div({ style { alignItems("stretch") } })
Div({ style { alignItems("center") } })
Div({ style { alignItems("start") } })
Div({ style { alignItems("end") } })
Div({ style { alignItems("flex-start") } })
Div({ style { alignItems("flex-end") } })
Div({ style { alignItems("self-start") } })
Div({ style { alignItems("self-end") } })
Div({ style { alignItems("baseline") } })
Div({ style { alignItems("safe center") } })
Div({ style { alignItems("unsafe center") } })
Div({ style { alignItems("inherit") } })
Div({ style { alignItems("initial") } })
Div({ style { alignItems("revert") } })
Div({ style { alignItems("unset") } })
}
assertEquals("normal", nextChild().style.asDynamic().alignItems)
assertEquals("stretch", nextChild().style.asDynamic().alignItems)
assertEquals("center", nextChild().style.asDynamic().alignItems)
assertEquals("start", nextChild().style.asDynamic().alignItems)
assertEquals("end", nextChild().style.asDynamic().alignItems)
assertEquals("flex-start", nextChild().style.asDynamic().alignItems)
assertEquals("flex-end", nextChild().style.asDynamic().alignItems)
assertEquals("self-start", nextChild().style.asDynamic().alignItems)
assertEquals("self-end", nextChild().style.asDynamic().alignItems)
assertEquals("baseline", nextChild().style.asDynamic().alignItems)
assertEquals("safe center", nextChild().style.asDynamic().alignItems)
assertEquals("unsafe center", nextChild().style.asDynamic().alignItems)
assertEquals("inherit", nextChild().style.asDynamic().alignItems)
assertEquals("initial", nextChild().style.asDynamic().alignItems)
assertEquals("revert", nextChild().style.asDynamic().alignItems)
assertEquals("unset", nextChild().style.asDynamic().alignItems)
}
}
class GridGapTests {
@Test
fun rowGap() = runTest {
composition {
Div({ style { rowGap(20.px) } })
Div({ style { rowGap(1.em) } })
Div({ style { rowGap(3.vmin) } })
Div({ style { rowGap(0.5.cm) } })
Div({ style { rowGap(10.percent) } })
}
assertEquals("20px", nextChild().style.asDynamic().rowGap)
assertEquals("1em", nextChild().style.asDynamic().rowGap)
assertEquals("3vmin", nextChild().style.asDynamic().rowGap)
assertEquals("0.5cm", nextChild().style.asDynamic().rowGap)
assertEquals("10%", nextChild().style.asDynamic().rowGap)
}
@Test
fun columnGap() = runTest {
composition {
Div({ style { columnGap(20.px) } })
Div({ style { columnGap(1.em) } })
Div({ style { columnGap(3.vmin) } })
Div({ style { columnGap(0.5.cm) } })
Div({ style { columnGap(10.percent) } })
}
assertEquals("20px", nextChild().style.asDynamic().columnGap)
assertEquals("1em", nextChild().style.asDynamic().columnGap)
assertEquals("3vmin", nextChild().style.asDynamic().columnGap)
assertEquals("0.5cm", nextChild().style.asDynamic().columnGap)
assertEquals("10%", nextChild().style.asDynamic().columnGap)
}
@Test
fun gapOneValue() = runTest {
composition {
Div({ style { gap(45.px) } })
}
val elStyle = nextChild().style.asDynamic()
assertEquals("45px", elStyle.rowGap)
assertEquals("45px", elStyle.columnGap)
}
@Test
fun gapTwoValues() = runTest {
composition {
Div({ style { gap(20.px, 30.percent) } })
}
assertEquals("20px 30%", nextChild().style.asDynamic().gap)
}
}
Loading…
Cancel
Save