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 9a65e7636b..48d5bc2101 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 @@ -42,3 +42,9 @@ 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) +} + + diff --git a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt index 4acd83090b..09ea4542dc 100644 --- a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt +++ b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt @@ -143,4 +143,28 @@ class CSSBackgroundTests { 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) + } + } \ No newline at end of file