Introduce CSS transformation function translate

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())
 }

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)
+    }
+
 }