From 2033c73377e005b7d80fb5508eca74c2213e563d Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Thu, 8 Jul 2021 15:38:03 +0200
Subject: [PATCH] Minimal support for background in CSS API

---
 .../compose/web/css/properties/background.kt  |  6 ++++++
 .../jsTest/kotlin/css/CSSBackgroundTests.kt   | 20 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/properties/background.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/properties/background.kt
index 48d5bc2101..3b75b5f686 100644
--- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/properties/background.kt
+++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/properties/background.kt
@@ -48,3 +48,9 @@ fun StyleBuilder.backgroundSize(value: String) {
 }
 
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background
+fun StyleBuilder.background(value: String) {
+    property("background", value)
+}
+
+
diff --git a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
index 09ea4542dc..00c351f7e2 100644
--- a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
+++ b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
@@ -167,4 +167,24 @@ class CSSBackgroundTests {
         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)
+    }
+
 }
\ No newline at end of file