Browse Source

transform supporti multiple functions applied

CSS_TRANSFORMATION
Shagen Ogandzhanian 3 years ago
parent
commit
2cfaf07e65
  1. 4
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt
  2. 9
      web/core/src/jsTest/kotlin/css/TransformTests.kt

4
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt

@ -61,6 +61,6 @@ fun translateYTransform(ty: CSSPercentageValue) = TransformFunction { "translate
fun translateZTransform(tz: CSSLengthValue) = TransformFunction { "translateZ($tz)" } fun translateZTransform(tz: CSSLengthValue) = TransformFunction { "translateZ($tz)" }
fun StyleBuilder.transform(transformFunction: TransformFunction) { fun StyleBuilder.transform(vararg transformFunction: TransformFunction) {
property("transform", transformFunction.apply()) property("transform", transformFunction.joinToString(" ") { it.apply() })
} }

9
web/core/src/jsTest/kotlin/css/TransformTests.kt

@ -237,4 +237,13 @@ class TransformTests {
assertEquals("translateZ(7px)", nextChild().style.transform) assertEquals("translateZ(7px)", nextChild().style.transform)
} }
@Test
fun mutlipleTransforms() = runTest {
composition {
Div({ style { transform(perspectiveTransform(3.cm), translate(10.px, 3.px), rotateYTransform(3.deg)) } })
}
assertEquals("perspective(3cm) translate(10px, 3px) rotateY(3deg)", nextChild().style.transform)
}
} }
Loading…
Cancel
Save