| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <div id="target" style="width: 200px; height: 100px; display: inline-block"></div> |
| <script src="resources/parsing-test-helper.js"></script> |
| <script> |
| expect = expect.bind(this, 'transform', 'transform'); |
| |
| expect('initial').parsesAs('initial').isComputedTo('none'); |
| expect('inherit').parsesAs('inherit'); |
| expect('0').isInvalid(); |
| |
| // none |
| expect('none').parsesAs('none'); |
| expect('none none').isInvalid(); |
| |
| // transform list |
| expect('translateX(10px) scale(2)').parsesAs('translateX(10px) scale(2)'); |
| |
| // matrix() |
| expect('matrix(0, 1, 2, 3, 4, 5)').parsesAs('matrix(0, 1, 2, 3, 4, 5)').isComputedTo('matrix(0, 1, 2, 3, 4, 5)'); |
| expect('matrix()').isInvalid(); |
| expect('matrix(0, 1, 2, 3, 4)').isInvalid(); |
| expect('matrix(1px, 1, 2, 3, 4, 5)').isInvalid(); |
| |
| // translate() |
| expect('translate(0)').parsesAs('translate(0px)'); |
| expect('translate(0, 0)').parsesAs('translate(0px, 0px)'); |
| expect('translate(1px, 2px)').parsesAs('translate(1px, 2px)').isComputedTo('matrix(1, 0, 0, 1, 1, 2)'); |
| expect('translate(1px)').parsesAs('translate(1px)'); |
| expect('translate(20%, 10%)').parsesAs('translate(20%, 10%)').isComputedTo('matrix(1, 0, 0, 1, 40, 10)'); |
| expect('translate()').isInvalid(); |
| expect('translate(1)').isInvalid(); |
| expect('translate(1, 2)').isInvalid(); |
| expect('translate(1px,)').isInvalid(); |
| expect('translate(1px, 2px, 3px)').isInvalid(); |
| |
| // translateX() |
| expect('translateX(0)').parsesAs('translateX(0px)'); |
| expect('translateX(2px)').parsesAs('translateX(2px)').isComputedTo('matrix(1, 0, 0, 1, 2, 0)'); |
| expect('translateX(50%)').parsesAs('translateX(50%)'); |
| expect('translateX(1)').isInvalid(); |
| expect('translateX()').isInvalid(); |
| expect('translateX(1px, 2px)').isInvalid(); |
| |
| // translateY() |
| expect('translateY(0)').parsesAs('translateY(0px)'); |
| expect('translateY(2px)').parsesAs('translateY(2px)').isComputedTo('matrix(1, 0, 0, 1, 0, 2)'); |
| expect('translateY(50%)').parsesAs('translateY(50%)'); |
| expect('translateY(1)').isInvalid(); |
| expect('translateY()').isInvalid(); |
| expect('translateY(1px, 2px)').isInvalid(); |
| |
| // scale() |
| expect('scale(1)').parsesAs('scale(1)'); |
| expect('scale(2, 3)').parsesAs('scale(2, 3)').isComputedTo('matrix(2, 0, 0, 3, 0, 0)'); |
| expect('scale()').isInvalid(); |
| expect('scale(1,)').isInvalid(); |
| expect('scale(1, 2, 3)').isInvalid(); |
| expect('scale(1px, 2px)').isInvalid(); |
| expect('scale(20%, 50%)').isInvalid(); |
| |
| // scaleX() |
| expect('scaleX(2)').parsesAs('scaleX(2)').isComputedTo('matrix(2, 0, 0, 1, 0, 0)'); |
| expect('scaleX()').isInvalid(); |
| expect('scaleX(1, 2)').isInvalid(); |
| expect('scaleX(1px)').isInvalid(); |
| expect('scaleX(50%)').isInvalid(); |
| |
| // scaleY() |
| expect('scaleY(2)').parsesAs('scaleY(2)').isComputedTo('matrix(1, 0, 0, 2, 0, 0)'); |
| expect('scaleY()').isInvalid(); |
| expect('scaleY(1, 2)').isInvalid(); |
| expect('scaleY(1px)').isInvalid(); |
| expect('scaleY(50%)').isInvalid(); |
| |
| // rotate() |
| expect('rotate(0)').parsesAs('rotate(0deg)'); |
| expect('rotate(1deg)').parsesAs('rotate(1deg)'); |
| expect('rotate(2grad)').parsesAs('rotate(2grad)'); |
| expect('rotate(3rad)').parsesAs('rotate(3rad)'); |
| expect('rotate(4turn)').parsesAs('rotate(4turn)'); |
| expect('rotate(5px)').isInvalid(); |
| expect('rotate(6%)').isInvalid(); |
| expect('rotate(7)').isInvalid(); |
| expect('rotate(1deg, 1deg)').isInvalid(); |
| expect('rotate()').isInvalid(); |
| |
| // skew() |
| expect('skew(0)').parsesAs('skew(0deg)'); |
| expect('skew(45deg)').parsesAs('skew(45deg)'); |
| expect('skew(10rad, 20turn)').parsesAs('skew(10rad, 20turn)'); |
| expect('skew(0, 0)').parsesAs('skew(0deg, 0deg)'); |
| expect('skew(1)').isInvalid(); |
| expect('skew(2%)').isInvalid(); |
| expect('skew()').isInvalid(); |
| expect('skew(45deg,)').isInvalid(); |
| expect('skew(1deg, 2deg, 3deg)').isInvalid(); |
| |
| // skewX() |
| expect('skewX(0)').parsesAs('skewX(0deg)'); |
| expect('skewX(45deg)').parsesAs('skewX(45deg)'); |
| expect('skewX(1)').isInvalid(); |
| expect('skewX(2%)').isInvalid(); |
| expect('skewX()').isInvalid(); |
| expect('skewX(1deg, 2deg)').isInvalid(); |
| |
| // skeyY() |
| expect('skewY(0)').parsesAs('skewY(0deg)'); |
| expect('skewY(45deg)').parsesAs('skewY(45deg)'); |
| expect('skewY(1)').isInvalid(); |
| expect('skewY(2%)').isInvalid(); |
| expect('skewY()').isInvalid(); |
| expect('skewY(1deg, 2deg)').isInvalid(); |
| |
| // matrix3d() |
| expect('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)'). |
| parsesAs('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)'). |
| isComputedTo('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)'); |
| expect('matrix3d(0)').isInvalid(); |
| expect('matrix3d()').isInvalid(); |
| expect('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14)').isInvalid(); |
| expect('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)').isInvalid(); |
| expect('matrix3d(1px, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)').isInvalid(); |
| expect('matrix3d(1%, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)').isInvalid(); |
| |
| // translate3d() |
| expect('translate3d(0, 0, 0)').parsesAs('translate3d(0px, 0px, 0px)'); |
| expect('translate3d(2px, 3px, 4px)').parsesAs('translate3d(2px, 3px, 4px)'). |
| isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2, 3, 4, 1)'); |
| expect('translate3d()').isInvalid(); |
| expect('translate3d(1px, 2px)').isInvalid(); |
| expect('translate3d(1px, 2px, 3px, 4px)').isInvalid(); |
| expect('translate3d(1, 1, 1px)').isInvalid(); |
| expect('translate3d(1, 1, 1)').isInvalid(); |
| |
| // translateZ() |
| expect('translateZ(0)').parsesAs('translateZ(0px)'); |
| expect('translateZ(2px)').parsesAs('translateZ(2px)'). |
| isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 2, 1)'); |
| expect('translateZ()').isInvalid(); |
| expect('translateZ(1)').isInvalid(); |
| expect('translateZ(50%)').isInvalid(); |
| expect('translateZ(1px, 2px)').isInvalid(); |
| |
| // scale3d() |
| expect('scale3d(2, 3, 4)').parsesAs('scale3d(2, 3, 4)'). |
| isComputedTo('matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1)'); |
| expect('scale3d()').isInvalid(); |
| expect('scale3d(1, 2, 3, 4)').isInvalid(); |
| expect('scale3d(1px, 2px, 3px)').isInvalid(); |
| expect('scale3d(20%, 50%, 60%)').isInvalid(); |
| |
| // scaleZ() |
| expect('scaleZ(2)').parsesAs('scaleZ(2)'). |
| isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)'); |
| expect('scaleZ()').isInvalid(); |
| expect('scaleZ(1, 2)').isInvalid(); |
| expect('scaleZ(1px)').isInvalid(); |
| expect('scaleZ(50%)').isInvalid(); |
| |
| // rotate3d() |
| expect('rotate3d(0, 0, 0, 0)').parsesAs('rotate3d(0, 0, 0, 0deg)'); |
| expect('rotate3d(1, 2, 3, 4deg)').parsesAs('rotate3d(1, 2, 3, 4deg)'); |
| expect('rotate3d()').isInvalid(); |
| expect('rotate3d(1, 2, 3)').isInvalid(); |
| expect('rotate3d(1, 2, 3, 4deg, 0)').isInvalid(); |
| expect('rotate3d(1, 2, 3, )').isInvalid(); |
| |
| // rotateX() |
| expect('rotateX(0)').parsesAs('rotateX(0deg)'); |
| expect('rotateX(1deg)').parsesAs('rotateX(1deg)'); |
| expect('rotateX()').isInvalid(); |
| expect('rotateX(1deg, 1deg)').isInvalid(); |
| |
| // rotateY() |
| expect('rotateY(0)').parsesAs('rotateY(0deg)'); |
| expect('rotateY(1deg)').parsesAs('rotateY(1deg)'); |
| expect('rotateY()').isInvalid(); |
| expect('rotateY(1deg, 1deg)').isInvalid(); |
| |
| // rotateZ() |
| expect('rotateZ(0)').parsesAs('rotateZ(0deg)'); |
| expect('rotateZ(1deg)').parsesAs('rotateZ(1deg)'); |
| expect('rotateZ()').isInvalid(); |
| expect('rotateZ(1deg, 1deg)').isInvalid(); |
| |
| // perspective() |
| expect('perspective(2px)').parsesAs('perspective(2px)'). |
| isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.5, 0, 0, 0, 1)'); |
| expect('perspective(0px)').isInvalid(); |
| expect('perspective(2)').isInvalid(); |
| expect('perspective(5%)').isInvalid(); |
| expect('perspective()').isInvalid(); |
| expect('perspective(1px, 2px)').isInvalid(); |
| </script> |