From ef31ce02bd3236877be950662198124dd609e402 Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Wed, 18 Aug 2021 22:36:27 +0200
Subject: [PATCH] Introduce CSS transformations function translate3d

---
 .../compose/web/css/properties/transform.kt      |  5 +++++
 web/core/src/jsTest/kotlin/css/TransformTests.kt | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)

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 3f06f7e951..fda13f095d 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
@@ -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: 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: CSSPercentageValue) = TransformFunction { "translateX($tx)" }
 
diff --git a/web/core/src/jsTest/kotlin/css/TransformTests.kt b/web/core/src/jsTest/kotlin/css/TransformTests.kt
index 147d3aba0c..a385d9097a 100644
--- a/web/core/src/jsTest/kotlin/css/TransformTests.kt
+++ b/web/core/src/jsTest/kotlin/css/TransformTests.kt
@@ -191,6 +191,22 @@ class TransformTests {
         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
     fun translateX() = runTest {
         composition {