Bug 1437467 [wpt PR 9475] - [css-typed-om] Implement CSSTransformComponent.toMatrix()., a=testonly
authorDarren Shen <shend@chromium.org>
Mon, 26 Mar 2018 11:26:16 +0000
changeset 467017 6a5c51bd7f1b4492d877ce004ce2f2750686ac48
parent 467016 2589a1bc905a2c94c782cce6880b3df9dad2cb79
child 467018 0de53447b671826ab56ece537e7dd9a403f0bbea
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1437467, 807877, 910529, 536022
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1437467 [wpt PR 9475] - [css-typed-om] Implement CSSTransformComponent.toMatrix()., a=testonly Automatic update from web-platform-tests[css-typed-om] Implement CSSTransformComponent.toMatrix(). This patch implements CSSTransformComponent.toMatrix(), which was previously implemented as AsMatrix() but just not webexposed. We also split up the tests since it makes more sense. Bug: 807877 Change-Id: Icee742fdde033d63cea85a27250e91a71ad67e2a Reviewed-on: https://chromium-review.googlesource.com/910529 Commit-Queue: Darren Shen <shend@chromium.org> Reviewed-by: nainar <nainar@chromium.org> Cr-Commit-Position: refs/heads/master@{#536022} wpt-commits: 8d2483fc61ae071d6aa9126d0417814a22dd4134 wpt-pr: 9475 wpt-commits: 8d2483fc61ae071d6aa9126d0417814a22dd4134 wpt-pr: 9475
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix-relative-units.html
testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix.html
testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformValue-toMatrix.html
testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -313096,16 +313096,34 @@
     ]
    ],
    "css/css-typed-om/stylevalue-subclasses/cssSkewY.tentative.html": [
     [
      "/css/css-typed-om/stylevalue-subclasses/cssSkewY.tentative.html",
      {}
     ]
    ],
