[CSS Typed OM] Add a property test generator for testing the inline StylePropertyMap

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

+/**
+ * @fileoverview A standard set of tests for using a single property in an
+ *     inline StylePropertyMap.

[qyearsley, 2016/11/30 18:37:24]

Might be helpful to add a link to the spec, e.g.
https://www.w3.org/TR/css-typed-om-1/#the-stylepropertymap

[meade_UTC10, 2016/12/01 03:48:20]

Done.

+ *
+ * Create a config object containing {
+ *   validKeywords: [list of strings],

[qyearsley, 2016/11/30 18:37:24]

Do the square brackets here indicate that this is an Array? This may be
redundant since you already say it's a list.

[meade_UTC10, 2016/12/01 03:48:21]

Done.

+ *   validObjects: [list of CSSStyleValue instances that are valid for the
+ *       property],
+ *   supportsMultiple: boolean; whether the property supports a list of
+ *       properties,
+ *   invalidObjects: [list of CSSStyleValue instances that are invalid for the
+ *       property]
+ * }
+ *
+ * Note that CSS-wide keywords, and non-CSSStyleValue invalid types do not need
+ * to be specified.
+ *
+ * Finally, call "generatePropertySuite" to generate the standard set of tests.

[qyearsley, 2016/11/30 18:37:24]

Possible optional rephrasing: Call generatePropertySuite to test the behavior of
an inline StylePropertyMap for one CSS property for a given element.

[meade_UTC10, 2016/12/01 03:48:20]

Done.

+ *
+ * If necessary, you can continue to define non-standard tests in your html
+ * file as usual.
+ */
+
+function generatePropertySuite(propertyName, config, element) {

[qyearsley, 2016/11/30 18:37:24]

Arguably, these functions could also be named as "test*" instead of "generate*",
since they invoke test() and don't return anything, e.g.

  testPropertySuite
  testSet
  testGet
  testGetAll
  testDelete
  testGetProperties
  testSetSequence
  testAppend
  testMultipleValuesNotSupported

Although "generate" is also fine.

[meade_UTC10, 2016/12/01 03:48:20]

I had actually renamed these to "runFooTests" but haven't uploaded...

[qyearsley, 2016/12/01 16:39:44]

That sounds good to me too :-)

