[css-typed-om] Update CSSTranslation tests to follow WPT standards.

This patch:
- Moves CSSTranslation tests to a subfolder containing all the other
  CSSStylevalue subclasses.
- Adds the appropriate meta and link tags.
- Clean up the test code a bit.

Notably, the spec changed so that Z can be a percentage.

Note: Following the WPT guidelines, our test structure closely follows
the spec structure. Therefore, serialization and normalization of
CSSTranslation will be done in a separate file as it is a separate
section in the spec.

Spec: https://drafts.css-houdini.org/css-typed-om-1/#csstranslation
WPT Guidelines: http://web-platform-tests.org/writing-tests/general-guidelines.html

There are failing tests where we are passing in a CSSMathValue/calc
value. We currently don't support CSSMathValues as arguments.

Bug: 774887
Change-Id: I571d6dd529a60381c310df74fddead39c61e2cd9
Reviewed-on: https://chromium-review.googlesource.com/765552
Commit-Queue: Darren Shen <shend@chromium.org>
Reviewed-by: meade_UTC10 <meade@chromium.org>
Cr-Commit-Position: refs/heads/master@{#515891}

third_party/WebKit/LayoutTests/typedcssom/cssTranslation.html

@@ -48,67 +48,11 @@ var testParams = [
 ];
 
 for (let params of testParams) {
-  test(() => {
-    assert_equals(params.input.x.value, params.x.value);
-    assert_equals(params.input.x.unit, params.x.unit);
-    assert_equals(params.input.y.value, params.y.value);
-    assert_equals(params.input.y.unit, params.y.unit);
-    if (params.is2D) {
-      assert_equals(params.input.z.value, 0);
-    } else {
-      assert_equals(params.input.z.value, params.z.value);
-      assert_equals(params.input.z.unit, params.z.unit);
-    }
-  }, "x, y, and z values are correct for " + params.cssText);
-
-  test(() => {
-    assert_equals(params.input.is2D, params.is2D);
-  }, "is2D value is correct for " + params.cssText);
-
   test(() => {
     assert_equals(params.input.toString(), params.cssText);
   }, "toString value is correct for " + params.cssText);
 }
 
-test(() => {
-  let translation = new CSSTranslation(
-      new CSSUnitValue(10, 'percent'),
-      new CSSUnitValue(20, 'percent'));
-  assert_equals(translation.x.value, 10);
-  assert_equals(translation.x.unit, 'percent');
-  assert_equals(translation.y.value, 20);
-  assert_equals(translation.y.unit, 'percent');
-  assert_equals(translation.z.value, 0);
-
-  let translation3d = new CSSTranslation(
-      new CSSUnitValue(30, 'percent'),
-      new CSSUnitValue(40, 'percent'),
-      CSS.px(0));
-  assert_equals(translation3d.x.value, 30);
-  assert_equals(translation3d.x.unit, 'percent');
-  assert_equals(translation3d.y.value, 40);
-  assert_equals(translation3d.y.unit, 'percent');
-  assert_equals(translation3d.z.value, 0);
-}, "Constructor accepts percent for x and y");
-
-test(() => {
-  assert_throws(new TypeError(), () => {
-    new CSSTranslation(new CSSUnitValue(10, 'deg'), CSS.px(0));
-  });
-  assert_throws(new TypeError(), () => {
-    new CSSTranslation(CSS.px(0), new CSSUnitValue(10, 'deg'));
-  });
-  assert_throws(new TypeError(), () => {
-    new CSSTranslation(new CSSUnitValue(10, 'deg'), CSS.px(0), CSS.px(0));
-  });
-  assert_throws(new TypeError(), () => {
-    new CSSTranslation(CSS.px(0), new CSSUnitValue(10, 'deg'), CSS.px(0));
-  });
-  assert_throws(new TypeError(), () => {
-    new CSSTranslation(CSS.px(0), CSS.px(0), new CSSUnitValue(10, 'deg'));
-  });
-}, "Constructor throws when invalid numeric values are given to each argument");
-
 test(() => {
   assert_throws(new TypeError(), () => {
     new CSSTranslation(CSS.px(0), CSS.px(0), CSS.percent(10));
@@ -123,49 +67,6 @@ test(() => {
   assert_throws(new TypeError(), () => { new CSSTranslation(CSS.px(0)); });
 }, "Invalid number of arguments to constructor throws an exception.");
 
-for (let attribute of ["x", "y"]) {
-  test(() => {
-    let validLength = new CSSUnitValue(5, 'px');
-    let translation = new CSSTranslation(validLength, validLength, validLength);
-    let newValue = new CSSUnitValue(10, 'percent');
-
-    assert_equals(translation[attribute].value, 5);
-    assert_equals(translation[attribute].unit, 'px');
-    translation[attribute] = newValue;
-    assert_equals(translation[attribute].value, 10);
-    assert_equals(translation[attribute].unit, 'percent');
-  }, attribute + " can be set to a percent");
-}
-
-for (let attribute of ["x", "y", "z"]) {
-  let validLength = new CSSUnitValue(5, 'px');
-
-  test(() => {
-    let translation = new CSSTranslation(validLength, validLength, validLength);
-    let newValue = new CSSUnitValue(10, 'em');
-
-    assert_equals(translation[attribute].value, 5);
-    assert_equals(translation[attribute].unit, 'px');
-    translation[attribute] = newValue;
-    assert_equals(translation[attribute].value, 10);
-    assert_equals(translation[attribute].unit, 'em');
-  }, attribute + " can be set to a valid numeric value");
-
-  test(() => {
-    let translation = new CSSTranslation(validLength, validLength, validLength);
-    assert_throws(new TypeError(), () => {
-      translation[attribute] = new CSSUnitValue(20, 'deg');
-    });
-  }, attribute + " throws when set to an invalid numeric value");
-}
-
-test(() => {
-  let translation = new CSSTranslation(CSS.px(0), CSS.px(0));
-  assert_throws(new TypeError(), () => {
-    translation.z = new CSSUnitValue(30, 'percent');
-  });
-}, "Setting z throws for length containing percentage");
-
 test(() => {
   let expectedMatrix = (new DOMMatrixReadOnly()).translate(1, 2, 3);
   let transformValue = new CSSTransformValue(

third_party/WebKit/LayoutTests/typedcssom/stylevalue-subclasses/cssTranslation-expected.txt

+This is a testharness.js-based test.
+PASS Constructing a CSSTranslation with a CSSUnitValue with type other than length or percent for the coordinates throws a TypeError
+PASS Constructing a CSSTranslation with a CSSMathValue that doesn't match <length-percentage> for the coordinates throws a TypeError
+PASS Updating CSSTranslation.x to a CSSUnitValue with type other than length or percent throws a TypeError
+PASS Updating CSSTranslation.x to a CSSMathValue that doesn't match <length-percentage> throws a TypeError
+PASS Updating CSSTranslation.y to a CSSUnitValue with type other than length or percent throws a TypeError
+PASS Updating CSSTranslation.y to a CSSMathValue that doesn't match <length-percentage> throws a TypeError
+PASS Updating CSSTranslation.z to a CSSUnitValue with type other than length or percent throws a TypeError
+PASS Updating CSSTranslation.z to a CSSMathValue that doesn't match <length-percentage> throws a TypeError
+PASS CSSTranslation can be constructed from two length or percent coordinates
+PASS CSSTranslation can be constructed from three length or percent coordinates
+FAIL CSSTranslation can be constructed from CSSMathValues Failed to construct 'CSSTranslation': Must pass length or percentage to X and Y of CSSTranslation
+PASS CSSTranslation.x can be updated to a length
+PASS CSSTranslation.x can be updated to a percent
+FAIL CSSTranslation.x can be updated to a CSSMathValue Failed to set the 'x' property on 'CSSTranslation': Must pass length or percentage to X of CSSTranslation
+PASS CSSTranslation.y can be updated to a length
+PASS CSSTranslation.y can be updated to a percent
+FAIL CSSTranslation.y can be updated to a CSSMathValue Failed to set the 'y' property on 'CSSTranslation': Must pass length or percent to Y of CSSTranslation
+PASS CSSTranslation.z can be updated to a length
+FAIL CSSTranslation.z can be updated to a percent Failed to set the 'z' property on 'CSSTranslation': Must pass length to Z of CSSTranslation
+FAIL CSSTranslation.z can be updated to a CSSMathValue Failed to set the 'z' property on 'CSSTranslation': Must pass length to Z of CSSTranslation
+PASS Modifying CSSTranslation.is2D can be updated to true or false
+Harness: the test ran to completion.
+

third_party/WebKit/LayoutTests/typedcssom/stylevalue-subclasses/cssTranslation.html

+<!doctype html>
+<meta charset="utf-8">
+<title>CSSTranslation tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#csstranslation">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gInvalidCoordTestCases = [
+  { coord: CSS.deg(1), desc: 'a CSSUnitValue with type other than length or percent'},
+  { coord: new CSSMathSum(CSS.deg(1)), desc: 'a CSSMathValue that doesn\'t match <length-percentage>'},
+];
+
+for (const {coord, desc} of gInvalidCoordTestCases) {
+  test(() => {
+    assert_throws(new TypeError(), () => new CSSTranslation(coord, CSS.px(0), CSS.px(0)));
+    assert_throws(new TypeError(), () => new CSSTranslation(CSS.px(0), coord, CSS.px(0)));
+    assert_throws(new TypeError(), () => new CSSTranslation(CSS.px(0), CSS.px(0), coord));
+  }, 'Constructing a CSSTranslation with ' + desc + ' for the coordinates throws a TypeError');
+}
+
+for (const attr of ['x', 'y', 'z']) {
+  for (const {value, desc} of gInvalidCoordTestCases) {
+    test(() => {
+      let result = new CSSTranslation(CSS.px(0), CSS.px(0), CSS.px(0));
+      assert_throws(new TypeError(), () => result[attr] = value);
+      assert_style_value_equals(result[attr], CSS.px(0));
+    }, 'Updating CSSTranslation.' + attr + ' to ' + desc + ' throws a TypeError');
+  }
+}
+
+test(() => {
+  const result = new CSSTranslation(CSS.px(-3.14), CSS.percent(3.14));
+  assert_style_value_equals(result.x, CSS.px(-3.14));
+  assert_style_value_equals(result.y, CSS.percent(3.14));
+  assert_style_value_equals(result.z, CSS.px(0));
+  assert_true(result.is2D);
+}, 'CSSTranslation can be constructed from two length or percent coordinates');
+
+test(() => {
+  const result = new CSSTranslation(CSS.px(-3.14), CSS.percent(3.14), CSS.px(10));
+  assert_style_value_equals(result.x, CSS.px(-3.14));
+  assert_style_value_equals(result.y, CSS.percent(3.14));
+  assert_style_value_equals(result.z, CSS.px(10));
+  assert_false(result.is2D);
+}, 'CSSTranslation can be constructed from three length or percent coordinates');
+
+test(() => {
+  const result = new CSSTranslation(new CSSMathSum(CSS.px(-3.14)), new CSSMathSum(CSS.percent(3.14)));
+  assert_style_value_equals(result.x, new CSSMathSum(CSS.px(-3.14)));
+  assert_style_value_equals(result.y, new CSSMathSum(CSS.percent(3.14)));
+  assert_style_value_equals(result.z, CSS.px(0));
+  assert_true(result.is2D);
+}, 'CSSTranslation can be constructed from CSSMathValues');
+
+for (const attr of ['x', 'y', 'z']) {
+  test(() => {
+    let result = new CSSTranslation(CSS.px(0), CSS.px(0), CSS.px(0));
+    result[attr] = CSS.px(3.14);
+    assert_style_value_equals(result[attr], CSS.px(3.14));
+  }, 'CSSTranslation.' + attr + ' can be updated to a length');
+
+  test(() => {
+    let result = new CSSTranslation(CSS.px(0), CSS.px(0), CSS.px(0));
+    result[attr] = CSS.percent(3.14);
+    assert_style_value_equals(result[attr], CSS.percent(3.14));
+  }, 'CSSTranslation.' + attr + ' can be updated to a percent');
+
+  test(() => {
+    let result = new CSSTranslation(CSS.px(0), CSS.px(0), CSS.px(0));
+    result[attr] = new CSSMathSum(CSS.percent(3.14));
+    assert_style_value_equals(result[attr], new CSSMathSum(CSS.percent(3.14)));
+    result[attr] = new CSSMathSum(CSS.percent(3.14));
+    assert_style_value_equals(result[attr], new CSSMathSum(CSS.percent(3.14)));
+  }, 'CSSTranslation.' + attr + ' can be updated to a CSSMathValue');
+}
+
+test(() => {
+  let result = new CSSTranslation(CSS.px(0), CSS.px(0));
+  result.is2D = true;
+  assert_true(result.is2D);
+  result.is2D = false;
+  assert_false(result.is2D);
+}, 'Modifying CSSTranslation.is2D can be updated to true or false');
+
+</script>