GitHub-JetBrains
/
compose-jb
mirror of https://github.com/JetBrains/compose-jb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Rename shtyle to style

csstype_demo
Shagen Ogandzhanian 4 years ago
parent
de5ea4f12a
commit
b9bf5e6a34
5 changed files with 133 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt
  2. 4
      web/core/src/jsTest/kotlin/InlineStyleTests.kt
  3. 208
      web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
  4. 2
      web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt
  5. 1
      web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt

2
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt
Unescape View File

@ -48,7 +48,7 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
styleBuilder.apply(builder) styleBuilder.apply(builder)
} }
fun shtyle(propertyHolder: Any) { fun style(propertyHolder: Any) {
styleBuilder.apply { styleBuilder.apply {
Object.entries(propertyHolder).forEach { (k, v) -> Object.entries(propertyHolder).forEach { (k, v) ->
property(k, v) property(k, v)

4
web/core/src/jsTest/kotlin/InlineStyleTests.kt
Unescape View File

@ -19,7 +19,7 @@ class InlineStyleTests {
fun inlineProtocolTest() = runTest { fun inlineProtocolTest() = runTest {
composition { composition {
Div({ Div({
shtyle(js("{color: \"red\"}")) style(js("{color: \"red\"}"))
}) { } }) { }
} }
@ -33,7 +33,7 @@ class InlineStyleTests {
obj.color = CssTypeColor("#F00FFA") obj.color = CssTypeColor("#F00FFA")
Div({ Div({
shtyle(obj) style(obj)
}) { } }) { }
} }

208
web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
Unescape View File

@ -16,12 +16,16 @@ class CSSBackgroundTests {
@Test @Test
fun backgroundColor() = runTest { fun backgroundColor() = runTest {
composition { composition {
Div({style { Div({
backgroundColor(rgb(0, 128, 0)) style {
}}) backgroundColor(rgb(0, 128, 0))
Div({style { }
backgroundColor(rgba(0, 129, 0, 0.2)) })
}}) Div({
style {
backgroundColor(rgba(0, 129, 0, 0.2))
}
})
} }
assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor) assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
@ -31,15 +35,21 @@ class CSSBackgroundTests {
@Test @Test
fun backgroundAttachment() = runTest { fun backgroundAttachment() = runTest {
composition { composition {
Div({style { Div({
backgroundAttachment("scroll") style {
}}) backgroundAttachment("scroll")
Div({style { }
backgroundAttachment("fixed") })
}}) Div({
Div({style { style {
backgroundAttachment("local") backgroundAttachment("fixed")
}}) }
})
Div({
style {
backgroundAttachment("local")
}
})
} }
assertEquals("scroll", window.getComputedStyle(nextChild()).backgroundAttachment) assertEquals("scroll", window.getComputedStyle(nextChild()).backgroundAttachment)
@ -50,15 +60,21 @@ class CSSBackgroundTests {
@Test @Test
fun backgroundImage() = runTest { fun backgroundImage() = runTest {
composition { composition {
Div({style { Div({
backgroundImage("url(\"https://localhost:3333/media/examples/lizard.png\")") 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({
Div({style { style {
backgroundImage("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))") 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) assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(nextChild()).backgroundImage)
@ -69,18 +85,26 @@ class CSSBackgroundTests {
@Test @Test
fun backgroundPosition() = runTest { fun backgroundPosition() = runTest {
composition { composition {
Div({style { Div({
backgroundPosition("top") style {
}}) backgroundPosition("top")
Div({style { }
backgroundPosition("left") })
}}) Div({
Div({style { style {
backgroundPosition("center") backgroundPosition("left")
}}) }
Div({style { })
backgroundPosition("25% 75%") Div({
}}) style {
backgroundPosition("center")
}
})
Div({
style {
backgroundPosition("25% 75%")
}
})
} }
assertEquals("50% 0%", window.getComputedStyle(nextChild()).backgroundPosition) assertEquals("50% 0%", window.getComputedStyle(nextChild()).backgroundPosition)
@ -92,9 +116,11 @@ class CSSBackgroundTests {
@Test @Test
fun backgroundRepeat() = runTest { fun backgroundRepeat() = runTest {
composition { composition {
Div({style { Div({
backgroundRepeat("space repeat") style {
}}) backgroundRepeat("space repeat")
}
})
} }
assertEquals("space repeat", window.getComputedStyle(nextChild()).backgroundRepeat) assertEquals("space repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
@ -104,15 +130,21 @@ class CSSBackgroundTests {
@Test @Test
fun backgroundClip() = runTest { fun backgroundClip() = runTest {
composition { composition {
Div({style { Div({
backgroundClip("border-box") style {
}}) backgroundClip("border-box")
Div({style { }
backgroundClip("padding-box") })
}}) Div({
Div({style { style {
backgroundClip("content-box") backgroundClip("padding-box")
}}) }
})
Div({
style {
backgroundClip("content-box")
}
})
} }
@ -124,15 +156,21 @@ class CSSBackgroundTests {
@Test @Test
fun backgroundOrigin() = runTest { fun backgroundOrigin() = runTest {
composition { composition {
Div({style { Div({
backgroundOrigin("border-box") style {
}}) backgroundOrigin("border-box")
Div({style { }
backgroundOrigin("padding-box") })
}}) Div({
Div({style { style {
backgroundOrigin("content-box") backgroundOrigin("padding-box")
}}) }
})
Div({
style {
backgroundOrigin("content-box")
}
})
} }
@ -145,18 +183,26 @@ class CSSBackgroundTests {
@Test @Test
fun backgroundSize() = runTest { fun backgroundSize() = runTest {
composition { composition {
Div({style { Div({
backgroundSize("contain") style {
}}) backgroundSize("contain")
Div({style { }
backgroundSize("cover") })
}}) Div({
Div({style { style {
backgroundSize("50%") backgroundSize("cover")
}}) }
Div({style { })
backgroundSize("auto 50px") Div({
}}) style {
backgroundSize("50%")
}
})
Div({
style {
backgroundSize("auto 50px")
}
})
} }
assertEquals("contain", window.getComputedStyle(nextChild()).backgroundSize) assertEquals("contain", window.getComputedStyle(nextChild()).backgroundSize)
@ -168,15 +214,21 @@ class CSSBackgroundTests {
@Test @Test
fun background() = runTest { fun background() = runTest {
composition { composition {
Div({style { Div({
background("green") style {
}}) background("green")
Div({style { }
background("content-box radial-gradient(crimson, skyblue)") })
}}) Div({
Div({style { style {
background("no-repeat url(\"../../media/examples/lizard.png\")") 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) assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)

2
web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt
Unescape View File

@ -8,8 +8,6 @@ package org.jetbrains.compose.web.core.tests.css
import org.jetbrains.compose.web.testutils.* import org.jetbrains.compose.web.testutils.*
import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLElement
import org.w3c.dom.get
import kotlin.test.Test import kotlin.test.Test
import kotlin.test.assertEquals import kotlin.test.assertEquals

1
web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt
Unescape View File

@ -5,7 +5,6 @@ import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.CSSSelector
import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.dom.*
class TestCases1 { class TestCases1 {

Write Preview
Loading…
Cancel
Save