ladybird/Tests/LibWeb/Text/input/css/transform-serialization.html

73 lines
2.1 KiB
HTML

<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>