From 636694a46e26d80c3f56ed16f4ab02fbbdde2ee4 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Wed, 21 Jul 2021 21:45:15 +0200 Subject: [PATCH] Introduce basic support for grid-column/row-start/end This contributes to #895 --- .../compose/web/css/properties/grid.kt | 36 +++++ web/core/src/jsTest/kotlin/css/GridTests.kt | 153 ++++++++++++++++++ 2 files changed, 189 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 7de32f6e..bbcd1994 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 @@ -27,6 +27,24 @@ fun StyleBuilder.gridColumn(start: Int, end: Int) { } +// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start +fun StyleBuilder.gridColumnStart(value: String) { + property("grid-column-start", value) +} + +fun StyleBuilder.gridColumnStart(value: Int) { + property("grid-column-start", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end +fun StyleBuilder.gridColumnEnd(value: String) { + property("grid-column-end", value) +} + +fun StyleBuilder.gridColumnEnd(value: Int) { + property("grid-column-end", value) +} + // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row fun StyleBuilder.gridRow(value: String) { property("grid-row", value) @@ -48,6 +66,24 @@ fun StyleBuilder.gridRow(start: Int, end: Int) { property("grid-row", "$start / $end") } +// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start +fun StyleBuilder.gridRowStart(value: String) { + property("grid-row-start", value) +} + +fun StyleBuilder.gridRowStart(value: Int) { + property("grid-row-start", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end +fun StyleBuilder.gridRowEnd(value: String) { + property("grid-row-end", value) +} + +fun StyleBuilder.gridRowEnd(value: Int) { + property("grid-row-end", value) +} + // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns fun StyleBuilder.gridTemplateColumns(value: String) { property("grid-template-columns", value) diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt index 983f6f52..6759a9f7 100644 --- a/web/core/src/jsTest/kotlin/css/GridTests.kt +++ b/web/core/src/jsTest/kotlin/css/GridTests.kt @@ -63,6 +63,159 @@ class GridColumnTests { } } +class GridColumnEndTests { + @Test + fun gridColumnEndOneValue() = runTest { + composition { + Div({ style { gridColumnEnd("1") } }) + Div({ style { gridColumnEnd("somegridarea") } }) + } + + assertEquals("1", nextChild().style.asDynamic().gridColumnEnd) + assertEquals("somegridarea", nextChild().style.asDynamic().gridColumnEnd) + } + + @Test + fun gridColumnEndIntValue() = runTest { + composition { + Div({ style { gridColumnEnd(-4) } }) + } + + val el = nextChild().style.asDynamic() + assertEquals("-4", el.gridColumnEnd) + } + + @Test + fun gridColumnEndGlobalValues() = runTest { + composition { + Div({ style { gridColumn("inherit") } }) + Div({ style { gridColumn("initial") } }) + Div({ style { gridColumn("revert") } }) + Div({ style { gridColumn("unset") } }) + } + + assertEquals("inherit", nextChild().style.asDynamic().gridColumnEnd) + assertEquals("initial", nextChild().style.asDynamic().gridColumnEnd) + assertEquals("revert", nextChild().style.asDynamic().gridColumnEnd) + assertEquals("unset", nextChild().style.asDynamic().gridColumnEnd) + } +} + +class GridColumnStartTests { + @Test + fun gridColumnStartOneValue() = runTest { + composition { + Div({ style { gridColumnStart("1") } }) + Div({ style { gridColumnStart("somegridarea") } }) + } + + assertEquals("1", nextChild().style.asDynamic().gridColumnStart) + assertEquals("somegridarea", nextChild().style.asDynamic().gridColumnStart) + } + + @Test + fun gridColumnStartIntValue() = runTest { + composition { + Div({ style { gridColumnStart(-4) } }) + } + + val el = nextChild().style.asDynamic() + assertEquals("-4", el.gridColumnStart) + } + + @Test + fun gridColumnStartGlobalValues() = runTest { + composition { + Div({ style { gridColumn("inherit") } }) + Div({ style { gridColumn("initial") } }) + Div({ style { gridColumn("revert") } }) + Div({ style { gridColumn("unset") } }) + } + + assertEquals("inherit", nextChild().style.asDynamic().gridColumnStart) + assertEquals("initial", nextChild().style.asDynamic().gridColumnStart) + assertEquals("revert", nextChild().style.asDynamic().gridColumnStart) + assertEquals("unset", nextChild().style.asDynamic().gridColumnStart) + } +} + +class GridRowStartTests { + @Test + fun gridRowStartOneValue() = runTest { + composition { + Div({ style { gridRowStart("1") } }) + Div({ style { gridRowStart("somegridarea") } }) + } + + assertEquals("1", nextChild().style.asDynamic().gridRowStart) + assertEquals("somegridarea", nextChild().style.asDynamic().gridRowStart) + } + + @Test + fun gridRowStartIntValue() = runTest { + composition { + Div({ style { gridRowStart(-4) } }) + } + + val el = nextChild().style.asDynamic() + assertEquals("-4", el.gridRowStart) + } + + @Test + fun gridRowStartGlobalValues() = runTest { + composition { + Div({ style { gridRow("inherit") } }) + Div({ style { gridRow("initial") } }) + Div({ style { gridRow("revert") } }) + Div({ style { gridRow("unset") } }) + } + + assertEquals("inherit", nextChild().style.asDynamic().gridRowStart) + assertEquals("initial", nextChild().style.asDynamic().gridRowStart) + assertEquals("revert", nextChild().style.asDynamic().gridRowStart) + assertEquals("unset", nextChild().style.asDynamic().gridRowStart) + } +} + +class GridRowEndTests { + @Test + fun gridRowEndOneValue() = runTest { + composition { + Div({ style { gridRowEnd("1") } }) + Div({ style { gridRowEnd("somegridarea") } }) + } + + assertEquals("1", nextChild().style.asDynamic().gridRowEnd) + assertEquals("somegridarea", nextChild().style.asDynamic().gridRowEnd) + } + + @Test + fun gridRowEndIntValue() = runTest { + composition { + Div({ style { gridRowEnd(-4) } }) + } + + val el = nextChild().style.asDynamic() + assertEquals("-4", el.gridRowEnd) + } + + @Test + fun gridRowEndGlobalValues() = runTest { + composition { + Div({ style { gridRow("inherit") } }) + Div({ style { gridRow("initial") } }) + Div({ style { gridRow("revert") } }) + Div({ style { gridRow("unset") } }) + } + + assertEquals("inherit", nextChild().style.asDynamic().gridRowEnd) + assertEquals("initial", nextChild().style.asDynamic().gridRowEnd) + assertEquals("revert", nextChild().style.asDynamic().gridRowEnd) + assertEquals("unset", nextChild().style.asDynamic().gridRowEnd) + } +} + + class GridRawTests { @Test