Browse Source

Introduce CSS transformations function translate3d

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

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

@ -48,6 +48,11 @@ fun translate(tx: CSSLengthValue, ty: CSSPercentageValue) = TransformFunction {
fun translate(tx: CSSPercentageValue, ty: CSSLengthValue) = TransformFunction { "translate($tx, $ty)" } fun translate(tx: CSSPercentageValue, ty: CSSLengthValue) = TransformFunction { "translate($tx, $ty)" }
fun translate(tx: CSSPercentageValue, ty: CSSPercentageValue) = TransformFunction { "translate($tx, $ty)" } fun translate(tx: CSSPercentageValue, ty: CSSPercentageValue) = TransformFunction { "translate($tx, $ty)" }
fun translate3d(tx: CSSLengthValue, ty: CSSLengthValue, tz: CSSLengthValue) = TransformFunction { "translate3d($tx, $ty, $tz)" }
fun translate3d(tx: CSSLengthValue, ty: CSSPercentageValue, tz: CSSLengthValue) = TransformFunction { "translate3d($tx, $ty, $tz)" }
fun translate3d(tx: CSSPercentageValue, ty: CSSLengthValue, tz: CSSLengthValue) = TransformFunction { "translate3d($tx, $ty, $tz)" }
fun translate3d(tx: CSSPercentageValue, ty: CSSPercentageValue, tz: CSSLengthValue) = TransformFunction { "translate3d($tx, $ty, $tz)" }
fun translateXTransform(tx: CSSLengthValue) = TransformFunction { "translateX($tx)" } fun translateXTransform(tx: CSSLengthValue) = TransformFunction { "translateX($tx)" }
fun translateXTransform(tx: CSSPercentageValue) = TransformFunction { "translateX($tx)" } fun translateXTransform(tx: CSSPercentageValue) = TransformFunction { "translateX($tx)" }

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

@ -191,6 +191,22 @@ class TransformTests {
assertEquals("translate(5%, 8%)", nextChild().style.transform) assertEquals("translate(5%, 8%)", nextChild().style.transform)
} }
@Test
fun translate3d() = runTest {
composition {
Div({ style { transform(translate3d(2.percent, 10.px, 1.em)) } })
Div({ style { transform(translate3d(10.px, 3.percent, 2.em)) } })
Div({ style { transform(translate3d(20.px, 10.px, 3.em)) } })
Div({ style { transform(translate3d(5.percent, 8.percent, 4.em)) } })
}
assertEquals("translate3d(2%, 10px, 1em)", nextChild().style.transform)
assertEquals("translate3d(10px, 3%, 2em)", nextChild().style.transform)
assertEquals("translate3d(20px, 10px, 3em)", nextChild().style.transform)
assertEquals("translate3d(5%, 8%, 4em)", nextChild().style.transform)
}
@Test @Test
fun translateX() = runTest { fun translateX() = runTest {
composition { composition {

Loading…
Cancel
Save