[CSS Typed OM] Add CSSValue->CSSSkew conversions

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

Index: third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-skew.html
diff --git a/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-skew.html b/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-skew.html
new file mode 100644
index 0000000000000000000000000000000000000000..291d6338853f4ed537b6884f246e3d316e111608
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/transform-skew.html
@@ -0,0 +1,76 @@
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<div id="testElement"></div>
+
+<script>
+
+var EPSILON = 1e-6; // float epsilon
+
+function validateTransformWithSingleSkew(transform, cssText) {
+  assert_equals(transform.cssText, cssText);
+
+  // Shouldn't be base StyleValue as for unsupported values.
+  assert_true(transform instanceof CSSTransformValue);
+
+  var components = [...transform.values()];
+  assert_equals(components.length, 1);
+  assert_true(components[0] instanceof CSSSkew);
+  assert_equals(components[0].cssText, cssText);
+}
+
+test(function() {
+  testElement.style.transform = "skew(30deg)";
+
+  validateTransformWithSingleSkew(
+      testElement.styleMap.get("transform"),
+      "skew(30deg, 0deg)");
+}, "Simple skew read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "skew(10rad)";
+
+  validateTransformWithSingleSkew(
+      testElement.styleMap.get("transform"),
+      "skew(10rad, 0deg)");
+}, "Simple skew using radians read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "skew(20grad)";
+
+  validateTransformWithSingleSkew(
+      testElement.styleMap.get("transform"),
+      "skew(20grad, 0deg)");
+}, "Simple skew using gradians read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "skew(0.5turn)";
+
+  validateTransformWithSingleSkew(
+      testElement.styleMap.get("transform"),
+      "skew(0.5turn, 0deg)");
+}, "Simple skew using turns read from a StyleMap is correct");
+
+test(function() {
+  testElement.style.transform = "skewX(45deg)";
+  validateTransformWithSingleSkew(
+      testElement.styleMap.get("transform"),
+      "skew(45deg, 0deg)");
+}, "skewX read from a StyleMap results in a skew");
+
+test(function() {
+  testElement.style.transform = "skewY(80deg)";
+  validateTransformWithSingleSkew(
+      testElement.styleMap.get("transform"),
+      "skew(0deg, 80deg)");
+}, "skewY read from a StyleMap results in a skew");
+
+test(function() {
+  testElement.style.transform = "skew(calc(5deg))";
+  var result = testElement.styleMap.get("transform");
+  assert_equals(result.cssText, "skew(calc(5deg))");
+  assert_true(result instanceof CSSStyleValue);
+}, "skew containing an (unsupported) calc results in base CSSStyleValue");
+
+</script>
+