From 1083bb7dc0cc2c70748aa4a570d512b410e0a477 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Thu, 8 Jul 2021 22:15:48 +0200 Subject: [PATCH] Basic support for margin and its constituents in CSS API --- .../compose/web/css/CSSProperties.kt | 13 -- .../compose/web/css/properties/margin.kt | 35 +++++ .../src/jsTest/kotlin/css/CSSMarginTests.kt | 142 ++++++++++++++++++ 3 files changed, 177 insertions(+), 13 deletions(-) create mode 100644 web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/margin.kt create mode 100644 web/core/src/jsTest/kotlin/css/CSSMarginTests.kt diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt index 44f2bfa41d..f7ebd38d4a 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt @@ -164,19 +164,6 @@ fun StyleBuilder.right(value: CSSAutoKeyword) { property("right", value) } -fun StyleBuilder.margin(value: CSSNumeric) { - // marign hasn't Typed OM yet - property("margin", value) -} - -fun StyleBuilder.marginLeft(value: CSSNumeric) { - property("margin-left", value) -} - -fun StyleBuilder.marginTop(value: CSSNumeric) { - property("margin-top", value) -} - fun StyleBuilder.padding(value: CSSNumeric) { // padding hasn't Typed OM yet property("padding", value) diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/margin.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/margin.kt new file mode 100644 index 0000000000..cc457d0497 --- /dev/null +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/margin.kt @@ -0,0 +1,35 @@ +/* + * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers. + * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. + */ + +package org.jetbrains.compose.web.css + +// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom +fun StyleBuilder.margin(vararg value: CSSNumeric) { + // margin hasn't Typed OM yet + property("margin", value.joinToString(" ")) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom +fun StyleBuilder.marginBottom(value: CSSNumeric) { + property("margin-bottom", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left +fun StyleBuilder.marginLeft(value: CSSNumeric) { + property("margin-left", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right +fun StyleBuilder.marginRight(value: CSSNumeric) { + property("margin-right", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top +fun StyleBuilder.marginTop(value: CSSNumeric) { + property("margin-top", value) +} + + + diff --git a/web/core/src/jsTest/kotlin/css/CSSMarginTests.kt b/web/core/src/jsTest/kotlin/css/CSSMarginTests.kt new file mode 100644 index 0000000000..16f135ac33 --- /dev/null +++ b/web/core/src/jsTest/kotlin/css/CSSMarginTests.kt @@ -0,0 +1,142 @@ +/* + * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers. + * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. + */ + +package org.jetbrains.compose.web.core.tests.css + +import kotlinx.browser.window +import org.jetbrains.compose.web.core.tests.runTest +import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLElement +import org.w3c.dom.get +import kotlin.test.Test +import kotlin.test.assertEquals + +class CSSMarginTests { + @Test + fun marginLeft() = runTest { + composition { + Div({ + style { + marginLeft(5.px) + } + }) + } + + assertEquals("5px", (root.children[0] as HTMLElement).style.marginLeft) + } + + @Test + fun marginTop() = runTest { + composition { + Div({ + style { + marginTop(15.px) + } + }) + } + + assertEquals("15px", (root.children[0] as HTMLElement).style.marginTop) + } + + @Test + fun marginRight() = runTest { + composition { + Div({ + style { + marginRight(12.vw) + } + }) + } + + assertEquals("12vw", (root.children[0] as HTMLElement).style.marginRight) + } + + @Test + fun marginBottom() = runTest { + composition { + Div({ + style { + marginBottom(12.percent) + } + }) + } + + assertEquals("12%", (root.children[0] as HTMLElement).style.marginBottom) + } + + @Test + fun marginWithOneValue() = runTest { + composition { + Div({ + style { + margin(4.px) + } + }) + } + + val el = window.getComputedStyle(root.children[0] as HTMLElement) + + assertEquals("4px", el.marginTop, "marginTop") + assertEquals("4px", el.marginRight, "marginRight") + assertEquals("4px", el.marginBottom, "marginBottom") + assertEquals("4px", el.marginLeft, "marginLeft") + } + + @Test + fun marginWithTwoValues() = runTest { + composition { + Div({ + style { + margin(4.px, 6.px) + } + }) + } + + val el = window.getComputedStyle(root.children[0] as HTMLElement) + + assertEquals("4px", el.marginTop, "marginTop") + assertEquals("6px", el.marginRight, "marginRight") + assertEquals("4px", el.marginBottom, "marginBottom") + assertEquals("6px", el.marginLeft, "marginLeft") + } + + @Test + fun marginWithThreeValues() = runTest { + composition { + Div({ + style { + margin(4.px, 6.px, 3.px) + } + }) + } + + val el = window.getComputedStyle(root.children[0] as HTMLElement) + + assertEquals("4px", el.marginTop, "marginTop") + assertEquals("6px", el.marginRight, "marginRight") + assertEquals("3px", el.marginBottom, "marginBottom") + assertEquals("6px", el.marginLeft, "marginLeft") + } + + @Test + fun marginWithFourValues() = runTest { + composition { + Div({ + style { + margin(4.px, 6.px, 3.px, 1.px) + } + }) + } + + val el = window.getComputedStyle(root.children[0] as HTMLElement) + + assertEquals("4px", el.marginTop, "marginTop") + assertEquals("6px", el.marginRight, "marginRight") + assertEquals("3px", el.marginBottom, "marginBottom") + assertEquals("1px", el.marginLeft, "marginLeft") + } + +} \ No newline at end of file