getComputedStyle-transform.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <script src="../include.js"></script>
  2. <script>
  3. test(() => {
  4. const e = document.createElement("div");
  5. document.body.appendChild(e);
  6. function checkTransform(transform) {
  7. e.style.transform = transform;
  8. const computedStyle = getComputedStyle(e);
  9. const serialized = computedStyle.transform;
  10. println(transform + " => " + serialized);
  11. }
  12. for (transform of [
  13. "none",
  14. "matrix(1, 2, 3, 4, 5, 6)",
  15. "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)",
  16. "translate(1%, 2px)",
  17. "translate3d(1%, 2px, 3em)",
  18. "translateX(1px)",
  19. "translateY(1%)",
  20. "scale(1, 2)",
  21. "scaleX(2)",
  22. "scaleY(2.5)",
  23. "rotate(1deg)",
  24. "rotateX(1rad)",
  25. "rotateY(1grad)",
  26. "rotateZ(1turn)",
  27. "skew(1deg, 1rad)",
  28. "skewX(1deg)",
  29. "skewY(1rad)",
  30. ]) {
  31. checkTransform(transform);
  32. }
  33. e.remove();
  34. });
  35. </script>