| <!DOCTYPE html> |
| <script src='../../../resources/testharness.js'></script> |
| <script src='../../../resources/testharnessreport.js'></script> |
| <script src='property-suite.js'></script> |
| |
| <div id="testElement"></div> |
| |
| <script> |
| |
| let zeroAngle = new CSSUnitValue(0, 'deg'); |
| |
| function angleValue(value, unit) { |
| return new CSSUnitValue(value, unit); |
| } |
| |
| function cssTransformWithRotate(angleValue) { |
| return new CSSTransformValue([ |
| new CSSRotation(angleValue)]); |
| } |
| |
| function cssTransformWithRotate3D(x, y, z, angleValue) { |
| return new CSSTransformValue([ |
| new CSSRotation(x, y, z, angleValue)]); |
| } |
| |
| runInlineStylePropertyMapTests( { |
| property: 'transform', |
| validKeywords: [ |
| 'none', |
| ], |
| validObjects: [ |
| // Translations |
| // TODO(meade) |
| // Scales |
| // TODO(meade) |
| // Skews |
| new CSSTransformValue([new CSSSkew(angleValue(30, 'deg'), zeroAngle)]), |
| new CSSTransformValue([new CSSSkew(angleValue(10, 'rad'), zeroAngle)]), |
| new CSSTransformValue([new CSSSkew(angleValue(2, 'grad'), zeroAngle)]), |
| new CSSTransformValue([new CSSSkew(angleValue(0.2, 'turn'), zeroAngle)]), |
| new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(30, 'deg'))]), |
| new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(10, 'rad'))]), |
| new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(2, 'grad'))]), |
| new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(0.2, 'turn'))]), |
| // Rotations |
| cssTransformWithRotate(angleValue(30, 'deg')), |
| cssTransformWithRotate(angleValue(10, 'rad')), |
| cssTransformWithRotate(angleValue(2, 'grad')), |
| cssTransformWithRotate(angleValue(0.2, 'turn')), |
| cssTransformWithRotate3D(1, 2, 3, angleValue(30, 'deg')), |
| cssTransformWithRotate3D(1, 2, 3, angleValue(10, 'rad')), |
| cssTransformWithRotate3D(1, 2, 3, angleValue(2, 'grad')), |
| cssTransformWithRotate3D(1, 2, 3, angleValue(0.2, 'turn')), |
| // Perspectives |
| new CSSTransformValue([new CSSPerspective(CSS.px(10))]), |
| new CSSTransformValue([new CSSPerspective(CSS.em(5))]), |
| ], |
| // Values with these strings aren't used in Typed OM, but can also be |
| // represented by the specified values. |
| validStringMappings: { |
| // Skews |
| 'skew(45deg)': |
| new CSSTransformValue([new CSSSkew(angleValue(45, 'deg'), zeroAngle)]), |
| 'skew(1rad)': |
| new CSSTransformValue([new CSSSkew(angleValue(1, 'rad'), zeroAngle)]), |
| 'skew(6.2grad)': |
| new CSSTransformValue([new CSSSkew(angleValue(6.2, 'grad'), zeroAngle)]), |
| 'skew(0.31turn)': |
| new CSSTransformValue([new CSSSkew(angleValue(0.31, 'turn'), zeroAngle)]), |
| 'skewX(45deg)': |
| new CSSTransformValue([new CSSSkew(angleValue(45, 'deg'), zeroAngle)]), |
| 'skewX(1rad)': |
| new CSSTransformValue([new CSSSkew(angleValue(1, 'rad'), zeroAngle)]), |
| 'skewX(6.2grad)': |
| new CSSTransformValue([new CSSSkew(angleValue(6.2, 'grad'), zeroAngle)]), |
| 'skewX(0.31turn)': |
| new CSSTransformValue([new CSSSkew(angleValue(0.31, 'turn'), zeroAngle)]), |
| 'skewY(45deg)': |
| new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(45, 'deg'))]), |
| 'skewY(1rad)': |
| new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(1, 'rad'))]), |
| 'skewY(6.2grad)': |
| new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(6.2, 'grad'))]), |
| 'skewY(0.31turn)': |
| new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(0.31, 'turn'))]), |
| // Rotations |
| 'rotateX(45deg)': cssTransformWithRotate3D(1, 0, 0, angleValue(45, 'deg')), |
| 'rotateX(1rad)': cssTransformWithRotate3D(1, 0, 0, angleValue(1, 'rad')), |
| 'rotateX(6.2grad)': |
| cssTransformWithRotate3D(1, 0, 0, angleValue(6.2, 'grad')), |
| 'rotateX(0.31turn)': |
| cssTransformWithRotate3D(1, 0, 0, angleValue(0.31, 'turn')), |
| 'rotateY(45deg)': cssTransformWithRotate3D(0, 1, 0, angleValue(45, 'deg')), |
| 'rotateY(1rad)': cssTransformWithRotate3D(0, 1, 0, angleValue(1, 'rad')), |
| 'rotateY(6.2grad)': |
| cssTransformWithRotate3D(0, 1, 0, angleValue(6.2, 'grad')), |
| 'rotateY(0.31turn)': |
| cssTransformWithRotate3D(0, 1, 0, angleValue(0.31, 'turn')), |
| 'rotateZ(45deg)': cssTransformWithRotate3D(0, 0, 1, angleValue(45, 'deg')), |
| 'rotateZ(1rad)': cssTransformWithRotate3D(0, 0, 1, angleValue(1, 'rad')), |
| 'rotateZ(6.2grad)': |
| cssTransformWithRotate3D(0, 0, 1, angleValue(6.2, 'grad')), |
| 'rotateZ(0.31turn)': |
| cssTransformWithRotate3D(0, 0, 1, angleValue(0.31, 'turn')), |
| }, |
| supportsMultiple: false, |
| invalidObjects: [new CSSUnitValue(4, 'px')] |
| }); |
| |
| let crashTestStrings = { |
| 'rotate(calc(45deg + 1rad))': 'rotate(calc(102.296deg))', |
| 'rotate3d(1, 2, 3, calc(45deg + 1rad))': 'rotate3d(1, 2, 3, calc(102.296deg))', |
| 'skew(calc(5deg + 0.1rad))': 'skew(calc(10.7296deg))', |
| 'skew(calc(5deg + 0.1rad), 5deg)': 'skew(calc(10.7296deg), 5deg)', |
| 'skew(5deg, calc(5deg + 0.1rad))': 'skew(5deg, calc(10.7296deg))', |
| 'skewX(calc(5deg + 0.1rad))': 'skewX(calc(10.7296deg))', |
| 'skewY(calc(5deg + 0.1rad))': 'skewY(calc(10.7296deg))', |
| 'perspective(calc(10px + 5em))': 'perspective(calc(10px + 5em))', |
| }; |
| |
| for (let inputString in crashTestStrings) { |
| test(() => { |
| testElement.style.transform = inputString; |
| let result = testElement.styleMap.get('transform'); |
| assert_equals(result.constructor, CSSStyleValue, |
| 'result is a base CSSStyleValue'); |
| assert_equals(result.toString(), crashTestStrings[inputString]); |
| }, "Getting transform when it is set to " + inputString + " does not crash"); |
| } |
| |
| // TODO(meade): Remove/update this test once translate is supported. |
| test(function() { |
| testElement.style.transform = 'translateY(50px)'; |
| testElement.styleMap.entries(); |
| }, "Unhandled translate case doesn't crash."); |
| |
| test(function() { |
| // Clear transform |
| let transform = new CSSTransformValue([new CSSPerspective(CSS.px(-5))]); |
| assert_throws(new TypeError(), () => { |
| testElement.styleMap.set('transform', transform); |
| }); |
| }, "Invalid perspective (negative length) doesn't crash"); |
| |
| </script> |
