aboutsummaryrefslogtreecommitdiffstats
path: root/tests/wpt/web-platform-tests/css/css-transforms
diff options
context:
space:
mode:
authorWPT Sync Bot <josh+wptsync@joshmatthews.net>2020-10-31 08:21:06 +0000
committerWPT Sync Bot <josh+wptsync@joshmatthews.net>2020-10-31 10:49:39 +0000
commit4fcc308130013f91eb1854dfbdb6e9732cdd94ba (patch)
treee8a20b1ffcd9f69f90530ac7a43c8101c9402177 /tests/wpt/web-platform-tests/css/css-transforms
parent4c3247e4809b162ab357376102285d28b423b80e (diff)
downloadservo-4fcc308130013f91eb1854dfbdb6e9732cdd94ba.tar.gz
servo-4fcc308130013f91eb1854dfbdb6e9732cdd94ba.zip
Update web-platform-tests to revision af2796bc4ea941309f2f1f55c05e81b1dcef7ffb
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-transforms')
-rw-r--r--tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html150
-rw-r--r--tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html54
-rw-r--r--tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html73
3 files changed, 232 insertions, 45 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html
index fa0118d50f4..f9a4527342f 100644
--- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html
@@ -10,11 +10,59 @@
<body>
<script>
+// Numerical precision may cause an axis aligned rotation to appear slightly
+// misaligned. Convert to (x, y, z, angle) form with rounding for comparison.
+function parseRotation(args) {
+ const array = args.split(' ');
+ if (array.length == 1) {
+ // Angle or 'none'.
+ return !!parseFloat(args) ? roundNumbers('0 0 1 ' + args) : args;
+ }
+ if (array.length == 2) {
+ // Axis name + angle
+ let axis = array[0];
+ let angle = array[1];
+ switch (array[0]) {
+ case 'x':
+ axis = '1 0 0 ';
+ break;
+ case 'y':
+ axis = '0 1 0';
+ break;
+ case 'z':
+ axis = '0 0 1';
+ break;
+ }
+ return roundNumbers(axis + ' ' + angle);
+ }
+ if (array.length == 4) {
+ // Axis as [x,y,z] triplet + angle.
+ // Normalize the axis (if possible) for comparison.
+ let x = parseFloat(array[0]);
+ let y = parseFloat(array[1]);
+ let z = parseFloat(array[2]);
+ const angle = array[3];
+ const length = Math.sqrt(x*x + y*y + z*z);
+ if (length > 1e-4) {
+ x /= length;
+ y /= length;
+ z /= length;
+ }
+ return roundNumbers(`${x} ${y} ${z} ${angle}`);
+ }
+ return args;
+}
+
+function compareRotations(actual, expected) {
+ assert_equals(parseRotation(actual), parseRotation(expected));
+}
+
test_composition({
property: 'rotate',
underlying: '100deg',
addFrom: '10deg',
addTo: '30deg',
+ comparisonFunction: compareRotations
}, [
{at: -1, expect: '90deg'},
{at: 0, expect: '110deg'},
@@ -29,6 +77,7 @@ test_composition({
underlying: '1 0 0 200deg',
addFrom: '1 0 0 -100deg',
replaceTo: '1 0 0 40deg',
+ comparisonFunction: compareRotations
}, [
{at: -1, expect: '1 0 0 160deg'},
{at: 0, expect: '1 0 0 100deg'},
@@ -43,6 +92,7 @@ test_composition({
underlying: '0 1 0 -40deg',
replaceFrom: '0 1 0 50deg',
addTo: '0 1 0 10deg',
+ comparisonFunction: compareRotations
}, [
{at: -1, expect: '0 1 0 130deg'},
{at: 0, expect: '0 1 0 50deg'},
@@ -57,13 +107,14 @@ test_composition({
underlying: '1 2 3 40deg',
addFrom: '2 4 6 10deg',
addTo: '3 6 9 50deg',
+ comparisonFunction: compareRotations
}, [
- {at: -1, expect: '1 2 3 10deg'},
- {at: 0, expect: '1 2 3 50deg'},
- {at: 0.25, expect: '1 2 3 60deg'},
- {at: 0.75, expect: '1 2 3 80deg'},
- {at: 1, expect: '1 2 3 90deg'},
- {at: 2, expect: '1 2 3 130deg'},
+ {at: -1, expect: '0.27 0.53 0.8 10deg'},
+ {at: 0, expect: '0.27 0.53 0.8 50deg'},
+ {at: 0.25, expect: '0.27 0.53 0.8 60deg'},
+ {at: 0.75, expect: '0.27 0.53 0.8 80deg'},
+ {at: 1, expect: '0.27 0.53 0.8 90deg'},
+ {at: 2, expect: '0.27 0.53 0.8 130deg'},
]);
test_composition({
@@ -71,13 +122,15 @@ test_composition({
underlying: '1 2 3 270deg',
addFrom: '1 2 3 90deg',
replaceTo: '0 1 0 100deg',
+ comparisonFunction: compareRotations
}, [
- {at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'},
- {at: 0, expect: '1 2 3 360deg'},
- {at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'},
- {at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'},
- {at: 1, expect: '0 1 0 100deg'},
- {at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'},
+ {at: -1, expect: '0 -1 0 100deg'},
+ {at: 0, expect: '0.27 0.53 0.8 360deg'},
+ {at: 0.25, expect: 'y 25deg'},
+ {at: 0.75, expect: 'y 75deg'},
+ {at: 1, expect: 'y 100deg'},
+ // Accept both the SLERP and the common axis solution, which are equivalent.
+ {at: 2, expect: '0 -1 0 160deg', option: 'y 200deg'},
]);
test_composition({
@@ -85,27 +138,30 @@ test_composition({
underlying: '1 2 3 90deg',
addFrom: '2 4 6 270deg',
replaceTo: '0 1 0 100deg',
+ comparisonFunction: compareRotations
}, [
- {at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'},
- {at: 0, expect: '1 2 3 360deg'},
- {at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'},
- {at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'},
- {at: 1, expect: '0 1 0 100deg'},
- {at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'},
+ {at: -1, expect: '0 -1 0 100deg'},
+ {at: 0, expect: '0.27 0.53 0.8 360deg'},
+ {at: 0.25, expect: 'y 25deg'},
+ {at: 0.75, expect: 'y 75deg'},
+ {at: 1, expect: 'y 100deg'},
+ // Accept both the SLERP and the common axis solution, which are equivalent.
+ {at: 2, expect: '0 -1 0 160deg', option: 'y 200deg'},
]);
test_composition({
property: 'rotate',
- underlying: '1 0 0 90deg',
- addFrom: '0 1 0 180deg',
- replaceTo: '0 0 1 90deg',
+ underlying: '1 0 0 0deg',
+ addFrom: '1 1 0 90deg',
+ replaceTo: '0 1 1 135deg',
+ comparisonFunction: compareRotations
}, [
- {at: -1, expect: '-6.12323e-17 -1 1.57009e-16 90deg'},
- {at: 0, expect: '-4.32978e-17 -0.707107 -0.707107 180deg'},
- {at: 0.25, expect: '-1.48952e-16 -0.894427 -0.447214 131.81deg'},
- {at: 0.75, expect: '-2.94392e-17 -0.707107 0.707107 70.5288deg'},
- {at: 1, expect: '90deg'},
- {at: 2, expect: '-6.12323e-17 -1 -4.71028e-16 90deg'},
+ {at: -1, expect: '0.67 -0.06 -0.74 124.97deg'},
+ {at: 0, expect: '0.71 0.71 0 90deg'},
+ {at: 0.25, expect: '0.54 0.8 0.26 94.83deg'},
+ {at: 0.75, expect: '0.17 0.78 0.61 118.68deg'},
+ {at: 1, expect: '0 0.71 0.71 135deg'},
+ {at: 2, expect: '-0.52 0.29 0.81 208.96deg'},
]);
test_composition({
@@ -113,13 +169,14 @@ test_composition({
underlying: 'none',
addFrom: 'none',
replaceTo: '0 1 0 100deg',
+ comparisonFunction: compareRotations
}, [
- {at: -1, expect: '0 1 0 -100deg'},
- {at: 0, expect: 'none'},
- {at: 0.25, expect: '0 1 0 25deg'},
- {at: 0.75, expect: '0 1 0 75deg'},
- {at: 1, expect: '0 1 0 100deg'},
- {at: 2, expect: '0 1 0 200deg'},
+ {at: -1, expect: 'y -100deg'},
+ {at: 0, expect: 'y 0deg'},
+ {at: 0.25, expect: 'y 25deg'},
+ {at: 0.75, expect: 'y 75deg'},
+ {at: 1, expect: 'y 100deg'},
+ {at: 2, expect: 'y 200deg'},
]);
test_composition({
@@ -127,13 +184,14 @@ test_composition({
underlying: 'none',
addFrom: '2 4 6 270deg',
replaceTo: 'none',
+ comparisonFunction: compareRotations
}, [
- {at: -1, expect: '2 4 6 540deg'},
- {at: 0, expect: '2 4 6 270deg'},
- {at: 0.25, expect: '2 4 6 202.5deg'},
- {at: 0.75, expect: '2 4 6 67.5deg'},
- {at: 1, expect: 'none'},
- {at: 2, expect: '2 4 6 -270deg'},
+ {at: -1, expect: '0.27 0.53 0.8 540deg'},
+ {at: 0, expect: '0.27 0.53 0.8 270deg'},
+ {at: 0.25, expect: '0.27 0.53 0.8 202.5deg'},
+ {at: 0.75, expect: '0.27 0.53 0.8 67.5deg'},
+ {at: 1, expect: '0.27 0.53 0.8 0deg'},
+ {at: 2, expect: '0.27 0.53 0.8 -270deg'},
]);
test_composition({
@@ -141,6 +199,7 @@ test_composition({
underlying: '1 2 3 90deg',
addFrom: 'none',
replaceTo: '0 1 0 100deg',
+ comparisonFunction: compareRotations
}, [
{at: -1, expect: '0.31 -0.22 0.92 131.66deg'},
{at: 0, expect: '1 2 3 90deg'},
@@ -155,13 +214,14 @@ test_composition({
underlying: '1 2 3 90deg',
addFrom: '2 4 6 270deg',
replaceTo: 'none',
+ comparisonFunction: compareRotations
}, [
- {at: -1, expect: '1 2 3 720deg'},
- {at: 0, expect: '1 2 3 360deg'},
- {at: 0.25, expect: '1 2 3 270deg'},
- {at: 0.75, expect: '1 2 3 90deg'},
- {at: 1, expect: 'none'},
- {at: 2, expect: '1 2 3 -360deg'},
+ {at: -1, expect: '0.27 0.53 0.8 720deg'},
+ {at: 0, expect: '0.27 0.53 0.8 360deg'},
+ {at: 0.25, expect: '0.27 0.53 0.8 270deg'},
+ {at: 0.75, expect: '0.27 0.53 0.8 90deg'},
+ {at: 1, expect: '0.27 0.53 0.8 0deg'},
+ {at: 2, expect: '0.27 0.53 0.8 -360deg'},
]);
</script>
</body>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html
new file mode 100644
index 00000000000..e95e62be888
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Reference for rotate transform equivalent</title>
+<script src="/common/reftest-wait.js"></script>
+<style>
+ .block {
+ border: 2px solid white; /* Avoid anti-aliasing artifacts */
+ height: 100px;
+ width: 100px;
+ position: absolute;
+ left: 100px;
+ top: 100px;
+ }
+
+ .overlay {
+ background: green;
+ z-index: 2;
+ }
+</style>
+<body>
+ <div id="transform" class="block overlay"></div>
+
+<script>
+ 'use strict';
+
+ async function waitForNextFrame() {
+ return new Promise(resolve => {
+ window.requestAnimationFrame(() => {
+ resolve();
+ });
+ });
+ }
+
+ async function createAnimation(elementName, keyframes) {
+ const element = document.getElementById(elementName);
+ const anim = element.animate(keyframes, 1000);
+ anim.pause();
+ anim.currentTime = 500;
+ return anim.ready;
+ }
+
+ onload = async function() {
+ await waitForNextFrame();
+
+ await createAnimation('transform', [
+ {transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'},
+ {transform: 'matrix(0, 1, -1, 0, 0, 0)'}]);
+
+ await waitForNextFrame();
+ takeScreenshot();
+ };
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html
new file mode 100644
index 00000000000..7474c79e7e6
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Rotate transform equivalent</title>
+<link rel="match" href="rotate-transform-equivalent-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
+<script src="/common/reftest-wait.js"></script>
+<style>
+ .block {
+ border: 2px solid white; /* Avoid anti-aliasing artifacts */
+ height: 100px;
+ width: 100px;
+ position: absolute;
+ left: 100px;
+ top: 100px;
+ }
+
+ .rotation {
+ background: red;
+ }
+
+ .overlay {
+ background: green;
+ }
+
+ #rotateAdd {
+ rotate: 1 0 0 45deg;
+ }
+</style>
+<body>
+ <div id="rotateAdd" class="block rotation"></div>
+ <div id="rotateReplace" class="block rotation"></div>
+ <div id="transform" class="block overlay"></div>
+
+<script>
+ 'use strict';
+
+ async function waitForNextFrame() {
+ return new Promise(resolve => {
+ window.requestAnimationFrame(() => {
+ resolve();
+ });
+ });
+ }
+
+ async function createAnimation(elementName, keyframes) {
+ const element = document.getElementById(elementName);
+ const anim = element.animate(keyframes, 1000);
+ anim.pause();
+ anim.currentTime = 500;
+ return anim.ready;
+ }
+
+ onload = async function() {
+ await waitForNextFrame();
+
+ await createAnimation('rotateAdd', [
+ {rotate: '1 0 0 45deg', composite: 'add'},
+ {rotate: '0 0 1 90deg'}]);
+ await createAnimation('rotateReplace', [
+ {rotate: '1 0 0 90deg'},
+ {rotate: '0 0 1 90deg'}]);
+
+ await createAnimation('transform', [
+ {transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'},
+ {transform: 'matrix(0, 1, -1, 0, 0, 0)'}]);
+
+ await waitForNextFrame();
+ takeScreenshot();
+ };
+</script>
+</body>
+
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-28 07:24:52 +0000