Basic support for padding and its constituents in CSS API

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt

@@ -162,9 +162,4 @@ fun StyleBuilder.right(value: CSSLengthOrPercentageValue) {
 
 fun StyleBuilder.right(value: CSSAutoKeyword) {
     property("right", 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

@@ -5,7 +5,7 @@
 
 package org.jetbrains.compose.web.css
 
-// https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+// https://developer.mozilla.org/en-US/docs/Web/CSS/margin
 fun StyleBuilder.margin(vararg value: CSSNumeric) {
     // margin hasn't Typed OM yet
     property("margin", value.joinToString(" "))

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/padding.kt

@@ -0,0 +1,32 @@
+/*
+ * 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/padding
+fun StyleBuilder.padding(vararg value: CSSNumeric) {
+    // padding hasn't Typed OM yet
+    property("padding", value.joinToString(" "))
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+fun StyleBuilder.paddingBottom(value: CSSNumeric) {
+    property("padding-bottom", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
+fun StyleBuilder.paddingLeft(value: CSSNumeric) {
+    property("padding-left", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
+fun StyleBuilder.paddingRight(value: CSSNumeric) {
+    property("padding-right", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+fun StyleBuilder.paddingTop(value: CSSNumeric) {
+    property("padding-top", value)
+}

web/core/src/jsTest/kotlin/css/CSSPaddingTests.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 CSSPaddingTests {
+    @Test
+    fun paddingLeft() = runTest {
+        composition {
+            Div({
+                style {
+                    paddingLeft(5.px)
+                }
+            })
+        }
+
+        assertEquals("5px", (root.children[0] as HTMLElement).style.paddingLeft)
+    }
+
+    @Test
+    fun paddingTop() = runTest {
+        composition {
+            Div({
+                style {
+                    paddingTop(15.px)
+                }
+            })
+        }
+
+        assertEquals("15px", (root.children[0] as HTMLElement).style.paddingTop)
+    }
+
+    @Test
+    fun paddingRight() = runTest {
+        composition {
+            Div({
+                style {
+                    paddingRight(12.vw)
+                }
+            })
+        }
+
+        assertEquals("12vw", (root.children[0] as HTMLElement).style.paddingRight)
+    }
+
+    @Test
+    fun paddingBottom() = runTest {
+        composition {
+            Div({
+                style {
+                    paddingBottom(12.percent)
+                }
+            })
+        }
+
+        assertEquals("12%", (root.children[0] as HTMLElement).style.paddingBottom)
+    }
+
+    @Test
+    fun paddingWithOneValue() = runTest {
+        composition {
+            Div({
+                style {
+                    padding(4.px)
+                }
+            })
+        }
+
+        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+
+        assertEquals("4px", el.paddingTop, "paddingTop")
+        assertEquals("4px", el.paddingRight, "paddingRight")
+        assertEquals("4px", el.paddingBottom, "paddingBottom")
+        assertEquals("4px", el.paddingLeft, "paddingLeft")
+    }
+
+    @Test
+    fun paddingWithTwoValues() = runTest {
+        composition {
+            Div({
+                style {
+                    padding(4.px, 6.px)
+                }
+            })
+        }
+
+        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+
+        assertEquals("4px", el.paddingTop, "paddingTop")
+        assertEquals("6px", el.paddingRight, "paddingRight")
+        assertEquals("4px", el.paddingBottom, "paddingBottom")
+        assertEquals("6px", el.paddingLeft, "paddingLeft")
+    }
+
+    @Test
+    fun paddingWithThreeValues() = runTest {
+        composition {
+            Div({
+                style {
+                    padding(4.px, 6.px, 3.px)
+                }
+            })
+        }
+
+        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+
+        assertEquals("4px", el.paddingTop, "paddingTop")
+        assertEquals("6px", el.paddingRight, "paddingRight")
+        assertEquals("3px", el.paddingBottom, "paddingBottom")
+        assertEquals("6px", el.paddingLeft, "paddingLeft")
+    }
+
+    @Test
+    fun paddingWithFourValues() = runTest {
+        composition {
+            Div({
+                style {
+                    padding(4.px, 6.px, 3.px, 1.px)
+                }
+            })
+        }
+
+        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+
+        assertEquals("4px", el.paddingTop, "paddingTop")
+        assertEquals("6px", el.paddingRight, "paddingRight")
+        assertEquals("3px", el.paddingBottom, "paddingBottom")
+        assertEquals("1px", el.paddingLeft, "paddingLeft")
+    }
+
+}