+   "css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix-relative-units.html": [
+    [
+     "/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix-relative-units.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix.html": [
+    [
+     "/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/stylevalue-subclasses/cssTransformValue-toMatrix.html": [
+    [
+     "/css/css-typed-om/stylevalue-subclasses/cssTransformValue-toMatrix.html",
+     {}
+    ]
+   ],
    "css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html": [
     [
      "/css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html",
      {}
     ]
    ],
    "css/css-typed-om/stylevalue-subclasses/cssTranslate.tentative.html": [
     [
@@ -515797,18 +515815,30 @@
   "css/css-typed-om/stylevalue-subclasses/cssSkewX.tentative.html": [
    "be786095d55df3e6d9d4b10d8ef7c9da95beb1f6",
    "testharness"
   ],
   "css/css-typed-om/stylevalue-subclasses/cssSkewY.tentative.html": [
    "a439eefe6e4ebd38abbfc7681701010337ba4ca6",
    "testharness"
   ],
+  "css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix-relative-units.html": [
+   "f2f588926cab2cbb7fd8c01277bae097768b59ae",
+   "testharness"
+  ],
+  "css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix.html": [
+   "558f3e9a02a417177eaaf018c68685e16c6f7c5f",
+   "testharness"
+  ],
+  "css/css-typed-om/stylevalue-subclasses/cssTransformValue-toMatrix.html": [
+   "c62eebb236fe7da068960327fd5bed72df063460",
+   "testharness"
+  ],
   "css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html": [
-   "c1ee0153bd654f64b64f74bf00b6b0709c7cb9ed",
+   "ff3980baee17a3ef3b692854169d89c1983226db",
    "testharness"
   ],
   "css/css-typed-om/stylevalue-subclasses/cssTranslate.tentative.html": [
    "700fae462f258404f3d0b8fad290613fc1929e1d",
    "testharness"
   ],
   "css/css-typed-om/stylevalue-subclasses/cssUnparsedValue.html": [
    "16725f5047477a1a8837e464935af3da0a01deb2",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix-relative-units.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSTransformComponent.toMatrix with Relative Units</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix">
+<meta name="assert" content="Test CSSTransformComponent.toMatrix throws when given relative units" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+test(() => {
+  assert_throws(new TypeError(), () => {
+    return new CSSTranslate(
+      new CSSUnitValue(1, 'px'),
+      new CSSUnitValue(1, 'em')
+    ).toMatrix();
+  });
+}, 'CSSTranslate.toMatrix() containing relative units throws TypeError');
+
+test(() => {
+  assert_throws(new TypeError(), () => {
+    return new CSSPerspective(new CSSUnitValue(1, 'em')).toMatrix();
+  });
+}, 'CSSPerspective.toMatrix() containing relative units throws TypeError');
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformComponent-toMatrix.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSTransformComponent.toMatrix tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix">
+<meta name="assert" content="Test CSSTransformComponent.toMatrix for each type of component" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gEpsilon = 1e-6;
+
+test(() => {
+  const component = new CSSTranslate(
+    new CSSUnitValue(1, 'px'),
+    new CSSUnitValue(2, 'px'),
+    new CSSUnitValue(3, 'px')
+  );
+  const expectedMatrix = (new DOMMatrixReadOnly()).translate(1, 2, 3);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, 1e-8);
+}, 'CSSTranslate.toMatrix() returns correct matrix');
+
+test(() => {
+  const component = new CSSRotate(
+    new CSSUnitValue(1, 'number'),
+    new CSSUnitValue(2, 'number'),
+    new CSSUnitValue(3, 'number'),
+    new CSSUnitValue(90, 'deg')
+  );
+  const expectedMatrix = (new DOMMatrixReadOnly()).rotateAxisAngle(1, 2, 3, 90);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSRotate.toMatrix() returns correct matrix');
+
+test(() => {
+  const component = new CSSScale(1, 2, 3);
+  const expectedMatrix = (new DOMMatrixReadOnly()).scale(1, 2, 3);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSScale.toMatrix() returns correct matrix');
+
+test(() => {
+  const alpha = 10, beta = 20;
+  const component = new CSSSkew(
+    new CSSUnitValue(alpha, 'rad'),
+    new CSSUnitValue(beta, 'rad')
+  );
+  const expectedMatrix = new DOMMatrixReadOnly(
+        [1, Math.tan(beta), 0, 0, Math.tan(alpha), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSSkew.toMatrix() returns correct matrix');
+
+test(() => {
+  const component = new CSSSkewX(
+    new CSSUnitValue(10, 'rad'),
+  );
+  const expectedMatrix = (new DOMMatrixReadOnly()).skewX(10);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSSkewX.toMatrix() returns correct matrix');
+
+test(() => {
+  const component = new CSSSkewY(
+    new CSSUnitValue(10, 'rad'),
+  );
+  const expectedMatrix = (new DOMMatrixReadOnly()).skewY(10);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSSkewY.toMatrix() returns correct matrix');
+
+test(() => {
+  const length = 10;
+  const component = new CSSPerspective(new CSSUnitValue(length, 'px'));
+  const expectedMatrix = new DOMMatrixReadOnly(
+        [1, 0, 0, 0,
+         0, 1, 0, 0,
+         0, 0, 1, -1/length,
+         0, 0, 0, 1]);
+  assert_matrix_approx_equals(component.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSPerspective.toMatrix() returns correct matrix');
+
+test(() => {
+  const matrix = new DOMMatrixReadOnly(
+          [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
+  const component = new CSSMatrixComponent(matrix);
+  assert_matrix_approx_equals(component.toMatrix(), matrix, gEpsilon);
+}, 'CSSMatrixComponent.toMatrix() returns correct matrix');
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformValue-toMatrix.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSTransformValue.toMatrix</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-csstransformcomponent-tomatrix">
+<meta name="assert" content="Test CSSTransformValue.toMatrix multiplies component matrices" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gEpsilon = 1e-6;
+
+test(() => {
+  const transformMatrix = new DOMMatrixReadOnly([1, 1, 1, 1, 1, 1]);
+  const transformArray = [
+    new CSSScale(2, 2),
+    new CSSMatrixComponent(transformMatrix),
+    new CSSScale(5, 6)
+  ];
+
+  let expectedMatrix = new DOMMatrix();
+  expectedMatrix.scaleSelf(2, 2);
+  expectedMatrix.multiplySelf(transformMatrix);
+  expectedMatrix.scaleSelf(5, 6);
+
+  const transform = new CSSTransformValue(transformArray);
+  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSTransformValue.toMatrix() multiplies its component matrices');
+
+test(() => {
+  const transformMatrix = new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
+  let transformArray = [
+    new CSSTranslate(CSS.px(1), CSS.px(1), CSS.px(1)),
+    new CSSRotate(1, 2, 3, CSS.deg(90)),
+    new CSSScale(2, 3, 2),
+    new CSSMatrixComponent(transformMatrix),
+  ];
+
+  transformArray.forEach(transform => transform.is2D = true);
+
+  let expectedMatrix = new DOMMatrix();
+  expectedMatrix.translateSelf(1, 1);
+  expectedMatrix.rotateSelf(90);
+  expectedMatrix.scaleSelf(2, 3);
+  expectedMatrix.multiplySelf(new DOMMatrixReadOnly([1, 2, 5, 6, 13, 14]));
+
+  const transform = new CSSTransformValue(transformArray);
+  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, gEpsilon);
+}, 'CSSTransformValue.toMatrix() respects is2D changes in its components');
+
+</script>
--- a/testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html
+++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html
@@ -4,18 +4,16 @@
 <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#transformvalue-objects">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../resources/testhelper.js"></script>
 <script src="../resources/comparisons.js"></script>
 <script>
 'use strict';
 
-const EPSILON = 1e-6;
-
 test(() => {
   assert_throws(new TypeError(), () => new CSSTransformValue());
   assert_throws(new TypeError(), () => new CSSTransformValue([]));
 }, 'Constructing a CSSTransformValue with no components throws TypeError');
 
 test(() => {
   const values = [
     new CSSScale(1, 1),
@@ -47,116 +45,16 @@ test(() => {
 
 test(() => {
   let transform = new CSSTransformValue([new CSSScale(1, 2)]);
   assert_throws(new TypeError(), () => transform.is2D = false);
   assert_equals(transform.is2D, true);
 }, 'CSSTransformValue.is2D is readonly');
 
 test(() => {
-  assert_throws(new TypeError(), () => new CSSTransformValue([new CSSTranslate(CSS.px(1), CSS.em(1))]).toMatrix());
-  assert_throws(new TypeError(), () => new CSSTransformValue([new CSSPerspective(CSS.em(1))]).toMatrix());
-}, 'Calling CSSTransformValue.toMatrix containing relative units throws TypeError');
-
-test(() => {
-  const transform = new CSSTransformValue([
-    new CSSTranslate(CSS.px(1), CSS.px(2), CSS.px(3))
-  ]);
-  const expectedMatrix = (new DOMMatrixReadOnly()).translate(1, 2, 3);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, 1e-8);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSTranslate');
-
-test(() => {
-  const transform = new CSSTransformValue([
-    new CSSRotate(CSS.number(1), CSS.number(2), CSS.number(3), CSS.deg(90))
-  ]);
-  const expectedMatrix = (new DOMMatrixReadOnly()).rotateAxisAngle(1, 2, 3, 90);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSRotate');
-
-test(() => {
-  const transform = new CSSTransformValue([
-      new CSSScale(CSS.number(1), CSS.number(2), CSS.number(3))
-  ]);
-  const expectedMatrix = (new DOMMatrixReadOnly()).scale(1, 2, 3);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSScale');
-
-test(() => {
-  const alpha = 10;
-  const beta = 20;
-  const transform = new CSSTransformValue([
-      new CSSSkew(CSS.rad(alpha), CSS.rad(beta))
-  ]);
-  const expectedMatrix = new DOMMatrixReadOnly(
-        [1, Math.tan(beta), 0, 0, Math.tan(alpha), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSSkew');
-
-test(() => {
-  const length = 10;
-  const transform = new CSSTransformValue([
-      new CSSPerspective(CSS.px(length))
-  ]);
-  const expectedMatrix = new DOMMatrixReadOnly(
-        [1, 0, 0, 0,
-         0, 1, 0, 0,
-         0, 0, 1, -1/length,
-         0, 0, 0, 1]);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSPerspective');
-
-test(() => {
-  const matrix = new DOMMatrixReadOnly(
-          [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
-  const transform = new CSSTransformValue([
-      new CSSMatrixComponent(matrix)
-  ]);
-  assert_matrix_approx_equals(transform.toMatrix(), matrix, EPSILON);
-}, 'CSSTransformValue.toMatrix returns correct matrix for CSSMatrixComponent');
-
-test(() => {
-  const transformMatrix = new DOMMatrixReadOnly([1, 1, 1, 1, 1, 1]);
-  const transformArray = [
-    new CSSScale(2, 2),
-    new CSSMatrixComponent(transformMatrix),
-    new CSSScale(5, 6)
-  ];
-
-  let expectedMatrix = new DOMMatrix();
-  expectedMatrix.scaleSelf(2, 2);
-  expectedMatrix.multiplySelf(transformMatrix);
-  expectedMatrix.scaleSelf(5, 6);
-
-  const transform = new CSSTransformValue(transformArray);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix multiplies its component matrices');
-
-test(() => {
-  const transformMatrix = new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
-  let transformArray = [
-    new CSSTranslate(CSS.px(1), CSS.px(1), CSS.px(1)),
-    new CSSRotate(1, 2, 3, CSS.deg(90)),
-    new CSSScale(2, 3, 2),
-    new CSSMatrixComponent(transformMatrix),
-  ];
-
-  transformArray.forEach(transform => transform.is2D = true);
-
-  let expectedMatrix = new DOMMatrix();
-  expectedMatrix.translateSelf(1, 1);
-  expectedMatrix.rotateSelf(90);
-  expectedMatrix.scaleSelf(2, 3);
-  expectedMatrix.multiplySelf(new DOMMatrixReadOnly([1, 2, 5, 6, 13, 14]));
-
-  const transform = new CSSTransformValue(transformArray);
-  assert_matrix_approx_equals(transform.toMatrix(), expectedMatrix, EPSILON);
-}, 'CSSTransformValue.toMatrix respects is2D changes in its components');
-
-test(() => {
   const transformArray = [
     new CSSScale(2, 2),
     new CSSMatrixComponent(new DOMMatrixReadOnly([1, 1, 1, 1, 1, 1])),
     new CSSScale(5, 6)
   ];
 
   const transformValue = new CSSTransformValue(transformArray);