<!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(20%, 50%)').parsesAs('scale(0.2, 0.5)').isComputedTo('matrix(0.2, 0, 0, 0.5, 0, 0)');
expect('scale()').isInvalid();
expect('scale(1,)').isInvalid();
expect('scale(1, 2, 3)').isInvalid();
expect('scale(1px, 2px)').isInvalid();
// scaleX()
expect('scaleX(2)').parsesAs('scaleX(2)').isComputedTo('matrix(2, 0, 0, 1, 0, 0)');
expect('scaleX(50%)').parsesAs('scaleX(0.5)').isComputedTo('matrix(0.5, 0, 0, 1, 0, 0)');
expect('scaleX()').isInvalid();
expect('scaleX(1, 2)').isInvalid();
expect('scaleX(1px)').isInvalid();
// scaleY()
expect('scaleY(2)').parsesAs('scaleY(2)').isComputedTo('matrix(1, 0, 0, 2, 0, 0)');
expect('scaleY(50%)').parsesAs('scaleY(0.5)').isComputedTo('matrix(1, 0, 0, 0.5, 0, 0)');
expect('scaleY()').isInvalid();
expect('scaleY(1, 2)').isInvalid();
expect('scaleY(1px)').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(20%, 50%, 60%)').parsesAs('scale3d(0.2, 0.5, 0.6)').
isComputedTo('matrix3d(0.2, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.6, 0, 0, 0, 0, 1)');
expect('scale3d()').isInvalid();
expect('scale3d(1, 2, 3, 4)').isInvalid();
expect('scale3d(1px, 2px, 3px)').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(50%)').parsesAs('scaleZ(0.5)').
isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1)');
expect('scaleZ()').isInvalid();
expect('scaleZ(1, 2)').isInvalid();
expect('scaleZ(1px)').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>
Codebase Browser
chromium