Basic support for margin and its constituents in CSS API

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)

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)
+}
+
+
+

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")
+    }
+
+}