Introduce basic minimal support for background in CSS API

web/core/src/jsMain/kotlin/androidx/compose/web/css/properties/background.kt

@@ -5,6 +5,15 @@
 
 package org.jetbrains.compose.web.css
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
+fun StyleBuilder.backgroundAttachment(value: String) {
+    property("background-attachment", value)
+}
+
+fun StyleBuilder.backgroundClip(value: String) {
+    property("background-clip", value)
+}
+
 fun StyleBuilder.backgroundColor(value: String) {
     property("background-color", value)
 }
@@ -13,7 +22,33 @@ fun StyleBuilder.backgroundColor(value: CSSColorValue) {
     property("background-color", value)
 }
 
-// https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
-fun StyleBuilder.backgroundAttachment(value: String) {
-    property("background-attachment", value)
-}
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
+fun StyleBuilder.backgroundImage(value: String) {
+    property("background-image", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
+fun StyleBuilder.backgroundOrigin(value: String) {
+    property("background-origin", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
+fun StyleBuilder.backgroundPosition(value: String) {
+    property("background-position", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
+fun StyleBuilder.backgroundRepeat(value: String) {
+    property("background-repeat", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
+fun StyleBuilder.backgroundSize(value: String) {
+    property("background-size", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background
+fun StyleBuilder.background(value: String) {
+    property("background", value)
+}
+

web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt

@@ -7,8 +7,7 @@ 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.backgroundAttachment
-import org.jetbrains.compose.web.css.backgroundColor
+import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
@@ -50,4 +49,142 @@ class CSSBackgroundTests {
         assertEquals("local", window.getComputedStyle(root.children[2] as HTMLElement).backgroundAttachment)
     }
 
+    @Test
+    fun backgroundImage() = runTest {
+        composition {
+            Div({style {
+                backgroundImage("url(\"https://localhost:3333/media/examples/lizard.png\")")
+            }})
+            Div({style {
+                backgroundImage("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")")
+            }})
+            Div({style {
+                backgroundImage("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))")
+            }})
+        }
+
+        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(root.children[0] as HTMLElement).backgroundImage)
+        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", window.getComputedStyle(root.children[1] as HTMLElement).backgroundImage)
+        assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", window.getComputedStyle(root.children[2] as HTMLElement).backgroundImage)
+    }
+
+    @Test
+    fun backgroundPosition() = runTest {
+        composition {
+            Div({style {
+                backgroundPosition("top")
+            }})
+            Div({style {
+                backgroundPosition("left")
+            }})
+            Div({style {
+                backgroundPosition("center")
+            }})
+            Div({style {
+                backgroundPosition("25% 75%")
+            }})
+        }
+
+        assertEquals("50% 0%", window.getComputedStyle(root.children[0] as HTMLElement).backgroundPosition)
+        assertEquals("0% 50%", window.getComputedStyle(root.children[1] as HTMLElement).backgroundPosition)
+        assertEquals("50% 50%", window.getComputedStyle(root.children[2] as HTMLElement).backgroundPosition)
+        assertEquals("25% 75%", window.getComputedStyle(root.children[3] as HTMLElement).backgroundPosition)
+    }
+
+    @Test
+    fun backgroundRepeat() = runTest {
+        composition {
+            Div({style {
+                backgroundRepeat("space repeat")
+            }})
+        }
+
+        assertEquals("space repeat", window.getComputedStyle(root.children[0] as HTMLElement).backgroundRepeat)
+    }
+
+
+    @Test
+    fun backgroundClip() = runTest {
+        composition {
+            Div({style {
+                backgroundClip("border-box")
+            }})
+            Div({style {
+                backgroundClip("padding-box")
+            }})
+            Div({style {
+                backgroundClip("content-box")
+            }})
+        }
+
+
+        assertEquals("border-box", window.getComputedStyle(root.children[0] as HTMLElement).backgroundClip)
+        assertEquals("padding-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundClip)
+        assertEquals("content-box", window.getComputedStyle(root.children[2] as HTMLElement).backgroundClip)
+    }
+
+    @Test
+    fun backgroundOrigin() = runTest {
+        composition {
+            Div({style {
+                backgroundOrigin("border-box")
+            }})
+            Div({style {
+                backgroundOrigin("padding-box")
+            }})
+            Div({style {
+                backgroundOrigin("content-box")
+            }})
+        }
+
+
+        assertEquals("border-box", window.getComputedStyle(root.children[0] as HTMLElement).backgroundOrigin)
+        assertEquals("padding-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundOrigin)
+        assertEquals("content-box", window.getComputedStyle(root.children[2] as HTMLElement).backgroundOrigin)
+    }
+
+
+    @Test
+    fun backgroundSize() = runTest {
+        composition {
+            Div({style {
+                backgroundSize("contain")
+            }})
+            Div({style {
+                backgroundSize("cover")
+            }})
+            Div({style {
+                backgroundSize("50%")
+            }})
+            Div({style {
+                backgroundSize("auto 50px")
+            }})
+        }
+
+        assertEquals("contain", window.getComputedStyle(root.children[0] as HTMLElement).backgroundSize)
+        assertEquals("cover", window.getComputedStyle(root.children[1] as HTMLElement).backgroundSize)
+        assertEquals("50%", window.getComputedStyle(root.children[2] as HTMLElement).backgroundSize)
+        assertEquals("auto 50px", window.getComputedStyle(root.children[3] as HTMLElement).backgroundSize)
+    }
+
+    @Test
+    fun background() = runTest {
+        composition {
+            Div({style {
+                background("green")
+            }})
+            Div({style {
+                background("content-box radial-gradient(crimson, skyblue)")
+            }})
+            Div({style {
+                background("no-repeat url(\"../../media/examples/lizard.png\")")
+            }})
+        }
+
+        assertEquals("rgb(0, 128, 0)", window.getComputedStyle(root.children[0] as HTMLElement).backgroundColor)
+        assertEquals("content-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundOrigin)
+        assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", window.getComputedStyle(root.children[1] as HTMLElement).backgroundImage)
+        assertEquals("no-repeat", window.getComputedStyle(root.children[2] as HTMLElement).backgroundRepeat)
+    }
+
 }