diff --git a/web/core/build.gradle.kts b/web/core/build.gradle.kts index f61f32d4b7e..d2fb5dcfce9 100644 --- a/web/core/build.gradle.kts +++ b/web/core/build.gradle.kts @@ -31,6 +31,7 @@ kotlin { dependencies { implementation(project(":internal-web-core-runtime")) implementation(kotlin("stdlib-js")) + implementation("org.jetbrains.kotlin-wrappers:kotlin-csstype:3.0.10-pre.283-kotlin-1.6.10") } } diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt index c4c0d1c1571..33f0608986f 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt @@ -17,6 +17,11 @@ import org.w3c.dom.HTMLElement * are extracted to a separate methods. * */ + +private external object Object { + fun entries(obj: Any): Array> +} + open class AttrsBuilder : EventsListenerBuilder() { internal val attributesMap = mutableMapOf() internal val styleBuilder = StyleBuilderImpl() @@ -43,6 +48,14 @@ open class AttrsBuilder : EventsListenerBuilder() { styleBuilder.apply(builder) } + fun style(propertyHolder: Any) { + styleBuilder.apply { + Object.entries(propertyHolder).forEach { (k, v) -> + property(k, v) + } + } + } + /** * [classes] adds all values passed as params to the element's classList. * This method acts cumulatively, that is, each call adds values to the classList. diff --git a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt index 2418a1d7a5c..d835ba4631c 100644 --- a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt +++ b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt @@ -127,6 +127,7 @@ class CSSVariableTests { } val boundingRect = (root.children[1] as HTMLElement).getBoundingClientRect() + assertEquals(300.toDouble(), boundingRect.width) assertEquals(200.toDouble(), boundingRect.height) } diff --git a/web/core/src/jsTest/kotlin/InlineStyleTests.kt b/web/core/src/jsTest/kotlin/InlineStyleTests.kt index 7a283bf4bb7..b50e99be126 100644 --- a/web/core/src/jsTest/kotlin/InlineStyleTests.kt +++ b/web/core/src/jsTest/kotlin/InlineStyleTests.kt @@ -5,14 +5,42 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.keywords.auto +import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Text import kotlin.test.Test import kotlin.test.assertEquals import org.jetbrains.compose.web.testutils.* +import csstype.Color as CssTypeColor class InlineStyleTests { + @Test + fun inlineProtocolTest() = runTest { + composition { + Div({ + style(js("{color: \"red\"}")) + }) { } + } + + assertEquals("color: red;", nextChild().style.cssText) + } + + @Test + fun inlineProtocolWithCssTypeTest() = runTest { + composition { + val obj = js("{}") + obj.color = CssTypeColor("#F00FFA") + + Div({ + style(obj) + }) { } + } + + assertEquals("color: rgb(240, 15, 250);", nextChild().style.cssText) + } + + @Test fun conditionalStyleAppliedProperly() = runTest { diff --git a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt index d989249ed44..61c8281225f 100644 --- a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt +++ b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt @@ -16,12 +16,16 @@ class CSSBackgroundTests { @Test fun backgroundColor() = runTest { composition { - Div({style { - backgroundColor(rgb(0, 128, 0)) - }}) - Div({style { - backgroundColor(rgba(0, 129, 0, 0.2)) - }}) + Div({ + style { + backgroundColor(rgb(0, 128, 0)) + } + }) + Div({ + style { + backgroundColor(rgba(0, 129, 0, 0.2)) + } + }) } assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor) @@ -31,15 +35,21 @@ class CSSBackgroundTests { @Test fun backgroundAttachment() = runTest { composition { - Div({style { - backgroundAttachment("scroll") - }}) - Div({style { - backgroundAttachment("fixed") - }}) - Div({style { - backgroundAttachment("local") - }}) + Div({ + style { + backgroundAttachment("scroll") + } + }) + Div({ + style { + backgroundAttachment("fixed") + } + }) + Div({ + style { + backgroundAttachment("local") + } + }) } assertEquals("scroll", window.getComputedStyle(nextChild()).backgroundAttachment) @@ -50,15 +60,21 @@ class CSSBackgroundTests { @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))") - }}) + 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(nextChild()).backgroundImage) @@ -69,18 +85,26 @@ class CSSBackgroundTests { @Test fun backgroundPosition() = runTest { composition { - Div({style { - backgroundPosition("top") - }}) - Div({style { - backgroundPosition("left") - }}) - Div({style { - backgroundPosition("center") - }}) - Div({style { - backgroundPosition("25% 75%") - }}) + Div({ + style { + backgroundPosition("top") + } + }) + Div({ + style { + backgroundPosition("left") + } + }) + Div({ + style { + backgroundPosition("center") + } + }) + Div({ + style { + backgroundPosition("25% 75%") + } + }) } assertEquals("50% 0%", window.getComputedStyle(nextChild()).backgroundPosition) @@ -92,9 +116,11 @@ class CSSBackgroundTests { @Test fun backgroundRepeat() = runTest { composition { - Div({style { - backgroundRepeat("space repeat") - }}) + Div({ + style { + backgroundRepeat("space repeat") + } + }) } assertEquals("space repeat", window.getComputedStyle(nextChild()).backgroundRepeat) @@ -104,15 +130,21 @@ class CSSBackgroundTests { @Test fun backgroundClip() = runTest { composition { - Div({style { - backgroundClip("border-box") - }}) - Div({style { - backgroundClip("padding-box") - }}) - Div({style { - backgroundClip("content-box") - }}) + Div({ + style { + backgroundClip("border-box") + } + }) + Div({ + style { + backgroundClip("padding-box") + } + }) + Div({ + style { + backgroundClip("content-box") + } + }) } @@ -124,15 +156,21 @@ class CSSBackgroundTests { @Test fun backgroundOrigin() = runTest { composition { - Div({style { - backgroundOrigin("border-box") - }}) - Div({style { - backgroundOrigin("padding-box") - }}) - Div({style { - backgroundOrigin("content-box") - }}) + Div({ + style { + backgroundOrigin("border-box") + } + }) + Div({ + style { + backgroundOrigin("padding-box") + } + }) + Div({ + style { + backgroundOrigin("content-box") + } + }) } @@ -145,18 +183,26 @@ class CSSBackgroundTests { @Test fun backgroundSize() = runTest { composition { - Div({style { - backgroundSize("contain") - }}) - Div({style { - backgroundSize("cover") - }}) - Div({style { - backgroundSize("50%") - }}) - Div({style { - backgroundSize("auto 50px") - }}) + Div({ + style { + backgroundSize("contain") + } + }) + Div({ + style { + backgroundSize("cover") + } + }) + Div({ + style { + backgroundSize("50%") + } + }) + Div({ + style { + backgroundSize("auto 50px") + } + }) } assertEquals("contain", window.getComputedStyle(nextChild()).backgroundSize) @@ -168,15 +214,21 @@ class CSSBackgroundTests { @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\")") - }}) + 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(nextChild()).backgroundColor) diff --git a/web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt b/web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt index 22c24640700..0b65528f452 100644 --- a/web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt +++ b/web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt @@ -8,8 +8,6 @@ package org.jetbrains.compose.web.core.tests.css import org.jetbrains.compose.web.testutils.* 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 diff --git a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt b/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt index bdbbb768d3e..e7fd4109a12 100644 --- a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt +++ b/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt @@ -5,7 +5,6 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.CSSSelector import org.jetbrains.compose.web.dom.* class TestCases1 {