[CSS Typed OM] Add additional test capability for string->CSSStyleValue in property-suite

Adds the ability for property-suite to test string values that are represented the same as something else in Typed OM.

Converts the remaining inlinestyle/transform-rotate.html tests to use property-suite.

BUG=545318

Review-Url: https://codereview.chromium.org/2546343002
Cr-Commit-Position: refs/heads/master@{#439735}

third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/animation-direction-expected.txt

@@ -24,7 +24,7 @@ FAIL Getting animation-direction when it is set to inherit assert_true: result i
 FAIL Getting animation-direction when it is set to unset assert_true: result instanceof CSSKeywordValue: expected true got false
 FAIL getAll for single-valued animation-direction assert_equals: Returned type is incorrect: expected "CSSKeywordValue" but got "CSSStyleValue"
 FAIL getAll for list-valued animation-direction assert_equals: Expected getAll to return an array containing two instances of CSSStyleValue expected 2 but got 1
-PASS Delete animation-direction removes the value form the styleMap 
+PASS Delete animation-direction removes the value from the styleMap 
 PASS animation-direction shows up in getProperties 
 FAIL Set animation-direction to a sequence assert_equals: expected "normal, normal" but got "normal normal"
 PASS Set animation-direction to a sequence containing an invalid type 

third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/bottom-expected.txt

@@ -25,7 +25,7 @@ PASS Getting bottom with a CSSSimpleLength whose value is 2%
 PASS Getting bottom with a CSSSimpleLength whose value is 3em 
 FAIL Getting bottom with a CSSCalcLength whose value is calc(10% + 1px) assert_equals: typeof result expected "CSSCalcLength" but got "CSSStyleValue"
 PASS getAll for single-valued bottom 
-PASS Delete bottom removes the value form the styleMap 
+PASS Delete bottom removes the value from the styleMap 
 PASS bottom shows up in getProperties 
 PASS Setting bottom to a sequence throws 
 PASS Appending to bottom throws 

third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/property-suite.js

@@ -7,6 +7,9 @@
  *   validKeywords: array of strings,
  *   validObjects: array of CSSStyleValue instances that are valid for the
  *       property,
+ *   validStringMappings: object containing a mapping of string to
+ *       CSSStyleValues for things expressable in string CSS, but are expressed
+ *       the same as something else in Typed OM.
  *   supportsMultiple: boolean; whether the property supports a list of
  *       properties,
  *   invalidObjects: array of CSSStyleValue instances that are invalid for the
@@ -32,6 +35,8 @@ function runInlineStylePropertyMapTests(config) {
     'unset'
   ]);
   let validObjects = config.validObjects;
