third_party/WebKit/LayoutTests/transforms/transform-parsing.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <div id="target" style="width: 200px; height: 100px; display: inline-block"></div>
   5 <script src="resources/parsing-test-helper.js"></script>
   6 <script>
   7 expect = expect.bind(this, 'transform', 'transform');
   8
   9 expect('initial').parsesAs('initial').isComputedTo('none');
  10 expect('inherit').parsesAs('inherit');
  11 expect('0').isInvalid();
  12
  13 // none
  14 expect('none').parsesAs('none');
  15 expect('none none').isInvalid();
  16
  17 // transform list
  18 expect('translateX(10px) scale(2)').parsesAs('translateX(10px) scale(2)');
  19
  20 // matrix()
  21 expect('matrix(0, 1, 2, 3, 4, 5)').parsesAs('matrix(0, 1, 2, 3, 4, 5)').isComputedTo('matrix(0, 1, 2, 3, 4, 5)');
  22 expect('matrix()').isInvalid();
  23 expect('matrix(0, 1, 2, 3, 4)').isInvalid();
  24 expect('matrix(1px, 1, 2, 3, 4, 5)').isInvalid();
  25
  26 // translate()
  27 expect('translate(0)').parsesAs('translate(0px)');
  28 expect('translate(0, 0)').parsesAs('translate(0px, 0px)');
  29 expect('translate(1px, 2px)').parsesAs('translate(1px, 2px)').isComputedTo('matrix(1, 0, 0, 1, 1, 2)');
  30 expect('translate(1px)').parsesAs('translate(1px)');
  31 expect('translate(20%, 10%)').parsesAs('translate(20%, 10%)').isComputedTo('matrix(1, 0, 0, 1, 40, 10)');
  32 expect('translate()').isInvalid();
  33 expect('translate(1)').isInvalid();
  34 expect('translate(1, 2)').isInvalid();
  35 expect('translate(1px, 2px, 3px)').isInvalid();
  36
  37 // translateX()
  38 expect('translateX(0)').parsesAs('translateX(0px)');
  39 expect('translateX(2px)').parsesAs('translateX(2px)').isComputedTo('matrix(1, 0, 0, 1, 2, 0)');
  40 expect('translateX(50%)').parsesAs('translateX(50%)');
  41 expect('translateX(1)').isInvalid();
  42 expect('translateX()').isInvalid();
  43 expect('translateX(1px, 2px)').isInvalid();
  44
  45 // translateY()
  46 expect('translateY(0)').parsesAs('translateY(0px)');
  47 expect('translateY(2px)').parsesAs('translateY(2px)').isComputedTo('matrix(1, 0, 0, 1, 0, 2)');
  48 expect('translateY(50%)').parsesAs('translateY(50%)');
  49 expect('translateY(1)').isInvalid();
  50 expect('translateY()').isInvalid();
  51 expect('translateY(1px, 2px)').isInvalid();
  52
  53 // scale()
  54 expect('scale(1)').parsesAs('scale(1)');
  55 expect('scale(2, 3)').parsesAs('scale(2, 3)').isComputedTo('matrix(2, 0, 0, 3, 0, 0)');
  56 expect('scale()').isInvalid();
  57 expect('scale(1, 2, 3)').isInvalid();
  58 expect('scale(1px, 2px)').isInvalid();
  59 expect('scale(20%, 50%)').isInvalid();
  60
  61 // scaleX()
  62 expect('scaleX(2)').parsesAs('scaleX(2)').isComputedTo('matrix(2, 0, 0, 1, 0, 0)');
  63 expect('scaleX()').isInvalid();
  64 expect('scaleX(1, 2)').isInvalid();
  65 expect('scaleX(1px)').isInvalid();
  66 expect('scaleX(50%)').isInvalid();
  67
  68 // scaleY()
  69 expect('scaleY(2)').parsesAs('scaleY(2)').isComputedTo('matrix(1, 0, 0, 2, 0, 0)');
  70 expect('scaleY()').isInvalid();
  71 expect('scaleY(1, 2)').isInvalid();
  72 expect('scaleY(1px)').isInvalid();
  73 expect('scaleY(50%)').isInvalid();
  74
  75 // rotate()
  76 expect('rotate(0)').parsesAs('rotate(0deg)');
  77 expect('rotate(1deg)').parsesAs('rotate(1deg)');
  78 expect('rotate(2grad)').parsesAs('rotate(2grad)');
  79 expect('rotate(3rad)').parsesAs('rotate(3rad)');
  80 expect('rotate(4turn)').parsesAs('rotate(4turn)');
  81 expect('rotate(5px)').isInvalid();
  82 expect('rotate(6%)').isInvalid();
  83 expect('rotate(7)').isInvalid();
  84 expect('rotate(1deg, 1deg)').isInvalid();
  85 expect('rotate()').isInvalid();
  86
  87 // skew()
  88 expect('skew(0)').parsesAs('skew(0deg)');
  89 expect('skew(45deg)').parsesAs('skew(45deg)');
  90 expect('skew(10rad, 20turn)').parsesAs('skew(10rad, 20turn)');
  91 expect('skew(0, 0)').parsesAs('skew(0deg, 0deg)');
  92 expect('skew(1)').isInvalid();
  93 expect('skew(2%)').isInvalid();
  94 expect('skew()').isInvalid();
  95 expect('skew(1deg, 2deg, 3deg)').isInvalid();
  96
  97 // skewX()
  98 expect('skewX(0)').parsesAs('skewX(0deg)');
  99 expect('skewX(45deg)').parsesAs('skewX(45deg)');
 100 expect('skewX(1)').isInvalid();
 101 expect('skewX(2%)').isInvalid();
 102 expect('skewX()').isInvalid();
 103 expect('skewX(1deg, 2deg)').isInvalid();
 104
 105 // skeyY()
 106 expect('skewY(0)').parsesAs('skewY(0deg)');
 107 expect('skewY(45deg)').parsesAs('skewY(45deg)');
 108 expect('skewY(1)').isInvalid();
 109 expect('skewY(2%)').isInvalid();
 110 expect('skewY()').isInvalid();
 111 expect('skewY(1deg, 2deg)').isInvalid();
 112
 113 // matrix3d()
 114 expect('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)').
 115     parsesAs('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)').
 116     isComputedTo('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)');
 117 expect('matrix3d(0)').isInvalid();
 118 expect('matrix3d()').isInvalid();
 119 expect('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14)').isInvalid();
 120 expect('matrix3d(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)').isInvalid();
 121 expect('matrix3d(1px, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)').isInvalid();
 122 expect('matrix3d(1%, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)').isInvalid();
 123
 124 // translate3d()
 125 expect('translate3d(0, 0, 0)').parsesAs('translate3d(0px, 0px, 0px)');
 126 expect('translate3d(2px, 3px, 4px)').parsesAs('translate3d(2px, 3px, 4px)').
 127     isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2, 3, 4, 1)');
 128 expect('translate3d()').isInvalid();
 129 expect('translate3d(1px, 2px)').isInvalid();
 130 expect('translate3d(1px, 2px, 3px, 4px)').isInvalid();
 131 expect('translate3d(1, 1, 1px)').isInvalid();
 132 expect('translate3d(1, 1, 1)').isInvalid();
 133
 134 // translateZ()
 135 expect('translateZ(0)').parsesAs('translateZ(0px)');
 136 expect('translateZ(2px)').parsesAs('translateZ(2px)').
 137     isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 2, 1)');
 138 expect('translateZ()').isInvalid();
 139 expect('translateZ(1)').isInvalid();
 140 expect('translateZ(50%)').isInvalid();
 141 expect('translateZ(1px, 2px)').isInvalid();
 142
 143 // scale3d()
 144 expect('scale3d(2, 3, 4)').parsesAs('scale3d(2, 3, 4)').
 145     isComputedTo('matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1)');
 146 expect('scale3d()').isInvalid();
 147 expect('scale3d(1, 2, 3, 4)').isInvalid();
 148 expect('scale3d(1px, 2px, 3px)').isInvalid();
 149 expect('scale3d(20%, 50%, 60%)').isInvalid();
 150
 151 // scaleZ()
 152 expect('scaleZ(2)').parsesAs('scaleZ(2)').
 153     isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)');
 154 expect('scaleZ()').isInvalid();
 155 expect('scaleZ(1, 2)').isInvalid();
 156 expect('scaleZ(1px)').isInvalid();
 157 expect('scaleZ(50%)').isInvalid();
 158
 159 // rotate3d()
 160 expect('rotate3d(0, 0, 0, 0)').parsesAs('rotate3d(0, 0, 0, 0deg)');
 161 expect('rotate3d(1, 2, 3, 4deg)').parsesAs('rotate3d(1, 2, 3, 4deg)');
 162 expect('rotate3d()').isInvalid();
 163 expect('rotate3d(1, 2, 3)').isInvalid();
 164 expect('rotate3d(1, 2, 3, 4deg, 0)').isInvalid();
 165
 166 // rotateX()
 167 expect('rotateX(0)').parsesAs('rotateX(0deg)');
 168 expect('rotateX(1deg)').parsesAs('rotateX(1deg)');
 169 expect('rotateX()').isInvalid();
 170 expect('rotateX(1deg, 1deg)').isInvalid();
 171
 172 // rotateY()
 173 expect('rotateY(0)').parsesAs('rotateY(0deg)');
 174 expect('rotateY(1deg)').parsesAs('rotateY(1deg)');
 175 expect('rotateY()').isInvalid();
 176 expect('rotateY(1deg, 1deg)').isInvalid();
 177
 178 // rotateZ()
 179 expect('rotateZ(0)').parsesAs('rotateZ(0deg)');
 180 expect('rotateZ(1deg)').parsesAs('rotateZ(1deg)');
 181 expect('rotateZ()').isInvalid();
 182 expect('rotateZ(1deg, 1deg)').isInvalid();
 183
 184 // perspective()
 185 expect('perspective(2px)').parsesAs('perspective(2px)').
 186     isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.5, 0, 0, 0, 1)');
 187 expect('perspective(0px)').isInvalid();
 188 expect('perspective(2)').isInvalid();
 189 expect('perspective(5%)').isInvalid();
 190 expect('perspective()').isInvalid();
 191 expect('perspective(1px, 2px)').isInvalid();
 192 </script>