| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="resources/comparisons.js"></script> |
| |
| <script> |
| let EPSILON = 1e-6; |
| |
| test(() => { |
| let percentValue = new CSSUnitValue(10, 'percent'); |
| let angleValue = new CSSUnitValue(20, 'deg'); |
| assert_throws(new TypeError(), () => { new CSSPerspective(percentValue) }); |
| assert_throws(new TypeError(), () => { new CSSPerspective(angleValue) }); |
| }, "Constructor should throw an error for invalid CSSUnitValues"); |
| |
| test(() => { |
| let perspective = new CSSPerspective(new CSSUnitValue(1, 'px')); |
| assert_equals(perspective.length.value, 1); |
| assert_equals(perspective.length.unit, 'px'); |
| |
| perspective.length = new CSSUnitValue(2, 'in'); |
| assert_equals(perspective.length.value, 2); |
| assert_equals(perspective.length.unit, 'in'); |
| }, "Setting length with valid values."); |
| |
| test(() => { |
| let perspective = new CSSPerspective(new CSSUnitValue(1, 'px')); |
| let percentUnit = new CSSUnitValue(2, 'percent'); |
| assert_throws(new TypeError(), () => { perspective.length = percentUnit; }) |
| }, "Setting length with invalid values."); |
| |
| test(() => { |
| let perspective = new CSSPerspective(new CSSUnitValue(10, 'px')); |
| |
| assert_equals(perspective.toString(), 'perspective(10px)'); |
| }, "toString should return perspective(<CSSNumericValue.cssString()>)"); |
| |
| test(() => { |
| let perspective = new CSSPerspective(new CSSUnitValue(10, 'px')); |
| assert_false(perspective.is2D); |
| |
| perspective.is2D = true; |
| assert_false(perspective.is2D); |
| }, "Setting is2D does nothing"); |
| |
| test(() => { |
| // Obtained by doing $0.style.transform = perspective(10px); |
| // getComputedStyle($0).transform |
| let expectedMatrix = new DOMMatrixReadOnly( |
| [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.1, 0, 0, 0, 1]); |
| let transformValue = new CSSTransformValue([new CSSPerspective(CSS.px(10))]); |
| assert_matrix_approx_equals( |
| transformValue.toMatrix(), expectedMatrix, EPSILON); |
| }, "toMatrix when used in a CSSTransformValue produces correct matrix"); |
| |
| test(() => { |
| let transformValue = new CSSTransformValue([new CSSPerspective(CSS.em(10))]); |
| assert_throws(new TypeError(), () => { |
| transformValue.toMatrix(); |
| }); |
| }, "toMatrix throws TypeError if relative units are used"); |
| |
| test(() => { |
| let expectedMatrix = new DOMMatrixReadOnly(); |
| let transformValue = new CSSTransformValue([new CSSPerspective(CSS.px(-10))]); |
| assert_matrix_approx_equals(transformValue.toMatrix(), expectedMatrix, EPSILON); |
| }, "toMatrix is the identity when perspective is negative (which is invalid)"); |
| |
| </script> |
| |
