Browse Source

Introduce CSS transformation function matrix3d

CSS_TRANSFORMATION
Shagen Ogandzhanian 3 years ago
parent
commit
805e2a24ca
  1. 6
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt
  2. 13
      web/core/src/jsTest/kotlin/css/TransitionTests.kt

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

@ -13,6 +13,12 @@ fun interface TransformFunction {
fun matrixTransform(a: Number, b: Number, c: Number, d: Number, tx: Number, ty: Number)
= TransformFunction { "matrix($a, $b, $c, $d, $tx, $ty)" }
fun matrix3dTransform(
a1: Number, b1: Number, c1: Number, d1: Number,
a2: Number, b2: Number, c2: Number, d2: Number,
a3: Number, b3: Number, c3: Number, d3: Number,
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 StyleBuilder.transform(transformFunction: TransformFunction) {
property("transform", transformFunction.apply())

13
web/core/src/jsTest/kotlin/css/TransitionTests.kt

@ -6,6 +6,7 @@
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.dom.Div
@ -16,9 +17,19 @@ class TransitionTests {
@Test
fun matrix() = runTest {
composition {
Div({style { transform(matrixTransform(1, 2, -1, 1, 80, 80)) }})
Div({ style { transform(matrixTransform(1, 2, -1, 1, 80, 80)) } })
}
assertEquals("matrix(1, 2, -1, 1, 80, 80)", nextChild().style.transform)
}
@Test
fun matrix3d() = runTest {
composition {
Div({ style { transform(matrix3dTransform(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1)) } })
}
assertEquals("matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1)", nextChild().style.transform)
}
}
Loading…
Cancel
Save