Newer
Older
minerva / Tests / LibWeb / Text / input / css / transform-serialization.html
@minerva minerva on 13 Jul 2 KB Initial commit
<script src="../include.js"></script>
<script>
    test(() => {
        function serialize(input) {
            const e = document.createElement("div");
            e.style.transform = input;
            println(`${input} => ${e.style.transform}`);
        }

        for (transformOrigin of [
            "none",
            "matrix(1, 0, 0, 1, 0, 0)",
            "matrix(1, 2, 3, 4, 5, 6)",
            "matrix(-0.1, -0.2, -0.3, -0.4, -0.5, -0.6)",
            "translate(1px)",
            "translate(1px, 0%)",
            "translate(2%, -3%)",
            "translateX(-4px)",
            "translateY(5%)",
            "scale(2)",
            "scale(3, 4)",
            "scale(-2)",
            "scale(-5, -6)",
            "scale(250%)",
            "scale(2.5)",
            "scale(325%, 475%)",
            "scale(3.25, 4.75)",
            "scale(1, 200%)",
            "scale(1, 2)",
            "scale(-250%)",
            "scale(-2.5)",
            "scale(-500%, -620%)",
            "scale(-5, -6.2)",
            "scaleX(7)",
            "scaleX(720%)",
            "scaleX(7.2)",
            "scaleY(-8)",
            "scaleY(-85%)",
            "scaleY(-0.85)",
            "scaleZ(4)",
            "scaleZ(25%)",
            "scaleZ(0.25)",
            "scale3d(0.5, 2.5, 3)",
            "scale3d(50%, 250%, 300%)",
            "scale3d(0.5, 2.5, 3)",
            "scale3d(-0.5, 2.5, -3)",
            "scale3d(-50%, 250%, -300%)",
            "scale3d(-0.5, 2.5, -3)",
            "scale3d(1, 200%, 3)",
            "scale3d(1, 2, 3)",
            "rotate(0)",
            "rotate(0deg)",
            "rotate(90deg)",
            "skew(0)",
            "skew(0deg)",
            "skew(90deg)",
            "skew(0, -90deg)",
            "skew(0deg, -90deg)",
            "skew(90deg, 0)",
            "skewX(0)",
            "skewX(0deg)",
            "skewX(90deg)",
            "skewY(0)",
            "skewY(0deg)",
            "skewY(-90deg)",
            "perspective(10px)",
            "perspective(none)",
            "translate(1px, 2%) scale(3, 4) rotate(-90deg)",
        ]) {
            serialize(transformOrigin);
        }
    });
</script>