From 4412f952451444ae683f403edc7c255036bc471a Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Thu, 8 Jul 2021 15:50:33 +0200 Subject: [PATCH] Introduce basic minimal support for background in CSS API --- .../compose/web/css/properties/background.kt | 43 +++++- .../jsTest/kotlin/css/CSSBackgroundTests.kt | 141 +++++++++++++++++- 2 files changed, 178 insertions(+), 6 deletions(-) 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 b0dccaa35a..d47bdc024e 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 @@ -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) -} \ No newline at end of file +// 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) +} + diff --git a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt index 2492c29a14..00c351f7e2 100644 --- a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt +++ b/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) + } + } \ No newline at end of file