+  let validStringMappings = config.validStringMappings ?
+      config.validStringMappings : {};
   let invalidObjects = config.invalidObjects.concat([
     // No properties should take these values
     null,
@@ -49,7 +54,8 @@ function runInlineStylePropertyMapTests(config) {
   let styleMap = element.styleMap;
   runSetterTests(
       config.property, validKeywords, validObjects, invalidObjects, element);
-  runGetterTests(config.property, validKeywords, validObjects, element);
+  runGetterTests(config.property, validKeywords, validObjects,
+      validStringMappings, element);
   runGetAllTests(
       config.property, validObject, element, config.supportsMultiple);
   runDeletionTests(config.property, validObject, element);
@@ -97,7 +103,7 @@ function runSetterTests(
 }
 
 function runGetterTests(
-    propertyName, validKeywords, validObjects, element) {
+    propertyName, validKeywords, validObjects, validStringMappings, element) {
   for (let keyword of validKeywords) {
     test(function() {
       element.style[propertyName] = keyword;
@@ -119,6 +125,18 @@ function runGetterTests(
     }, 'Getting ' + propertyName + ' with a ' + validObject.constructor.name +
         ' whose value is ' + validObject.cssText);
   }
+  for (let cssText in validStringMappings) {
+    test(function() {
+      element.style[propertyName] = cssText;
+
+      let result = element.styleMap.get(propertyName);
+      assert_equals(result.constructor.name,
+          validStringMappings[cssText].constructor.name,
+          'typeof result');
+      assert_equals(result.cssText, validStringMappings[cssText].cssText);
+    }, 'Getting ' + propertyName + ' when it is set to "' +
+        cssText + '" via a string');
+  }
 }
 
 function runSequenceSetterTests(
@@ -202,9 +220,9 @@ function runGetAllTests(
       assert_equals(result.length, 2,
           'Expected getAll to return an array containing two instances ' +
           'of CSSStyleValue');
-      assert_true(result[0] instanceof CSSStyleValue,
+      assert_equals(result[0].constructor, CSSStyleValue,
           'Expected first result to be an instance of CSSStyleValue');
-      assert_true(result[1] instanceof CSSStyleValue,
+      assert_equals(result[1].constructor, CSSStyleValue,
           'Expected second result to be an instance of CSSStyleValue');
       assert_equals(result[0].constructor.name, validObject.constructor.name);
       assert_equals(result[1].constructor.name, validObject.constructor.name);
@@ -223,7 +241,7 @@ function runDeletionTests(propertyName, validObject, element) {
     element.styleMap.delete(propertyName);
     assert_equals(element.style[propertyName], '');
     assert_equals(element.styleMap.get(propertyName), null);
-  }, 'Delete ' + propertyName + ' removes the value form the styleMap');
+  }, 'Delete ' + propertyName + ' removes the value from the styleMap');
 }
 
 function runGetPropertiesTests(propertyName, validObject, element) {

third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/transform-expected.txt

@@ -32,11 +32,24 @@ PASS Getting transform with a CSSTransformValue whose value is rotate3d(1, 2, 3,
 PASS Getting transform with a CSSTransformValue whose value is rotate3d(1, 2, 3, 10rad) 
 PASS Getting transform with a CSSTransformValue whose value is rotate3d(1, 2, 3, 2grad) 
 PASS Getting transform with a CSSTransformValue whose value is rotate3d(1, 2, 3, 0.2turn) 
+PASS Getting transform when it is set to "rotateX(45deg)" via a string 
+PASS Getting transform when it is set to "rotateX(1rad)" via a string 
+PASS Getting transform when it is set to "rotateX(6.2grad)" via a string 
+PASS Getting transform when it is set to "rotateX(0.31turn)" via a string 
+PASS Getting transform when it is set to "rotateY(45deg)" via a string 
+PASS Getting transform when it is set to "rotateY(1rad)" via a string 
+PASS Getting transform when it is set to "rotateY(6.2grad)" via a string 
+PASS Getting transform when it is set to "rotateY(0.31turn)" via a string 
+PASS Getting transform when it is set to "rotateZ(45deg)" via a string 
+PASS Getting transform when it is set to "rotateZ(1rad)" via a string 
+PASS Getting transform when it is set to "rotateZ(6.2grad)" via a string 
+PASS Getting transform when it is set to "rotateZ(0.31turn)" via a string 
 PASS getAll for single-valued transform 
-PASS Delete transform removes the value form the styleMap 
+PASS Delete transform removes the value from the styleMap 
 PASS transform shows up in getProperties 
 PASS Setting transform to a sequence throws 
 PASS Appending to transform throws 
+PASS Unhandled case doesn't crash. 
 PASS Getting transform when it has a rotate with a calc angle does not crash 
 PASS Getting transform when it has a rotate3d with a calc angle does not crash 
 Harness: the test ran to completion.

third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/transform.html

@@ -41,10 +41,45 @@ runInlineStylePropertyMapTests( {
     // Perspectives
     // TODO(meade)
   ],
+  // Values with these strings aren't used in Typed OM, but can also be
+  // represented by the specified values.
+  validStringMappings: {
+    // Rotations
+    'rotateX(45deg)':
+      cssTransformWithRotate3D(1, 0, 0, new CSSAngleValue(45, 'deg')),
+    'rotateX(1rad)':
+      cssTransformWithRotate3D(1, 0, 0, new CSSAngleValue(1, 'rad')),
+    'rotateX(6.2grad)':
+      cssTransformWithRotate3D(1, 0, 0, new CSSAngleValue(6.2, 'grad')),
+    'rotateX(0.31turn)':
+      cssTransformWithRotate3D(1, 0, 0, new CSSAngleValue(0.31, 'turn')),
+    'rotateY(45deg)':
+      cssTransformWithRotate3D(0, 1, 0, new CSSAngleValue(45, 'deg')),
+    'rotateY(1rad)':
+      cssTransformWithRotate3D(0, 1, 0, new CSSAngleValue(1, 'rad')),
+    'rotateY(6.2grad)':
+      cssTransformWithRotate3D(0, 1, 0, new CSSAngleValue(6.2, 'grad')),
+    'rotateY(0.31turn)':
+      cssTransformWithRotate3D(0, 1, 0, new CSSAngleValue(0.31, 'turn')),
+    'rotateZ(45deg)':
+      cssTransformWithRotate3D(0, 0, 1, new CSSAngleValue(45, 'deg')),
+    'rotateZ(1rad)':
+      cssTransformWithRotate3D(0, 0, 1, new CSSAngleValue(1, 'rad')),
+    'rotateZ(6.2grad)':
+      cssTransformWithRotate3D(0, 0, 1, new CSSAngleValue(6.2, 'grad')),
+    'rotateZ(0.31turn)':
+      cssTransformWithRotate3D(0, 0, 1, new CSSAngleValue(0.31, 'turn')),
+  },
   supportsMultiple: false,
   invalidObjects: [new CSSSimpleLength(4, 'px')]
 });
 
+// TODO(meade): Remove/update this test once translate is supported.
+test(function() {
+  testElement.style.transform = 'translateY(50px)';
+  testElement.styleMap.entries();
+}, "Unhandled case doesn't crash.");
+
 test(function() {
   testElement.style.transform = 'rotate(calc(45deg + 1rad))';
   let result = testElement.styleMap.get('transform');

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

-<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, 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 CSSRotation);
-  assert_equals(components[0].cssText, cssText);
-
-  assert_approx_equals(components[0].angle.degrees, 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 = "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, 1rad)");
-}, "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, 2grad)");
-}, "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, 1turn)");
-}, "rotateZ with units other than degrees");
-
-</script>

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

-<!DOCTYPE html>
-<script src="../../resources/testharness.js"></script>
-<script src="../../resources/testharnessreport.js"></script>
-
-<div id="testElement"></div>
-
-<script>
-
-test(function() {
-  var transform = new CSSTransformValue([new CSSRotation(new CSSAngleValue(20, 'deg'))]);
-
-  assert_equals(testElement.styleMap.get('transform'), null);
-
-  testElement.styleMap.set('transform', transform);
-  assert_equals(testElement.style.transform, 'rotate(20deg)');
-}, "Setting transform works on a regular element.");
-
-test(function() {
-  var transform = new CSSTransformValue([new CSSRotation(new CSSAngleValue(30, 'deg'))]);
-
-  testElement.styleMap.set('transform', transform);
-  assert_equals(testElement.styleMap.get('transform').cssText, 'rotate(30deg)');
-}, "Getting transform works on a regular element.");
-
-test(function() {
-  testElement.style.transform = 'translateY(50px)';
-  testElement.styleMap.entries();
-}, "Unhandled case doesn't crash.");
-
-</script>