Update web-platform-tests to revision 16c99fc3f05855a7d7d19397a19f49d2dbf429b9

9 files changed, 220 insertions, 0 deletions

diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/support/transform-interpolation-reftests.js b/tests/wpt/web-platform-tests/css/css-transforms/animation/support/transform-interpolation-reftests.js
new file mode 100644
index 00000000000..0094b8a2c75
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/support/transform-interpolation-reftests.js
@@ -0,0 +1,126 @@
+'use strict';
+
+// Each test is an array of [endpoint, midpoint, endpoint] and tests
+// whether the endpoints interpolate to the same visual state as the midpoint
+const transformTests = {
+  translate: [
+    ['translateX(0px)', 'translateX(25px)', 'translateX(50px)'],
+    ['translateY(0px)', 'translateY(25px)', 'translateY(50px)'],
+    ['translateX(0%)', 'translateX(25%)', 'translateX(50%)'],
+    ['translateY(0%)', 'translateY(25%)', 'translateY(50%)'],
+    ['translateX(50%)', 'translate(25%, 25%)', 'translateY(50%)'],
+    ['translateX(50%)', 'translate(25%, 25px)', 'translateY(50px)'],
+    ['translateX(50px)', 'translateX(calc(25px + 25%))', 'translateX(50%)']
+  ],
+  translateEm: [
+    ['translateX(0em)', 'translateX(2em)', 'translateX(4em)'],
+    ['translateX(-50px)', 'translateX(calc(2em - 25px))', 'translateX(4em)'],
+    ['translateX(50%)', 'translateX(calc(25% - 2em))', 'translateX(-4em)']
+  ],
+  rotate: [
+    ['rotate(0deg)', 'rotate(45deg)', 'rotate(90deg)'],
+    ['rotateX(0deg)', 'rotateX(45deg)', 'rotateX(90deg)'],
+    ['rotateY(0deg)', 'rotateY(45deg)', 'rotateY(90deg)'],
+    ['rotate(0deg)', 'rotate(180deg)', 'rotate(360deg)'],
+    ['rotate3d(7, 8, 9, 0deg)', 'rotate3d(7, 8, 9, 45deg)', 'rotate3d(7, 8, 9, 90deg)'],
+    // First endpoint is the same rotation as rotateZ(0deg) but triggers SLERP
+    ['rotateX(360deg)', 'rotateZ(45deg)', 'rotateZ(90deg)']
+  ],
+  scale: [
+    ['scaleX(0.5)', 'scaleX(0.75)', 'scaleX(1)'],
+    ['scaleY(0.5)', 'scaleY(0.75)', 'scaleY(1)'],
+    ['scale(0.5)', 'scale(0.75)', 'scale(1)'],
+    ['scaleX(0.5)', 'scale(0.75)', 'scaleY(0.5)'],
+    ['scale3d(0.5, 1, 2)', 'scale3d(0.75, 0.75, 3)', 'scale3d(1, 0.5, 4)']
+  ],
+  skew: [
+    ['skewX(0deg)', 'skewX(30deg)', 'skewX(60deg)'],
+    ['skewY(0deg)', 'skewY(30deg)', 'skewY(60deg)'],
+    ['skew(60deg, 0deg)', 'skew(30deg, 30deg)', 'skew(0deg, 60deg)'],
+    ['skewX(0deg) rotate(0deg)', 'skewX(0deg) rotate(180deg)', 'skewX(0deg) rotate(360deg)'],
+    ['skewX(0deg) rotate(0deg)', 'matrix(1, 0, 0, 1, 0, 0)', 'skewY(0deg) rotate(360deg)']
+  ],
+  matrix: [
+    // matched matrix parameters do not collapse the values after them
+    ['matrix(1,0,0,1,0,0) rotate(0deg)', 'matrix(1.5,0,0,1.5,0,0) rotate(180deg)', 'matrix(2,0,0,2,0,0) rotate(360deg)']
+  ]
+}
+
+// Initial setup, which includes properties that will be overridden to
+// test invalidation.
+function initialStyle(div) {
+  div.style.width = '180px';
+  div.style.height = '150px';
+  div.style.margin = '50px';
+  div.style.borderLeft = 'solid 40px blue';
+  div.style.backgroundColor = 'green';
+  div.style.willChange = 'transform';
+  div.style.fontSize = '30px';
+}
+
+function finalStyle(div) {
+  div.style.width = '80px';
+  div.style.height = '80px';
+  div.style.fontSize = '15px';
+}
+
+function styleBody(){
+  let body = document.body;
+  body.style.display = 'flex';
+  body.style.flexDirection = 'row';
+  body.style.flexWrap = 'wrap';
+}
+
+// Simulate a static image at 50% progeress with a running animation.
+// The easing curve has zero slope and curvature at its midpoint of 50% -> 50%.
+// The timing values are chosen so as so that a delay of up to 10s will not
+// cause a visual change.
+const easing = 'cubic-bezier(0,1,1,0)';
+const duration = 1e9;
+const delay = -duration/2;
+
+// Indices to unpack a test case, which is in the format
+// [start, midpoint, end]
+const startIndex = 0;
+const midIndex = 1;
+const endIndex = 2;
+
+async function createTests(tests) {
+  styleBody();
+  for (const test of tests) {
+    let div = document.createElement('div');
+    document.body.appendChild(div);
+    initialStyle(div);
+    var anim = div.animate(
+        {transform: [test[startIndex], test[endIndex]]},
+        {duration: duration, delay: delay, easing: easing});
+    await anim.ready;
+    finalStyle(div);  // Change size to test invalidation.
+  }
+
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+  takeScreenshot();
+}
+
+// Create references using an animation with identical keyframes for start
+// and end so as to avoid rounding and anti-aliasing differences between
+// animated and non-animated pathways.
+async function createRefs(tests) {
+  styleBody();
+  for (const test of tests) {
+    let div = document.createElement('div');
+    document.body.appendChild(div);
+    initialStyle(div);
+    finalStyle(div);
+    var anim = div.animate(
+        {transform: [test[midIndex], test[midIndex]]},
+        {duration: duration, delay: delay, easing: easing});
+    await anim.ready;
+  }
+
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+  takeScreenshot();
+}
+
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-animated-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-animated-ref.html
new file mode 100644
index 00000000000..0930a7469a8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-animated-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<script src="../../../common/reftest-wait.js"></script>
+<script src="support/transform-interpolation-reftests.js"></script>
+
+<body>
+<script>
+const testName = window.location.search.substr(1);
+createRefsWithAnimation(transformTests[testName]);
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-matrix.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-matrix.html
new file mode 100644
index 00000000000..b5f9c3cd308
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-matrix.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="transform-interpolation-ref.html?matrix">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/">
+
+<script src="../../../common/reftest-wait.js"></script>
+<script src="support/transform-interpolation-reftests.js"></script>
+
+<body>
+<script>
+createTests(transformTests.matrix);
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-ref.html
new file mode 100644
index 00000000000..2fee6f7c1fc
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<script src="../../../common/reftest-wait.js"></script>
+<script src="support/transform-interpolation-reftests.js"></script>
+
+<body>
+<script>
+const testName = window.location.search.substr(1);
+createRefs(transformTests[testName]);
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate.html
new file mode 100644
index 00000000000..9d94d83424d
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="transform-interpolation-ref.html?rotate">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/">
+
+<script src="../../../common/reftest-wait.js"></script>
+<script src="support/transform-interpolation-reftests.js"></script>
+
+<body>
+<script>
+createTests(transformTests.rotate);
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-scale.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-scale.html
new file mode 100644
index 00000000000..ef0da0d1f43
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-scale.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="transform-interpolation-ref.html?scale">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/">
+
+<script src="../../../common/reftest-wait.js"></script>
+<script src="support/transform-interpolation-reftests.js"></script>
+
+<body>
+<script>
+createTests(transformTests.scale);
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-skew.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-skew.html
new file mode 100644
index 00000000000..4f8aa52fd10
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-skew.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="transform-interpolation-ref.html?skew">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/">
+
+<script src="../../../common/reftest-wait.js"></script>
+<script src="support/transform-interpolation-reftests.js"></script>
+
+<body>
+<script>
+createTests(transformTests.skew);
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate-em.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate-em.html
new file mode 100644
index 00000000000..aff613ab09c
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate-em.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="transform-interpolation-ref.html?translateEm">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/">
+
+<script src="../../../common/reftest-wait.js"></script>
+<script src="support/transform-interpolation-reftests.js"></script>
+
+<body>
+<script>
+createTests(transformTests.translateEm);
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate.html
new file mode 100644
index 00000000000..5abeb240932
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="transform-interpolation-ref.html?translate">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/">
+
+<script src="../../../common/reftest-wait.js"></script>
+<script src="support/transform-interpolation-reftests.js"></script>
+
+<body>
+<script>
+createTests(transformTests.translate);
+</script>