+  var validKeywords = config.validKeywords.concat([
+    // CSS wide keywords

[qyearsley, 2016/11/30 18:37:24]

Nit: CSS-wide could be written with a dash.

[meade_UTC10, 2016/12/01 03:48:21]

Done.

+    'initial',
+    'inherit',
+    'unset'
+  ]);
+  var validObjects = config.validObjects;
+  var invalidObjects = config.invalidObjects.concat([
+    // No properties should take these values
+    null,
+    undefined,
+    true,
+    false,
+    1,
+    'hello',
+    {},
+    new CSSKeywordValue('notAKeyword')
+  ]);
+  var validObject = validObjects.length ? validObjects[0] : new CSSKeywordValue(validKeywords[0]);
+
+  var styleMap = element.styleMap;
+  generateSetterTests(propertyName, validKeywords, validObjects, invalidObjects, element);
+  generateGetterTests(propertyName, validKeywords, validObjects, element);
+  generateGetAllTests(propertyName, validObject, element, config.supportsMultiple);
+  generateDeletionTests(propertyName, validObject, element);
+  generateGetPropertiesTests(propertyName, validObject, element);
+  if (config.supportsMultiple) {
+    generateSequenceSetterTests(propertyName, validObject, invalidObjects[0], element);
+    generateAppendTests(propertyName, validObject, invalidObjects[0], element);
+  } else {
+    generateMultipleValuesNotSupportedTests(propertyName, validObject, element);
+  }
+}
+
+function generateSetterTests(propertyName, validKeywords, validObjects, invalidObjects, element) {
+  for (var i = 0; i < validKeywords.length; i++) {
+    var keyword = validKeywords[i];
+    var keywordValue = new CSSKeywordValue(keyword);
+
+    test(function() {
+      element.style = '';
+
+      element.styleMap.set(propertyName, keywordValue);
+      assert_equals(element.style[propertyName], keyword);
+    }, 'Setting ' + propertyName + ' to ' + keyword);
+  }
+  for (var i = 0; i < validObjects.length; i++) {
+    var validObject = validObjects[i];
+
+    test(function() {
+      element.style = '';
+
+      element.styleMap.set(propertyName, validObject);
+      assert_equals(element.style[propertyName], validObject.cssText);
+    }, 'Setting ' + propertyName + ' to ' + validObject.constructor.name + ' with value ' +  validObject.cssText);
+  }
+
+  // Negative tests
+  for (var i = 0; i < invalidObjects.length; i++) {
+    test(function() {
+      assert_throws(new TypeError(), function() {
+        element.styleMap.set(propertyName, invalidObjects[i]);
+      });
+    }, 'Setting ' + propertyName + ' to invalid value ' + invalidObjects[i] + ' fails');
+  }
+}
+
+function generateGetterTests(propertyName, validKeywords, validObjects, element) {
+  for (var i = 0; i < validKeywords.length; i++) {
+    var keyword = validKeywords[i];
+    test(function() {
+      element.style[propertyName] = keyword;
+
+      var result = element.styleMap.get(propertyName);
+      assert_true(result instanceof CSSKeywordValue);
+      assert_equals(result.cssText, keyword);
+    }, 'Getting ' + propertyName + ' when it is set to ' + keyword);
+  }
+  for (var i = 0; i < validObjects.length; i++) {
+    var validObject = validObjects[i];
+
+    test(function() {
+      element.style[propertyName] = validObject.cssText;
+
+      var result = element.styleMap.get(propertyName);
+      assert_equals(result.constructor, validObject.constructor);
+      assert_equals(result.cssText, validObject.cssText);
+    }, 'Getting ' + propertyName + ' with a ' + validObject.constructor.name + ' whose value is ' + validObject.cssText);
+  }
+}
+
+function generateSequenceSetterTests(propertyName, validObject, invalidObject, element) {
+  test(function() {
+    element.style = '';
+
+    element.styleMap.set(propertyName, [validObject, validObject]);
+    assert_equals(element.style[propertyName], validObject.cssText + ' ' + validObject.cssText);

[shans, 2016/11/29 20:58:13]

BTW shouldn't this be comma separated?

[meade_UTC10, 2016/12/01 03:48:20]

Ugh, yes. I should really fix that bug...

+  }, 'Set ' + propertyName + ' to a sequence');
+
+  test(function() {
+    var sequence = [validObject, invalidObject];
+    assert_throws(new TypeError(), function() {
+      element.styleMap.set(propertyName, sequence);
+    });
+  }, 'Set ' + propertyName + ' to a sequence containing an invalid type');
+}
+
+function generateAppendTests(propertyName, validObject, invalidObject, element) {
+  test(function() {
+    element.style = '';
+
+    element.styleMap.append(propertyName, validObject);
+    assert_equals(element.style[propertyName], validObject.cssText);
+
+    element.styleMap.append(propertyName, validObject);
+    assert_equals(element.style[propertyName], validObject.cssText + ' ' + validObject.cssText);
+  }, 'Appending a ' + validObject.constructor.name + ' to ' + propertyName);
+
+  test(function() {
+    element.style = '';
+
+    element.styleMap.append(propertyName, [validObject, validObject]);
+    assert_equals(element.style[propertyName], validObject.cssText + ' ' + validObject.cssText);
+  }, 'Append a sequence to ' + propertyName);
+
+  // Negative tests
+  test(function() {
+    assert_throws(new TypeError(), function() {
+      element.styleMap.append(propertyName, invalidObject);
+    });
+  }, 'Appending an invalid value to ' + propertyName);
+
+  test(function() {
+    var sequence = [validObject, invalidObject];
+    assert_throws(new TypeError(), function() {
+      element.styleMap.append(propertyName, sequence);
+    });
+  }, 'Append a sequence containing an invalid value to ' + propertyName);
+}
+
+function generateGetAllTests(propertyName, validObject, element, supportsMultiple) {
+  test(function() {
+    element.style = '';
+    assert_array_equals(element.styleMap.getAll(propertyName), []);
+
+    element.style[propertyName] = validObject.cssText;
+    var result = element.styleMap.getAll(propertyName);
+    assert_equals(result.length, 1);
+    assert_equals(result[0].constructor, validObject.constructor);
+  }, 'getAll for single-valued ' + propertyName);
+
+  if (supportsMultiple) {
+    test(function() {
+      element.style = '';
+      element.styleMap.set(propertyName, [validObject, validObject]);
+      var result = element.styleMap.getAll(propertyName);
+      assert_equals(result.length, 2);
+      assert_equals(result[0].constructor, validObject.constructor);
+      assert_equals(result[1].constructor, validObject.constructor);
+      assert_equals(result[0].cssText, validObject.cssText);
+      assert_equals(result[1].cssText, validObject.cssText);
+    }, 'getAll for list-valued ' + propertyName);
+  }
+}
+
+function generateDeletionTests(propertyName, validObject, element) {
+  test(function() {
+    element.style[propertyName] = validObject.cssText;
+
+    assert_not_equals(element.styleMap.get(propertyName), null);
+
+    element.styleMap.delete(propertyName);
+    assert_equals(element.style[propertyName], '');
+    assert_equals(element.styleMap.get(propertyName), null);
+  }, 'Delete ' + propertyName + ' removes the value form the styleMap');
+}
+
+function generateGetPropertiesTests(propertyName, validObject, element) {
+  test(function() {
+    element.style = '';
+    assert_array_equals(element.styleMap.getProperties(), []);
+
+    element.styleMap.set(propertyName, validObject);
+
+    assert_array_equals(element.styleMap.getProperties(), [propertyName]);
+  }, propertyName + ' shows up in getProperties');
+}
+
+function generateMultipleValuesNotSupportedTests(propertyName, validObject, element) {
+  test(function() {
+    element.style = '';
+    assert_throws(new TypeError(), function() {
+      element.styleMap.set(propertyName, [validObject, validObject]);
+    });
+  }, 'Setting ' + propertyName + ' to a sequence throws');
+
+  test(function() {
+    element.style = '';
+    assert_throws(new TypeError(), function() {
+      element.styleMap.append(propertyName, validObject);
+    });
+  }, 'Appending to ' + propertyName + ' throws');
+}
+