From 4c6388f995b2f82e081b3fc0b61b91b031c0d66a Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Thu, 22 Jul 2021 00:35:29 +0200 Subject: [PATCH] Introduce minimal support of alignSelf, justifySelf, alignItems, justifyItems, gap in CSS API --- .../compose/web/css/properties/grid.kt | 46 ++++ web/core/src/jsTest/kotlin/css/GridTests.kt | 232 ++++++++++++++++++ 2 files changed, 278 insertions(+) diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt index bbcd1994f6..beba429d75 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt +++ b/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\"" }) } +// 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") +} + diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt index 6759a9f788..cf4b1131e4 100644 --- a/web/core/src/jsTest/kotlin/css/GridTests.kt +++ b/web/core/src/jsTest/kotlin/css/GridTests.kt @@ -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) + } + +} \ No newline at end of file