From 95bbe04b2aec4342869c5de33aa8ce5b29f04cd5 Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Wed, 18 Aug 2021 22:18:44 +0200
Subject: [PATCH] Introduce CSS transformation function translate

---
 .../compose/web/css/properties/transform.kt   |  8 ++++++++
 .../src/jsTest/kotlin/css/TransformTests.kt   | 20 +++++++++++++++++++
 2 files changed, 28 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 398164d496..0fb0e9b687 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
@@ -40,6 +40,14 @@ fun skewTransform(ax: CSSAngleValue, ay: CSSAngleValue) = TransformFunction { "s
 fun skewXTransform(a: CSSAngleValue) = TransformFunction { "skewX($a)" }
 fun skewYTransform(a: CSSAngleValue) = TransformFunction { "skewY($a)" }
 
+fun translate(tx: CSSLengthValue) = TransformFunction { "translate($tx)" }
+fun translate(tx: CSSPercentageValue) = TransformFunction { "translate($tx)" }
+
+fun translate(tx: CSSLengthValue, ty: CSSLengthValue) = TransformFunction { "translate($tx, $ty)" }
+fun translate(tx: CSSLengthValue, ty: CSSPercentageValue) = 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 StyleBuilder.transform(transformFunction: TransformFunction) {
     property("transform", transformFunction.apply())
 }
\ No newline at end of file
diff --git a/web/core/src/jsTest/kotlin/css/TransformTests.kt b/web/core/src/jsTest/kotlin/css/TransformTests.kt
index 8c663fdc2d..5ce78db09f 100644
--- a/web/core/src/jsTest/kotlin/css/TransformTests.kt
+++ b/web/core/src/jsTest/kotlin/css/TransformTests.kt
@@ -171,4 +171,24 @@ class TransformTests {
 
         assertEquals("skewY(2rad)", nextChild().style.transform)
     }
+
+    @Test
+    fun translate() = runTest {
+        composition {
+            Div({ style { transform(translate(10.px)) } })
+            Div({ style { transform(translate(4.percent)) } })
+            Div({ style { transform(translate(2.percent, 10.px)) } })
+            Div({ style { transform(translate(10.px, 3.percent)) } })
+            Div({ style { transform(translate(20.px, 10.px)) } })
+            Div({ style { transform(translate(5.percent, 8.percent)) } })
+        }
+
+        assertEquals("translate(10px)", nextChild().style.transform)
+        assertEquals("translate(4%)", nextChild().style.transform)
+        assertEquals("translate(2%, 10px)", nextChild().style.transform)
+        assertEquals("translate(10px, 3%)", nextChild().style.transform)
+        assertEquals("translate(20px, 10px)", nextChild().style.transform)
+        assertEquals("translate(5%, 8%)", nextChild().style.transform)
+    }
+
 }
\ No newline at end of file