github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

pull/927/head
Shagen Ogandzhanian 3 years ago
parent
b9a87578fc
commit
4c6388f995
2 changed files with 278 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -116,3 +116,49 @@ fun StyleBuilder.gridTemplateAreas(vararg rows: String) {
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
Unescape View File

@ -5,6 +5,7 @@
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.css.*
import org.jetbrains.compose.web.dom.Div
@ -368,3 +369,234 @@ class GridTemplateAreasTests {
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)
}
}
Write Preview
Loading…
Cancel
Save