Browse Source

Introduce CSS transformation function perspective

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

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

@ -20,6 +20,8 @@ fun matrix3dTransform(
a4: Number, b4: Number, c4: Number, d4: Number
) = TransformFunction { "matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4)" }
fun perspectiveTransform(d: CSSLengthValue) = TransformFunction { "perspective($d)" }
fun StyleBuilder.transform(transformFunction: TransformFunction) {
property("transform", transformFunction.apply())
}

14
web/core/src/jsTest/kotlin/css/TransitionTests.kt → web/core/src/jsTest/kotlin/css/TransformTests.kt

@ -6,14 +6,12 @@
package org.jetbrains.compose.web.core.tests.css
import org.jetbrains.compose.web.core.tests.runTest
import org.jetbrains.compose.web.css.matrix3dTransform
import org.jetbrains.compose.web.css.matrixTransform
import org.jetbrains.compose.web.css.transform
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div
import kotlin.test.Test
import kotlin.test.assertEquals
class TransitionTests {
class TransformTests {
@Test
fun matrix() = runTest {
composition {
@ -32,4 +30,12 @@ class TransitionTests {
assertEquals("matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1)", nextChild().style.transform)
}
@Test
fun perspective() = runTest {
composition {
Div({ style { transform(perspectiveTransform(3.cm)) } })
}
assertEquals("perspective(3cm)", nextChild().style.transform)
}
}
Loading…
Cancel
Save