LibWeb: Add missing Canvas Context2D transform functions

Author: https://github.com/bplaat
Commit: https://github.com/SerenityOS/serenity/commit/8e7d3a6acc
Pull-request: https://github.com/SerenityOS/serenity/pull/20983
Reviewed-by: https://github.com/ADKaster ✅
Reviewed-by: https://github.com/awesomekling

Tests/LibWeb/Text/expected/canvas/transform.txt

@@ -0,0 +1,6 @@
+1. {"a":1,"b":0,"c":0,"d":1,"e":0,"f":0,"m11":1,"m12":0,"m13":0,"m14":0,"m21":0,"m22":1,"m23":0,"m24":0,"m31":0,"m32":0,"m33":1,"m34":0,"m41":0,"m42":0,"m43":0,"m44":1,"is2D":true,"isIdentity":true}
+2. {"a":1,"b":0,"c":0,"d":1,"e":45,"f":45,"m11":1,"m12":0,"m13":0,"m14":0,"m21":0,"m22":1,"m23":0,"m24":0,"m31":0,"m32":0,"m33":1,"m34":0,"m41":45,"m42":45,"m43":0,"m44":1,"is2D":true,"isIdentity":false}
+3. {"a":2,"b":0,"c":0,"d":2,"e":45,"f":45,"m11":2,"m12":0,"m13":0,"m14":0,"m21":0,"m22":2,"m23":0,"m24":0,"m31":0,"m32":0,"m33":1,"m34":0,"m41":45,"m42":45,"m43":0,"m44":1,"is2D":true,"isIdentity":false}
+4. {"a":1.0506439208984375,"b":1.7018070220947266,"c":-1.7018070220947266,"d":1.0506439208984375,"e":45,"f":45,"m11":1.0506439208984375,"m12":1.7018070220947266,"m13":0,"m14":0,"m21":-1.7018070220947266,"m22":1.0506439208984375,"m23":0,"m24":0,"m31":0,"m32":0,"m33":1,"m34":0,"m41":45,"m42":45,"m43":0,"m44":1,"is2D":true,"isIdentity":false}
+5. {"a":1,"b":2,"c":3,"d":4,"e":5,"f":6,"m11":1,"m12":2,"m13":0,"m14":0,"m21":3,"m22":4,"m23":0,"m24":0,"m31":0,"m32":0,"m33":1,"m34":0,"m41":5,"m42":6,"m43":0,"m44":1,"is2D":true,"isIdentity":false}
+6. {"a":1,"b":2,"c":3,"d":4,"e":5,"f":6,"m11":1,"m12":2,"m13":0,"m14":0,"m21":3,"m22":4,"m23":0,"m24":0,"m31":0,"m32":0,"m33":1,"m34":0,"m41":5,"m42":6,"m43":0,"m44":1,"is2D":true,"isIdentity":false}

Tests/LibWeb/Text/input/canvas/transform.html

@@ -0,0 +1,45 @@
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        let testCounter = 1;
+        function testPart(part) {
+            println(`${testCounter++}. ${JSON.stringify(part())}`);
+        }
+
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+
+        // 1. Default transform
+        testPart(() => context.getTransform());
+
+        // 2. Translate transform
+        testPart(() => {
+            context.translate(45, 45);
+            return context.getTransform();
+        });
+
+        // 3. Scale transform
+        testPart(() => {
+            context.scale(2, 2);
+            return context.getTransform();
+        });
+
+        // 4. Rotate transform
+        testPart(() => {
+            context.rotate(45);
+            return context.getTransform();
+        });
+
+        // 5. Set transform
+        testPart(() => {
+            context.setTransform(1, 2, 3, 4, 5, 6);
+            return context.getTransform();
+        });
+
+        // 6. Set transform by DOMMatrix2DInit
+        testPart(() => {
+            context.setTransform({ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 });
+            return context.getTransform();
+        });
+    });
+</script>

Userland/Libraries/LibWeb/HTML/Canvas/CanvasTransform.h

@@ -9,6 +9,7 @@
 #pragma once
 
 #include <AK/Debug.h>
+#include <LibWeb/Geometry/DOMMatrix.h>
 #include <LibWeb/HTML/Canvas/CanvasState.h>
 
 namespace Web::HTML {
@@ -52,6 +53,15 @@ public:
         my_drawing_state().transform.multiply({ static_cast<float>(a), static_cast<float>(b), static_cast<float>(c), static_cast<float>(d), static_cast<float>(e), static_cast<float>(f) });
     }
 
+    // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-gettransform
+    WebIDL::ExceptionOr<JS::NonnullGCPtr<Geometry::DOMMatrix>> get_transform()
+    {
+        auto& realm = static_cast<IncludingClass&>(*this).realm();
+        auto transform = my_drawing_state().transform;
+        Geometry::DOMMatrix2DInit init = { transform.a(), transform.b(), transform.c(), transform.d(), transform.e(), transform.f(), {}, {}, {}, {}, {}, {} };
+        return Geometry::DOMMatrix::create_from_dom_matrix_2d_init(realm, init);
+    }
+
     // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-settransform
     void set_transform(double a, double b, double c, double d, double e, double f)
     {
@@ -66,6 +76,22 @@ public:
         transform(a, b, c, d, e, f);
     }
 
+    // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-settransform-matrix
+    WebIDL::ExceptionOr<void> set_transform(Geometry::DOMMatrix2DInit& init)
+    {
+        // 1. Let matrix be the result of creating a DOMMatrix from the 2D dictionary transform.
+        auto& realm = static_cast<IncludingClass&>(*this).realm();
+        auto matrix = TRY(Geometry::DOMMatrix::create_from_dom_matrix_2d_init(realm, init));
+
+        // 2. If one or more of matrix's m11 element, m12 element, m21 element, m22 element, m41 element, or m42 element are infinite or NaN, then return.
+        if (!isfinite(matrix->m11()) || !isfinite(matrix->m12()) || !isfinite(matrix->m21()) || !isfinite(matrix->m22()) || !isfinite(matrix->m41()) || !isfinite(matrix->m42()))
+            return {};
+
+        // 3. Reset the current transformation matrix to matrix.
+        my_drawing_state().transform = { static_cast<float>(matrix->a()), static_cast<float>(matrix->b()), static_cast<float>(matrix->c()), static_cast<float>(matrix->d()), static_cast<float>(matrix->e()), static_cast<float>(matrix->f()) };
+        return {};
+    }
+
     // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-resettransform
     void reset_transform()
     {

Userland/Libraries/LibWeb/HTML/Canvas/CanvasTransform.idl

@@ -1,3 +1,5 @@
+#import <Geometry/DOMMatrix.idl>
+
 // https://html.spec.whatwg.org/multipage/canvas.html#canvastransform
 interface mixin CanvasTransform {
     undefined scale(unrestricted double x, unrestricted double y);
@@ -5,8 +7,8 @@ interface mixin CanvasTransform {
     undefined translate(unrestricted double x, unrestricted double y);
     undefined transform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
 
-    // FIXME: [NewObject] DOMMatrix getTransform();
+    [NewObject] DOMMatrix getTransform();
     undefined setTransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
-    // FIXME: undefined setTransform(optional DOMMatrix2DInit transform = {});
+    undefined setTransform(optional DOMMatrix2DInit transform = {});
     undefined resetTransform();
 };