Bug 1472917 - Add tests for transform list interpolation; r=hiro
authorBrian Birtles <birtles@gmail.com>
Fri, 19 Oct 2018 04:40:52 +0000
changeset 500531 bad2ba4312cc3f385cd018527649c2c8065bcd40
parent 500530 225546ee5bd2c9190cce2bf673000146bdd77952
child 500532 cd10f03f66401805ad95d71319acd3ec8fe95dca
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1472917
milestone64.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 1472917 - Add tests for transform list interpolation; r=hiro Differential Revision: https://phabricator.services.mozilla.com/D9182
testing/web-platform/meta/css/css-transforms/animation/list-interpolation.html.ini
testing/web-platform/tests/css/css-transforms/animation/list-interpolation.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/css/css-transforms/animation/list-interpolation.html.ini
@@ -0,0 +1,3 @@
+[list-interpolation.html]
+  [Animation between "rotate(0deg) translate(100px)" and "rotate(720deg) scale(2) translate(200px)" at progress 0.25]
+    expected: FAIL
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transforms/animation/list-interpolation.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Transform list interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#interpolation-of-transforms">
+<meta name="assert" content="Interpolation of transform function lists is performed as follows">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/interpolation-testcommon.js"></script>
+</head>
+<body>
+<script>
+// none -> none
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'none',
+    to: 'none',
+  },
+  [{ at: 0.25, expect: 'none' }]
+);
+
+// none -> something
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'none',
+    to: 'translate(200px) rotate(720deg)',
+  },
+  [{ at: 0.25, expect: 'translate(50px) rotate(180deg)' }]
+);
+
+// something -> none
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'translate(200px) rotate(720deg)',
+    to: 'none',
+  },
+  [{ at: 0.25, expect: 'translate(150px) rotate(540deg)' }]
+);
+
+// Mismatched lengths (from is shorter), common part matches
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'translate(100px)',
+    to: 'translate(200px) rotate(720deg)',
+  },
+  [{ at: 0.25, expect: 'translate(125px) rotate(180deg)' }]
+);
+
+// Mismatched lengths (to is shorter), common part matches
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'translate(100px) rotate(720deg)',
+    to: 'translate(200px)',
+  },
+  [{ at: 0.25, expect: 'translate(125px) rotate(540deg)' }]
+);
+
+// Perfect match
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'scale(2) rotate(360deg) translate(100px) matrix(1, 0, 0, 1, 100, 0) skew(0deg)',
+    to: 'scale(3) rotate(1080deg) translate(200px) matrix(1, 0, 0, 1, 0, 200) skew(720deg)',
+  },
+  [
+    {
+      at: 0.25,
+      expect: 'scale(2.25) rotate(540deg) translate(125px) matrix(1, 0, 0, 1, 75, 50) skew(180deg)',
+    },
+  ]
+);
+
+// Matches on primitives
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'translateX(100px) scaleX(3) translate(500px) scale(2)',
+    to: 'translateY(200px) scale(5) translateX(100px) scaleY(3)',
+  },
+  [{ at: 0.25, expect: 'translate(75px, 50px) scale(3.5, 2) translate(400px, 0px) scale(1.75, 2.25)' }]
+);
+
+// Common prefix
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'rotate(0deg) translate(100px)',
+    to: 'rotate(720deg) scale(2) translate(200px)',
+  },
+  [{ at: 0.25, expect: 'rotate(180deg) matrix(1.25, 0, 0, 1.25, 175, 0)' }]
+);
+
+// Complete mismatch (except length)
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'scale(2) rotate(0deg) translate(100px)',
+    to: 'rotate(720deg) scale(2) translate(200px)',
+  },
+  [{ at: 0.25, expect: 'matrix(2, 0, 0, 2, 250, 0)' }]
+);
+
+// Complete mismatch including length
+test_interpolation(
+  {
+    property: 'transform',
+    from: 'scale(2) rotate(0deg)',
+    to: 'rotate(720deg) scale(2) translate(200px)',
+  },
+  [{ at: 0.25, expect: 'matrix(2, 0, 0, 2, 100, 0)' }]
+);
+</script>
+</body>
+</html>