Introduce CSS transformation functions skew, skewY, skewZ

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

@@ -35,6 +35,10 @@ fun scaleXTransform(s: Number) = TransformFunction { "scaleX($s)" }
 fun scaleYTransform(s: Number) = TransformFunction { "scaleY($s)" }
 fun scaleZTransform(s: Number) = TransformFunction { "scaleZ($s)" }
 
+fun skewTransform(ax: CSSAngleValue) = TransformFunction { "skew($ax)" }
+fun skewTransform(ax: CSSAngleValue, ay: CSSAngleValue) = TransformFunction { "skew($ax, $ay)" }
+fun skewXTransform(a: CSSAngleValue) = TransformFunction { "skewX($a)" }
+fun skewYTransform(a: CSSAngleValue) = TransformFunction { "skewY($a)" }
 
 fun StyleBuilder.transform(transformFunction: TransformFunction) {
     property("transform", transformFunction.apply())

web/core/src/jsTest/kotlin/css/TransformTests.kt

@@ -142,4 +142,33 @@ class TransformTests {
 
         assertEquals("scaleZ(0.12)", nextChild().style.transform)
     }
+
+    @Test
+    fun skew() = runTest {
+        composition {
+            Div({ style { transform(skewTransform(2.deg)) } })
+            Div({ style { transform(skewTransform(1.rad, 2.deg)) } })
+        }
+
+        assertEquals("skew(2deg)", nextChild().style.transform)
+        assertEquals("skew(1rad, 2deg)", nextChild().style.transform)
+    }
+
+    @Test
+    fun skewX() = runTest {
+        composition {
+            Div({ style { transform(skewXTransform(2.deg)) } })
+        }
+
+        assertEquals("skewX(2deg)", nextChild().style.transform)
+    }
+
+    @Test
+    fun skewY() = runTest {
+        composition {
+            Div({ style { transform(skewYTransform(2.rad)) } })
+        }
+
+        assertEquals("skewY(2rad)", nextChild().style.transform)
+    }
 }