[Typed OM] Implement CSSValue->CSSRotation conversion

third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-rotation.html

Index: third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-rotation.html
diff --git a/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-rotation.html b/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-rotation.html
new file mode 100644
index 0000000000000000000000000000000000000000..aec3a178784c3e32707e2f04652637b15e5fcef5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-rotation.html
@@ -0,0 +1,119 @@
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<div id="testElement"></div>
+
+<script>
+
+var EPSILON = 1e-6; // float epsilon
+
+function validateTransformWithSingleRotation(transform, x, y, z, angle, cssString) {
+  assert_equals(transform.cssString, cssString);
+
+  // Shouldn't be base StyleValue as for unsupported values.
+  assert_true(transform instanceof TransformValue);
+
+  var components = [...transform.values()];
+  assert_equals(components.length, 1);
+  assert_true(components[0] instanceof CSSRotation);
+  assert_equals(components[0].cssString, cssString);
+
+  assert_approx_equals(components[0].angle, angle, EPSILON);
+  assert_approx_equals(components[0].x, x, EPSILON);
+  assert_approx_equals(components[0].y, y, EPSILON);
+  assert_approx_equals(components[0].z, z, EPSILON);
+}
+
+test(function() {
+  testElement.style.transform = "rotate(30deg)";
+
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      0, 0, 1, 30,
+      "rotate(30deg)");
+}, "Simple rotation read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "rotate(10rad)";
+
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      0, 0, 1, 572.957795,
+      "rotate(572.958deg)");
+}, "Simple rotation using radians read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "rotate(20grad)";
+
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      0, 0, 1, 18,
+      "rotate(18deg)");
+}, "Simple rotation using gradians read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "rotate(0.5turn)";
+
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      0, 0, 1, 180,
+      "rotate(180deg)");
+}, "Simple rotation using turns read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "rotate3d(1, 2, 3, 30deg)";
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      1, 2, 3, 30,
+      "rotate3d(1, 2, 3, 30deg)");
+}, "rotate3d read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "rotateX(45deg)";
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      1, 0, 0, 45,
+      "rotate3d(1, 0, 0, 45deg)");
+}, "rotateX read from a StyleMap results in a rotate3d");
+
+test(function() {
+  testElement.style.transform = "rotateX(1rad)";
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      1, 0, 0, 57.29578,
+      "rotate3d(1, 0, 0, 57.2958deg)");
+}, "rotateX with units other than degrees");
+
+test(function() {
+  testElement.style.transform = "rotateY(80deg)";
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      0, 1, 0, 80,
+      "rotate3d(0, 1, 0, 80deg)");
+}, "rotateY read from a StyleMap results in a rotate3d");
+
+test(function() {
+  testElement.style.transform = "rotateY(2grad)";
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      0, 1, 0, 1.8,
+      "rotate3d(0, 1, 0, 1.8deg)");
+}, "rotateY with units other than degrees");
+
+test(function() {
+  testElement.style.transform = "rotateZ(100deg)";
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      0, 0, 1, 100,
+      "rotate3d(0, 0, 1, 100deg)");
+}, "rotateZ read from a StyleMap results in a rotate3d");
+
+test(function() {
+  testElement.style.transform = "rotateZ(1turn)";
+  validateTransformWithSingleRotation(
+      testElement.styleMap.get("transform"),
+      0, 0, 1, 360,
+      "rotate3d(0, 0, 1, 360deg)");
+}, "rotateZ with units other than degrees");
+
+</script>