From 18bf0ac0580db781d0022fdb5b37f619a120b8e6 Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Wed, 18 Aug 2021 19:30:33 +0200
Subject: [PATCH] Introduce CSS transformation function perspective

---
 .../compose/web/css/properties/transform.kt        |  2 ++
 .../css/{TransitionTests.kt => TransformTests.kt}  | 14 ++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)
 rename web/core/src/jsTest/kotlin/css/{TransitionTests.kt => TransformTests.kt} (76%)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt
index 6e13b024b5..41c7abf3e9 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt
+++ b/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())
 }
\ No newline at end of file
diff --git a/web/core/src/jsTest/kotlin/css/TransitionTests.kt b/web/core/src/jsTest/kotlin/css/TransformTests.kt
similarity index 76%
rename from web/core/src/jsTest/kotlin/css/TransitionTests.kt
rename to web/core/src/jsTest/kotlin/css/TransformTests.kt
index e40fcc09df..f4a3ff429e 100644
--- a/web/core/src/jsTest/kotlin/css/TransitionTests.kt
+++ b/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)
+    }
 }
\ No newline at end of file