| <!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> |
| |
| 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 |
| new CSSTransformValue([new CSSTranslation(CSS.px(1), CSS.px(2))]), |
| new CSSTransformValue( |
| [new CSSTranslation(CSS.px(1), CSS.px(2), CSS.px(3))]), |
| new CSSTransformValue([new CSSTranslation(CSS.px(-10), CSS.px(-20))]), |
| new CSSTransformValue( |
| [new CSSTranslation(CSS.px(-10), CSS.px(-20), CSS.px(-30))]), |
| // Scales |
| new CSSTransformValue([new CSSScale(1, 2.2)]), |
| new CSSTransformValue([new CSSScale(1, 2.2, 3)]), |
| new CSSTransformValue([new CSSScale(-1, -2.2)]), |
| new CSSTransformValue([new CSSScale(-1, -2.2, -3)]), |
| // Skews |
| new CSSTransformValue([new CSSSkew(CSS.deg(30), CSS.deg(0))]), |
| new CSSTransformValue([new CSSSkew(CSS.rad(10), CSS.deg(0))]), |
| new CSSTransformValue([new CSSSkew(CSS.grad(2), CSS.deg(0))]), |
| new CSSTransformValue([new CSSSkew(CSS.turn(0.2), CSS.deg(0))]), |
| new CSSTransformValue([new CSSSkew(CSS.deg(0), CSS.deg(30))]), |
| new CSSTransformValue([new CSSSkew(CSS.deg(0), CSS.rad(10))]), |
| new CSSTransformValue([new CSSSkew(CSS.deg(0), CSS.grad(2))]), |
| new CSSTransformValue([new CSSSkew(CSS.deg(0), CSS.turn(0.2))]), |
| // Rotations |
| cssTransformWithRotate(CSS.deg(30)), |
| cssTransformWithRotate(CSS.rad(10)), |
| cssTransformWithRotate(CSS.grad(2)), |
| cssTransformWithRotate(CSS.turn(0.2)), |
| cssTransformWithRotate3D(1, 2, 3, CSS.deg(30)), |
| cssTransformWithRotate3D(1, 2, 3, CSS.rad(10)), |
| cssTransformWithRotate3D(1, 2, 3, CSS.grad(2)), |
| cssTransformWithRotate3D(1, 2, 3, CSS.turn(0.2)), |
| // 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: { |
| // Translations |
| 'translate(10px)': |
| new CSSTransformValue([new CSSTranslation(CSS.px(10), CSS.px(0))]), |
| 'translateX(10em)': |
| new CSSTransformValue([new CSSTranslation(CSS.em(10), CSS.px(0))]), |
| 'translateY(20pc)': |
| new CSSTransformValue([new CSSTranslation(CSS.px(0), CSS.pc(20))]), |
| 'translateZ(30in)': |
| new CSSTransformValue( |
| [new CSSTranslation(CSS.px(0), CSS.px(0), CSS.in(30))]), |
| // Scales |
| 'scale(4)': new CSSTransformValue([new CSSScale(4, 4)]), |
| 'scaleX(2)': new CSSTransformValue([new CSSScale(2, 1)]), |
| 'scaleY(3)': new CSSTransformValue([new CSSScale(1, 3)]), |
| // Skews |
| 'skew(45deg)': |
| new CSSTransformValue([new CSSSkew(CSS.deg(45), CSS.deg(0))]), |
| 'skew(1rad)': new CSSTransformValue([new CSSSkew(CSS.rad(1), CSS.deg(0))]), |
| 'skew(6.2grad)': |
| new CSSTransformValue([new CSSSkew(CSS.grad(6.2), CSS.deg(0))]), |
| 'skew(0.31turn)': |
| new CSSTransformValue([new CSSSkew(CSS.turn(0.31), CSS.deg(0))]), |
| 'skewX(45deg)': |
| new CSSTransformValue([new CSSSkew(CSS.deg(45), CSS.deg(0))]), |
| 'skewX(1rad)': new CSSTransformValue([new CSSSkew(CSS.rad(1), CSS.deg(0))]), |
| 'skewX(6.2grad)': |
| new CSSTransformValue([new CSSSkew(CSS.grad(6.2), CSS.deg(0))]), |
| 'skewX(0.31turn)': |
| new CSSTransformValue([new CSSSkew(CSS.turn(0.31), CSS.deg(0))]), |
| 'skewY(45deg)': |
| new CSSTransformValue([new CSSSkew(CSS.deg(0), CSS.deg(45))]), |
| 'skewY(1rad)': new CSSTransformValue([new CSSSkew(CSS.deg(0), CSS.rad(1))]), |
| 'skewY(6.2grad)': |
| new CSSTransformValue([new CSSSkew(CSS.deg(0), CSS.grad(6.2))]), |
| 'skewY(0.31turn)': |
| new CSSTransformValue([new CSSSkew(CSS.deg(0), CSS.turn(0.31))]), |
| // Rotations |
| 'rotateX(45deg)': cssTransformWithRotate3D(1, 0, 0, CSS.deg(45)), |
| 'rotateX(1rad)': cssTransformWithRotate3D(1, 0, 0, CSS.rad(1)), |
| 'rotateX(6.2grad)': cssTransformWithRotate3D(1, 0, 0, CSS.grad(6.2)), |
| 'rotateX(0.31turn)': cssTransformWithRotate3D(1, 0, 0, CSS.turn(0.31)), |
| 'rotateY(45deg)': cssTransformWithRotate3D(0, 1, 0, CSS.deg(45)), |
| 'rotateY(1rad)': cssTransformWithRotate3D(0, 1, 0, CSS.rad(1)), |
| 'rotateY(6.2grad)': cssTransformWithRotate3D(0, 1, 0, CSS.grad(6.2)), |
| 'rotateY(0.31turn)': cssTransformWithRotate3D(0, 1, 0, CSS.turn(0.31)), |
| 'rotateZ(45deg)': cssTransformWithRotate3D(0, 0, 1, CSS.deg(45)), |
| 'rotateZ(1rad)': cssTransformWithRotate3D(0, 0, 1, CSS.rad(1)), |
| 'rotateZ(6.2grad)': cssTransformWithRotate3D(0, 0, 1, CSS.grad(6.2)), |
| 'rotateZ(0.31turn)': cssTransformWithRotate3D(0, 0, 1, CSS.turn(0.31)), |
| }, |
| supportsMultiple: false, |
| invalidObjects: [CSS.px(4)] |
| }); |
| |
| 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> |
