Skip to content

GitLab

T
tangled
Commit 72c5f480 authored by Stephen McGruer's avatar Stephen McGruer Committed by Commit Bot
Browse files
Options

Port transform-*.html interpolation tests to WPT 

Bug: 900581
Change-Id: I9c1ce705f7e6d705e0c52e30fb1eda4694b66f09
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1768980Reviewed-by: default avatarKevin Ellis <kevers@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#691131}
parent f650c36c
Hide whitespace changes
Inline Side-by-side
Showing with 1593 additions and 915 deletions
third_party/blink/web_tests/animations/interpolation/transform-interpolation-001.html deleted 100644 → 0
View file @ f650c36c
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
// Perspective
assertInterpolation({
property: 'transform',
from: 'perspective(400px)',
to: 'perspective(500px)'
}, [
{at: -1, is: 'perspective(300px)'},
{at: 0, is: 'perspective(400px)'},
{at: 0.25, is: 'perspective(425px)'},
{at: 0.75, is: 'perspective(475px)'},
{at: 1, is: 'perspective(500px)'},
{at: 2, is: 'perspective(600px)'},
]);
assertInterpolation({
property: 'transform',
from: 'skewX(10rad) perspective(400px)',
to: 'skewX(20rad) perspective(500px)'
}, [
{at: -1, is: 'skewX(0rad) perspective(300px)'},
{at: 0, is: 'skewX(10rad) perspective(400px)'},
{at: 0.25, is: 'skewX(12.5rad) perspective(425px)'},
{at: 0.75, is: 'skewX(17.5rad) perspective(475px)'},
{at: 1, is: 'skewX(20rad) perspective(500px)'},
{at: 2, is: 'skewX(30rad) perspective(600px)'},
]);
assertInterpolation({
property: 'transform',
from: 'scaleZ(1) perspective(400px)',
to: 'scaleZ(2) perspective(500px)'
}, [
{at: -1, is: 'scaleZ(0) perspective(300px)'},
{at: 0, is: 'scaleZ(1) perspective(400px)'},
{at: 0.25, is: 'scaleZ(1.25) perspective(425px)'},
{at: 0.75, is: 'scaleZ(1.75) perspective(475px)'},
{at: 1, is: 'scaleZ(2) perspective(500px)'},
{at: 2, is: 'scaleZ(3) perspective(600px)'},
]);
// Rotate
assertInterpolation({
property: 'transform',
from: 'rotate(30deg)',
to: 'rotate(330deg)'
}, [
{at: -1, is: 'rotate(-270deg)'},
{at: 0, is: 'rotate(30deg)'},
{at: 0.25, is: 'rotate(105deg)'},
{at: 0.75, is: 'rotate(255deg)'},
{at: 1, is: 'rotate(330deg)'},
{at: 2, is: 'rotate(630deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotateX(0deg)',
to: 'rotateX(700deg)'
}, [
{at: -1, is: 'rotateX(-700deg)'},
{at: 0, is: 'rotateX(0deg)'},
{at: 0.25, is: 'rotateX(175deg)'},
{at: 0.75, is: 'rotateX(525deg)'},
{at: 1, is: 'rotateX(700deg)'},
{at: 2, is: 'rotateX(1400deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotateY(0deg)',
to: 'rotateY(800deg)'
}, [
{at: -1, is: 'rotateY(-800deg)'},
{at: 0, is: 'rotateY(0deg)'},
{at: 0.25, is: 'rotateY(200deg)'},
{at: 0.75, is: 'rotateY(600deg)'},
{at: 1, is: 'rotateY(800deg)'},
{at: 2, is: 'rotateY(1600deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotateZ(0deg)',
to: 'rotateZ(900deg)'
}, [
{at: -1, is: 'rotateZ(-900deg)'},
{at: 0, is: 'rotateZ(0deg)'},
{at: 0.25, is: 'rotateZ(225deg)'},
{at: 0.75, is: 'rotateZ(675deg)'},
{at: 1, is: 'rotateZ(900deg)'},
{at: 2, is: 'rotateZ(1800deg)'},
]);
// Interpolation is about a common axis if either endpoint has a rotation angle
// of zero.
assertInterpolation({
property: 'transform',
from: 'rotateX(0deg)',
to: 'rotateY(900deg)'
}, [
{at: -1, is: 'rotateY(-900deg)'},
{at: 0, is: 'rotateY(0deg)'},
{at: 0.25, is: 'rotateY(225deg)'},
{at: 0.75, is: 'rotateY(675deg)'},
{at: 1, is: 'rotateY(900deg)'},
{at: 2, is: 'rotateY(1800deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotateY(900deg)',
to: 'rotateZ(0deg)'
}, [
{at: -1, is: 'rotateY(1800deg)'},
{at: 0, is: 'rotateY(900deg)'},
{at: 0.25, is: 'rotateY(675deg)'},
{at: 0.75, is: 'rotateY(225deg)'},
{at: 1, is: 'rotateY(0deg)'},
{at: 2, is: 'rotateY(-900deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotate3d(7, 8, 9, 100deg)',
to: 'rotate3d(7, 8, 9, 260deg)'
}, [
{at: -1, is: 'rotate3d(7, 8, 9, -60deg)'},
{at: 0, is: 'rotate3d(7, 8, 9, 100deg)'},
{at: 0.25, is: 'rotate3d(7, 8, 9, 140deg)'},
{at: 0.75, is: 'rotate3d(7, 8, 9, 220deg)'},
{at: 1, is: 'rotate3d(7, 8, 9, 260deg)'},
{at: 2, is: 'rotate3d(7, 8, 9, 420deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotate3d(7, 8, 9, 0deg)',
to: 'rotate3d(7, 8, 9, 450deg)'
}, [
{at: -1, is: 'rotate3d(7, 8, 9, -450deg)'},
{at: 0, is: 'rotate3d(7, 8, 9, 0deg)'},
{at: 0.25, is: 'rotate3d(7, 8, 9, 112.5deg)'},
{at: 0.75, is: 'rotate3d(7, 8, 9, 337.5deg)'},
{at: 1, is: 'rotate3d(7, 8, 9, 450deg)'},
{at: 2, is: 'rotate3d(7, 8, 9, 900deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotate3d(0, 1, 0, 0deg)',
to: 'rotate3d(0, 1, 0, 450deg)'
}, [
{at: -1, is: 'rotate3d(0, 1, 0, -450deg)'},
{at: 0, is: 'rotate3d(0, 1, 0, 0deg)'},
{at: 0.25, is: 'rotate3d(0, 1, 0, 112.5deg)'},
{at: 0.75, is: 'rotate3d(0, 1, 0, 337.5deg)'},
{at: 1, is: 'rotate3d(0, 1, 0, 450deg)'},
{at: 2, is: 'rotate3d(0, 1, 0, 900deg)'},
]);
// Rotation is about a common axis if the axes are colinear.
assertInterpolation({
property: 'transform',
from: 'rotate3d(0, 1, 0, 0deg)',
to: 'rotate3d(0, 2, 0, 450deg)'
}, [
{at: -1, is: 'rotate3d(0, 1, 0, -450deg)'},
{at: 0, is: 'rotate3d(0, 1, 0, 0deg)'},
{at: 0.25, is: 'rotate3d(0, 1, 0, 112.5deg)'},
{at: 0.75, is: 'rotate3d(0, 1, 0, 337.5deg)'},
{at: 1, is: 'rotate3d(0, 1, 0, 450deg)'},
{at: 2, is: 'rotate3d(0, 1, 0, 900deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotate3d(1, 1, 0, 90deg)',
to: 'rotate3d(0, 1, 1, 180deg)'
}, [
{at: -1, is: 'rotate3d(0.41, -0.41, -0.82, 120deg)'},
{at: 0, is: 'rotate3d(1, 1, 0, 90deg)'},
{at: 0.25, is: 'rotate3d(0.8, 0.27, -0.53, 82.76deg)'},
{at: 0.75, is: 'rotate3d(0.265153, -0.536206, -0.801359, 138.89deg)'},
{at: 1, is: 'rotate3d(0, 1, 1, 180deg)'},
{at: 2, is: 'rotate3d(0.71, 0, -0.71, 90deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'none',
to: 'rotate(90deg)'
}, [
{at: -1, is: 'rotate(-90deg)'},
{at: 0, is: 'rotate(0deg)'},
{at: 0.25, is: 'rotate(22.5deg)'},
{at: 0.75, is: 'rotate(67.5deg)'},
{at: 1, is: 'rotate(90deg)'},
{at: 2, is: 'rotate(180deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotate(90deg)',
to: 'none'
}, [
{at: -1, is: 'rotate(180deg)'},
{at: 0, is: 'rotate(90deg)'},
{at: 0.25, is: 'rotate(67.5deg)'},
{at: 0.75, is: 'rotate(22.5deg)'},
{at: 1, is: 'rotate(0deg)'},
{at: 2, is: 'rotate(-90deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
to: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'
}, [
{at: -1, is: 'rotateX(-700deg) rotateY(-800deg) rotateZ(-900deg)'},
{at: 0, is: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'},
{at: 0.25, is: 'rotateX(175deg) rotateY(200deg) rotateZ(225deg)'},
{at: 0.75, is: 'rotateX(525deg) rotateY(600deg) rotateZ(675deg)'},
{at: 1, is: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'},
{at: 2, is: 'rotateX(1400deg) rotateY(1600deg) rotateZ(1800deg)'},
]);
</script>
</body>
third_party/blink/web_tests/animations/interpolation/transform-interpolation-002.html deleted 100644 → 0
View file @ f650c36c
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
// Scale
assertInterpolation({
property: 'transform',
from: 'scale(10, 5)',
to: 'scale(20, 9)'
}, [
{at: -1, is: 'scale(0, 1)'},
{at: 0, is: 'scale(10, 5)'},
{at: 0.25, is: 'scale(12.5, 6)'},
{at: 0.75, is: 'scale(17.5, 8)'},
{at: 1, is: 'scale(20, 9)'},
{at: 2, is: 'scale(30, 13)'},
]);
assertInterpolation({
property: 'transform',
from: 'scaleX(10)',
to: 'scaleX(20)'
}, [
{at: -1, is: 'scaleX(0)'},
{at: 0, is: 'scaleX(10)'},
{at: 0.25, is: 'scaleX(12.5)'},
{at: 0.75, is: 'scaleX(17.5)'},
{at: 1, is: 'scaleX(20)'},
{at: 2, is: 'scaleX(30)'},
]);
assertInterpolation({
property: 'transform',
from: 'scaleY(5)',
to: 'scaleY(9)'
}, [
{at: -1, is: 'scaleY(1)'},
{at: 0, is: 'scaleY(5)'},
{at: 0.25, is: 'scaleY(6)'},
{at: 0.75, is: 'scaleY(8)'},
{at: 1, is: 'scaleY(9)'},
{at: 2, is: 'scaleY(13)'},
]);
assertInterpolation({
property: 'transform',
from: 'scaleZ(1)',
to: 'scaleZ(2)'
}, [
{at: -1, is: 'scaleZ(0)'},
{at: 0, is: 'scaleZ(1)'},
{at: 0.25, is: 'scaleZ(1.25)'},
{at: 0.75, is: 'scaleZ(1.75)'},
{at: 1, is: 'scaleZ(2)'},
{at: 2, is: 'scaleZ(3)'},
]);
assertInterpolation({
property: 'transform',
from: 'scale3d(10, 0.5, 1)',
to: 'scale3d(20, 1, 2)'
}, [
{at: -1, is: 'scale3d(0, 0, 0)'},
{at: 0, is: 'scale3d(10, 0.5, 1)'},
{at: 0.25, is: 'scale3d(12.5, 0.625, 1.25)'},
{at: 0.75, is: 'scale3d(17.5, 0.875, 1.75)'},
{at: 1, is: 'scale3d(20, 1, 2)'},
{at: 2, is: 'scale3d(30, 1.5, 3)'},
]);
assertInterpolation({
property: 'transform',
from: 'scaleX(0)',
to: 'scaleY(0)',
}, [
{at: -1, is: 'scale(-1, 2)'},
{at: 0, is: 'scale(0, 1)'},
{at: 0.25, is: 'scale(0.25, 0.75)'},
{at: 0.75, is: 'scale(0.75, 0.25)'},
{at: 1, is: 'scale(1, 0)'},
{at: 2, is: 'scale(2, -1)'},
]);
assertInterpolation({
property: 'transform',
from: 'none',
to: 'scale3d(2, 3, 5)'
}, [
{at: -1, is: 'scale3d(0, -1, -3)'},
{at: 0, is: 'scale3d(1, 1, 1)'},
{at: 0.25, is: 'scale3d(1.25, 1.5, 2)'},
{at: 0.75, is: 'scale3d(1.75, 2.5, 4)'},
{at: 1, is: 'scale3d(2, 3, 5)'},
{at: 2, is: 'scale3d(3, 5, 9)'},
]);
assertInterpolation({
property: 'transform',
from: 'scale3d(2, 3, 5)',
to: 'none'
}, [
{at: -1, is: 'scale3d(3, 5, 9)'},
{at: 0, is: 'scale3d(2, 3, 5)'},
{at: 0.25, is: 'scale3d(1.75, 2.5, 4)'},
{at: 0.75, is: 'scale3d(1.25, 1.5, 2)'},
{at: 1, is: 'scale3d(1, 1, 1)'},
{at: 2, is: 'scale3d(0, -1, -3)'},
]);
assertInterpolation({
property: 'transform',
from: 'scaleX(10) scaleY(0.5) scaleZ(1)',
to: 'scaleX(20) scaleY(1) scaleZ(2)'
}, [
{at: -1, is: 'scaleX(0) scaleY(0) scaleZ(0)'},
{at: 0, is: 'scaleX(10) scaleY(0.5) scaleZ(1)'},
{at: 0.25, is: 'scaleX(12.5) scaleY(0.625) scaleZ(1.25)'},
{at: 0.75, is: 'scaleX(17.5) scaleY(0.875) scaleZ(1.75)'},
{at: 1, is: 'scaleX(20) scaleY(1) scaleZ(2)'},
{at: 2, is: 'scaleX(30) scaleY(1.5) scaleZ(3)'},
]);
</script>
</body>
third_party/blink/web_tests/animations/interpolation/transform-interpolation-003.html deleted 100644 → 0
View file @ f650c36c
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'transform',
from: 'skewX(10rad) scaleZ(1)',
to: 'skewX(20rad) scaleZ(2)'
}, [
{at: -1, is: 'skewX(0rad) scaleZ(0)'},
{at: 0, is: 'skewX(10rad) scaleZ(1)'},
{at: 0.25, is: 'skewX(12.5rad) scaleZ(1.25)'},
{at: 0.75, is: 'skewX(17.5rad) scaleZ(1.75)'},
{at: 1, is: 'skewX(20rad) scaleZ(2)'},
{at: 2, is: 'skewX(30rad) scaleZ(3)'},
]);
assertInterpolation({
property: 'transform',
from: 'skewX(10rad)',
to: 'skewX(20rad) scaleZ(2)'
}, [
{at: -1, is: 'skewX(0rad) scaleZ(0)'},
{at: 0, is: 'skewX(10rad) scaleZ(1)'},
{at: 0.25, is: 'skewX(12.5rad) scaleZ(1.25)'},
{at: 0.75, is: 'skewX(17.5rad) scaleZ(1.75)'},
{at: 1, is: 'skewX(20rad) scaleZ(2)'},
{at: 2, is: 'skewX(30rad) scaleZ(3)'},
]);
assertInterpolation({
property: 'transform',
from: 'scaleZ(3) perspective(400px)',
to: 'scaleZ(4) skewX(1rad) perspective(500px)'
}, [
{at: -1, is: 'scaleZ(2) matrix3d(1, 0, 0, 0, -1.55741, 1, 0, 0, 0, 0, 1, -0.003, 0, 0, 0, 1)'},
{at: 0, is: 'scaleZ(3) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'},
{at: 0.25, is: 'scaleZ(3.25) matrix3d(1, 0, 0, 0, 0.389352, 1, 0, 0, 0, 0, 1, -0.002375, 0, 0, 0, 1)'},
{at: 0.75, is: 'scaleZ(3.75) matrix3d(1, 0, 0, 0, 1.16806, 1, 0, 0, 0, 0, 1, -0.002125, 0, 0, 0, 1)'},
{at: 1, is: 'scaleZ(4) matrix3d(1, 0, 0, 0, 1.55741, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'},
{at: 2, is: 'scaleZ(5) matrix3d(1, 0, 0, 0, 3.11482, 1, 0, 0, 0, 0, 1, -0.0015, 0, 0, 0, 1)'},
]);
assertInterpolation({
property: 'transform',
from: 'translateY(70%) scaleZ(1)',
to: 'translateY(90%) scaleZ(2)'
}, [
{at: -1, is: 'translateY(50%) scaleZ(0)'},
{at: 0, is: 'translateY(70%) scaleZ(1)'},
{at: 0.25, is: 'translateY(75%) scaleZ(1.25)'},
{at: 0.75, is: 'translateY(85%) scaleZ(1.75)'},
{at: 1, is: 'translateY(90%) scaleZ(2)'},
{at: 2, is: 'translateY(110%) scaleZ(3)'},
]);
assertInterpolation({
property: 'transform',
from: 'translateY(70%)',
to: 'translateY(90%) scaleZ(2)'
}, [
{at: -1, is: 'translateY(50%) scaleZ(0)'},
{at: 0, is: 'translateY(70%)'},
{at: 0.25, is: 'translateY(75%) scaleZ(1.25)'},
{at: 0.75, is: 'translateY(85%) scaleZ(1.75)'},
{at: 1, is: 'translateY(90%) scaleZ(2)'},
{at: 2, is: 'translateY(110%) scaleZ(3)'},
]);
// Skew
assertInterpolation({
property: 'transform',
from: 'skewX(10rad)',
to: 'skewX(20rad)'
}, [
{at: -1, is: 'skewX(0rad)'},
{at: 0, is: 'skewX(10rad)'},
{at: 0.25, is: 'skewX(12.5rad)'},
{at: 0.75, is: 'skewX(17.5rad)'},
{at: 1, is: 'skewX(20rad)'},
{at: 2, is: 'skewX(30rad)'},
]);
assertInterpolation({
property: 'transform',
from: 'skewY(10rad)',
to: 'skewY(20rad)'
}, [
{at: -1, is: 'skewY(0rad)'},
{at: 0, is: 'skewY(10rad)'},
{at: 0.25, is: 'skewY(12.5rad)'},
{at: 0.75, is: 'skewY(17.5rad)'},
{at: 1, is: 'skewY(20rad)'},
{at: 2, is: 'skewY(30rad)'},
]);
</script>
</body>
third_party/blink/web_tests/animations/interpolation/transform-interpolation-004.html deleted 100644 → 0
View file @ f650c36c
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
// Translate
assertInterpolation({
property: 'transform',
from: 'translate(12px, 70%)',
to: 'translate(13px, 90%)'
}, [
{at: -1, is: 'translate(11px, 50%)'},
{at: 0, is: 'translate(12px, 70%)'},
{at: 0.25, is: 'translate(12.25px, 75%)'},
{at: 0.75, is: 'translate(12.75px, 85%)'},
{at: 1, is: 'translate(13px, 90%)'},
{at: 2, is: 'translate(14px, 110%)'},
]);
assertInterpolation({
property: 'transform',
from: 'translateX(12px)',
to: 'translateX(13px)'
}, [
{at: -1, is: 'translateX(11px)'},
{at: 0, is: 'translateX(12px)'},
{at: 0.25, is: 'translateX(12.25px)'},
{at: 0.75, is: 'translateX(12.75px)'},
{at: 1, is: 'translateX(13px)'},
{at: 2, is: 'translateX(14px)'},
]);
assertInterpolation({
property: 'transform',
from: 'translateY(70%)',
to: 'translateY(90%)'
}, [
{at: -1, is: 'translateY(50%)'},
{at: 0, is: 'translateY(70%)'},
{at: 0.25, is: 'translateY(75%)'},
{at: 0.75, is: 'translateY(85%)'},
{at: 1, is: 'translateY(90%)'},
{at: 2, is: 'translateY(110%)'},
]);
assertInterpolation({
property: 'transform',
from: 'translateZ(2em)',
to: 'translateZ(3em)'
}, [
{at: -1, is: 'translateZ(1em)'},
{at: 0, is: 'translateZ(2em)'},
{at: 0.25, is: 'translateZ(2.25em)'},
{at: 0.75, is: 'translateZ(2.75em)'},
{at: 1, is: 'translateZ(3em)'},
{at: 2, is: 'translateZ(4em)'},
]);
assertInterpolation({
property: 'transform',
from: 'translate3d(12px, 70%, 2em)',
to: 'translate3d(13px, 90%, 3em)'
}, [
{at: -1, is: 'translate3d(11px, 50%, 1em)'},
{at: 0, is: 'translate3d(12px, 70%, 2em)'},
{at: 0.25, is: 'translate3d(12.25px, 75%, 2.25em)'},
{at: 0.75, is: 'translate3d(12.75px, 85%, 2.75em)'},
{at: 1, is: 'translate3d(13px, 90%, 3em)'},
{at: 2, is: 'translate3d(14px, 110%, 4em)'},
]);
assertInterpolation({
property: 'transform',
from: 'translateX(12px) translateY(70%) translateZ(2em)',
to: 'translateX(13px) translateY(90%) translateZ(3em)'
}, [
{at: -1, is: 'translateX(11px) translateY(50%) translateZ(1em)'},
{at: 0, is: 'translateX(12px) translateY(70%) translateZ(2em)'},
{at: 0.25, is: 'translateX(12.25px) translateY(75%) translateZ(2.25em)'},
{at: 0.75, is: 'translateX(12.75px) translateY(85%) translateZ(2.75em)'},
{at: 1, is: 'translateX(13px) translateY(90%) translateZ(3em)'},
{at: 2, is: 'translateX(14px) translateY(110%) translateZ(4em)'},
]);
assertInterpolation({
property: 'transform',
from: 'skewX(10rad) translateY(70%)',
to: 'skewX(20rad) translateY(90%)'
}, [
{at: -1, is: 'skewX(0rad) translateY(50%)'},
{at: 0, is: 'skewX(10rad) translateY(70%)'},
{at: 0.25, is: 'skewX(12.5rad) translateY(75%)'},
{at: 0.75, is: 'skewX(17.5rad) translateY(85%)'},
{at: 1, is: 'skewX(20rad) translateY(90%)'},
{at: 2, is: 'skewX(30rad) translateY(110%)'},
]);
assertInterpolation({
property: 'transform',
from: 'skewX(1rad)',
to: 'translate3d(8px, -4px, 12px) skewX(2rad)'
}, [
{at: -1, is: 'matrix3d(1, 0, 0, 0, 5.2998553125713235, 1, 0, 0, 0, 0, 1, 0, -8, 4, -12, 1)'},
{at: 0, is: 'matrix(1, 0, 1.5574077246549023, 1, 0, 0)'},
{at: 0.25, is: 'matrix3d(1, 0, 0, 0, 0.621795827675797, 1, 0, 0, 0, 0, 1, 0, 2, -1, 3, 1)'},
{at: 0.75, is: 'matrix3d(1, 0, 0, 0, -1.2494279662824135, 1, 0, 0, 0, 0, 1, 0, 6, -3, 9, 1)'},
{at: 1, is: 'matrix3d(1, 0, 0, 0, -2.185039863261519, 1, 0, 0, 0, 0, 1, 0, 8, -4, 12, 1)'},
{at: 2, is: 'matrix3d(1, 0, 0, 0, -5.9274874511779405, 1, 0, 0, 0, 0, 1, 0, 16, -8, 24, 1)'},
]);
assertInterpolation({
property: 'transform',
from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
to: 'scaleY(2) skewX(2rad) perspective(500px)'
}, [
{at: -1, is: 'matrix3d(1, 0, 0, 0, 0, 0, 0, 0, -0.03876288659793814, 0.01938144329896907, 0.94, -0.0029653608247422686, 16, -8, 24, 0.986144329896907)'},
{at: 0, is: 'matrix3d(1, 0, 0, 0, 1.5574077246549023, 1, 0, 0, -0.02, 0.01, 0.97, -0.0025, 8, -4, 12, 1)'},
{at: 0.25, is: 'matrix3d(1, 0, 0, 0, 1.1186572632293585, 1.25, 0, 0, -0.0151159793814433, 0.00755798969072165, 0.9775, -0.002378247422680413, 6, -3, 9, 1.0012989690721648)'},
{at: 0.75, is: 'matrix3d(1, 0, 0, 0, -0.7525665307288518, 1.75, 0, 0, -0.005115979381443298, 0.002557989690721649, 0.9924999999999999, -0.002128247422680412, 2, -1, 3, 1.001298969072165)'},
{at: 1, is: 'matrix3d(1, 0, 0, 0, -2.185039863261519, 2, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'},
{at: 2, is: 'matrix3d(1, 0, 0, 0, -11.227342763749263, 3, 0, 0, 0.021237113402061854, -0.010618556701030927, 1.03, -0.0014653608247422677, -8, 4, -12, 0.9861443298969074)'},
]);
assertInterpolation({
property: 'transform',
from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
to: 'translate3d(4px, -12px, 8px) scaleY(2) perspective(500px)'
}, [
{at: -1, is: 'translate3d(12px, 4px, 16px) matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -0.003, 0, 0, 0, 1)'},
{at: 0, is: 'translate3d(8px, -4px, 12px) matrix3d(1, 0, 0, 0, 1.55741, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'},
{at: 0.25, is: 'translate3d(7px, -6px, 11px) matrix3d(1, 0, 0, 0, 1.46007, 1.25, 0, 0, 0, 0, 1, -0.002375, 0, 0, 0, 1)'},
{at: 0.75, is: 'translate3d(5px, -10px, 9px) matrix3d(1, 0, 0, 0, 0.681366, 1.75, 0, 0, 0, 0, 1, -0.002125, 0, 0, 0, 1)'},
{at: 1, is: 'translate3d(4px, -12px, 8px) matrix3d(1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'},
{at: 2, is: 'translate3d(0px, -20px, 4px) matrix3d(1, 0, 0, 0, -4.67222, 3, 0, 0, 0, 0, 1, -0.0015, 0, 0, 0, 1)'},
]);
assertInterpolation({
property: 'transform',
from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
to: 'translate3d(4px, -12px, 8px) skewX(2rad) scaleY(2)'
}, [
{at: -1, is: 'translate3d(12px, 4px, 16px) skewX(0rad) matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -0.005, 0, 0, 0, 1)'},
{at: 0, is: 'translate3d(8px, -4px, 12px) skewX(1rad) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'},
{at: 0.25, is: 'translate3d(7px, -6px, 11px) skewX(1.25rad) matrix3d(1, 0, 0, 0, 0, 1.25, 0, 0, 0, 0, 1, -0.001875, 0, 0, 0, 1)'},
{at: 0.75, is: 'translate3d(5px, -10px, 9px) skewX(1.75rad) matrix3d(1, 0, 0, 0, 0, 1.75, 0, 0, 0, 0, 1, -0.000625, 0, 0, 0, 1)'},
{at: 1, is: 'translate3d(4px, -12px, 8px) skewX(2rad) matrix(1, 0, 0, 2, 0, 0)'},
{at: 2, is: 'translate3d(0px, -20px, 4px) skewX(3rad) matrix3d(1, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0.0025, 0, 0, 0, 1)'},
]);
assertInterpolation({
property: 'transform',
from: 'translate3D(100px, 200px, 300px)',
to: 'none'
}, [
{at: -1, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 400, 600, 1)'},
{at: 0, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 200, 300, 1)'},
{at: 0.25, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 75, 150, 225, 1)'},
{at: 0.75, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25, 50, 75, 1)'},
{at: 1, is: 'matrix(1, 0, 0, 1, 0, 0) '},
{at: 2, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -100, -200, -300, 1)'},
]);
</script>
</body>
third_party/blink/web_tests/animations/interpolation/transform-interpolation-005.html deleted 100644 → 0
View file @ f650c36c
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
// Matrix transforms:
// 2D matrix transforms:
//
// [m11 m21 0 m41] [1 0 0 Tx] [cos(R) -sin(R) 0 0] [1 K 0 0] [Sx 0 0 0]
// [m12 m22 0 m42] = [0 1 0 Ty] [sin(R) cos(R) 0 0] [0 1 0 0] [0 Sy 0 0]
// [ 0 0 1 0 ] [0 0 1 0 ] [ 0 0 1 0] [0 0 1 0] [0 0 1 0]
// [ 0 0 0 1 ] [0 0 0 1 ] [ 0 0 0 1] [0 0 0 1] [0 0 0 1]
//
// M = translate * rotate * skew * scale
// See also webkit-transform-interpolation-005.html
//
const cos30 = Math.cos(Math.PI / 6);
const sin30 = Math.sin(Math.PI / 6);
const cos45 = Math.cos(Math.PI / 4);
const sin45 = Math.sin(Math.PI / 4);
const cos60 = Math.cos(Math.PI / 3);
const sin60 = Math.sin(Math.PI / 3);
// translateY(-6px) -> translateX(6px) rotate(90deg) scaleX(7)
assertInterpolation({
property: 'transform',
from: 'matrix(1, 0, 0, 1, 0, -6)',
to: 'matrix(0, 7, -1, 0, 6, 0)'
}, [
{at: -1, is: 'matrix(0, 5, 1, 0, -6, -12)'},
{at: 0, is: 'matrix(1, 0, 0, 1, 0, -6)'},
{
at: 1/3,
is: `matrix(${3 * cos30}, ${3 * sin30}, -${sin30}, ${cos30}, 2, -4)`
},
{
at: 0.5,
is: `matrix(${4 * cos45}, ${4 * sin45}, -${sin45}, ${cos45}, 3, -3)`
},
{
at: 2/3,
is: `matrix(${5 * cos60}, ${5 * sin60}, -${sin60}, ${cos60}, 4, -2)`
},
{at: 1, is: 'matrix(0, 7, -1, 0, 6, 0)'},
{at: 2, is: 'matrix(-13, 0, 0, -1, 12, 6)'}
]);
// translateX(6px) rotate(90deg) scaleX(7) -> translateY(-6px)
assertInterpolation({
property: 'transform',
from: 'matrix(0, 7, -1, 0, 6, 0)',
to: 'matrix(1, 0, 0, 1, 0, -6)',
}, [
{at: -1, is: 'matrix(-13, 0, 0, -1, 12, 6)'},
{at: 0, is: 'matrix(0, 7, -1, 0, 6, 0)'},
{
at: 1/3,
is: `matrix(${5 * cos60}, ${5 * sin60}, -${sin60}, ${cos60}, 4, -2)`
},
{
at: 0.5,
is: `matrix(${4 * cos45}, ${4 * sin45}, -${sin45}, ${cos45}, 3, -3)`
},
{
at: 2/3,
is: `matrix(${3 * cos30}, ${3 * sin30}, -${sin30}, ${cos30}, 2, -4)`
},
{at: 1, is: 'matrix(1, 0, 0, 1, 0, -6)'},
{at: 2, is: 'matrix(0, 5, 1, 0, -6, -12)'}
]);
// scaleY(7) -> skewX(45deg) scaleX(7)
assertInterpolation({
property: 'transform',
from: 'matrix(1, 0, 0, 7, 0, 0)',
to: 'matrix(7, 0, 1, 1, 0, 0)'
}, [
{at: -1, is: 'matrix(-5, 0, -13, 13, 0, 0)'},
{at: 0, is: 'matrix(1, 0, 0, 7, 0, 0)'},
{at: 1/3, is: 'matrix(3, 0, 1.6667, 5, 0, 0)'},
{at: 0.5, is: 'matrix(4, 0, 2, 4, 0, 0)'},
{at: 2/3, is: 'matrix(5, 0, 2, 3, 0, 0)'},
{at: 1, is: `matrix(7, 0, 1, 1, 0, 0)`},
{at: 2, is: `matrix(13, 0, -10, -5, 0, 0)`}
]);
// 3-D matrix transforms.
// TODO(kevers): Revisit 3D transform examples. It is difficult to infer
// the quality of the matrix decompositions from the expected output.
assertInterpolation({
property: 'transform',
from: 'none',
to: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'
}, [
{at: -1, is: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'},
{at: 0, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
{at: 0.25, is: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'},
{at: 0.75, is: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'},
{at: 1, is: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'},
{at: 2, is: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'},
]);
assertInterpolation({
property: 'transform',
from: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)',
to: 'none'
}, [
{at: -1, is: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'},
{at: 0, is: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'},
{at: 0.25, is: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'},
{at: 0.75, is: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'},
{at: 1, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
{at: 2, is: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'},
]);
assertInterpolation({
property: 'transform',
from: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)',
to: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)'
}, [
{at: -1, is: 'matrix3d(1.9877532948000005, 0.0, 0.0, 0.0, 0.0, 2.7492749567000003, 0.0, 0.0, 0.0, 0.0, 2.5165290423999997, 0.0, 20.2343946258, 21.1087405532, 21.371164870599998, 1.0)'},
{at: 0, is: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)'},
{at: 0.25, is: 'matrix3d(2.441256919175, 0.0, 0.0, 0.0, 0.0, 2.571299218825, 0.0, 0.0, 0.0, 0.0, 2.6947530634, 0.0, 20.35889062555, 20.561444082325, 20.800684839349998, 1.0)'},
{at: 0.75, is: 'matrix3d(2.622658368925, 0.0, 0.0, 0.0, 0.0, 2.500108923675, 0.0, 0.0, 0.0, 0.0, 2.7660426718, 0.0, 20.408689025450002, 20.342525493975, 20.572492826850002, 1.0)'},
{at: 1, is: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)'},
{at: 2, is: 'matrix3d(3.0761619932999995, 0.0, 0.0, 0.0, 0.0, 2.3221331858, 0.0, 0.0, 0.0, 0.0, 2.9442666928000003, 0.0, 20.5331850252, 19.7952290231, 20.002012795600002, 1.0)'},
]);
assertInterpolation({
property: 'transform',
from: 'none',
to: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'
}, [
{at: -1, is: 'matrix3d(-0.0000000000000002377810622383943, -1.0671050586638147, -0.08972656766237302, 1.3740432449326199, 0.98484601036295, -2.653201092395309, 0.6753819540610847, 3.6127240080250744, -2.7988839807429846, -1.2090004194153336, -0.5183744226115445, -0.7936088631686278, 1.1875, 0.0625, -1.3125, 5.340768914473683)'},
{at: 0, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
{at: 0.25, is: 'matrix3d(0.9041890962319094, 0.3522701519297133, -0.15240204298176957, -0.1428256720529315, -0.7579798772527586, 0.6803606288839232, -0.05133336076757235, 0.37904689530895724, -0.1957679784745485, 0.38554138029509327, 0.8226186974340638, 0.3370288143441876, -0.296875, -0.015625, 0.328125, 0.5930529142680923)'},
{at: 0.75, is: 'matrix3d(0.35007413226026135, 0.7254385504141292, -0.4977009150941454, 0.09582061929004702, -1.1027525038949482, -0.5884810398827429, 0.4516829688651701, 0.5447944343861767, -0.68717798815684, 0.2657772247405681, 0.5465690479810023, 1.0836207863885503, -0.890625, -0.046875, 0.984375, 0.5930529142680927)'},
{at: 1, is: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'},
{at: 2, is: 'matrix3d(-0.5844534449366048, -0.42278005999296053, -0.4650580659922564, -0.6817595809063256, 0.9156938760088464, 0.3851647027225889, 0.9244443507516923, 0.7218225020358241, -0.0803568793574344, 0.1719974850210706, -0.49676609633513097, -0.25968177786904373, -2.375, -0.125, 2.625, 5.340768914473685)'},
]);
assertInterpolation({
property: 'transform',
from: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)',
to: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'
}, [
{at: -1, is: 'matrix3d(-0.6299594065765657, -0.10825090106268696, -0.20133311671001855, 5.485724217214554, 6.358051978686152, 0.16496896269344588, 1.5760051143537075, -54.21568355620423, 0.7106057459805782, -1.1596356050622005, -0.11495342545397585, -4.913752963990824, -1.03125, -1.125, 3.5625, -5.901513951904114)'},
{at: 0, is: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'},
{at: 0.25, is: 'matrix3d(0.33652832679595723, 0.55254445148386, -0.7544724447833296, 0.22700224951774267, -0.69720168363685, -0.036373245768780864, 0.28149188169180933, -0.2845156818045006, -0.24737156018941048, 0.31207160370190334, 0.4564821058052897, 0.9220853089096839, -1.2265625, 0.203125, 0.75, 1.647016932991011)'},
{at: 0.75, is: 'matrix3d(0.6861191524977764, -0.18025672746204927, -0.8710297237546482, 0.6072134247444672, 0.2819931018922366, 0.27778974607679663, -0.6540128246146626, 0.5063632314069845, 0.5509562084361049, -0.3215202993119732, 0.5459062603735321, 2.8697154005492105, -1.3046875, 0.734375, -0.375, 1.6470169329910096)'},
{at: 1, is: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'},
{at: 2, is: 'matrix3d(-1.1789992641434441, -0.7109729379601547, -0.4455746537954199, -21.703089533128907, -0.11137581475421703, -0.08822983871000473, -0.05695380894007451, -2.22667264132605, -3.1443917136741506, 1.8952588096345078, 2.426615889772007, -21.697523130750138, -1.5, 2.0625, -3.1875, -5.901513951904121)'},
]);
assertInterpolation({
property: 'transform',
from: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)',
to: 'none'
}, [
{at: -1, is: 'matrix3d(-0.6413028394192518, -1.0702420910513302, -0.5807595966791961, -18.02447171345163, 0.8211815704840004, 1.0980679097347057, 0.9399408862655454, 22.460730852026064, 0.28421009261178104, -0.5408346238741739, 0.5194791363698213, 3.075163035391172, -2.6875, 2, -1.875, -14.881239394516232)'},
{at: 0, is: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'},
{at: 0.25, is: 'matrix3d(0.7912976716694541, -0.4517927901159618, -0.6868745974719376, 1.2522201536338506, 0.7952183069582651, 0.06340410955800829, -0.7956629784232128, 2.2561737435012983, 0.345639443327071, -0.8934490945546473, 0.830131443385676, 1.2606901484983566, -1.0078125, 0.75, -0.703125, 2.4888661932358946)'},
{at: 0.75, is: 'matrix3d(1.0093457700315165, -0.12746048375025829, -0.24746788943106088, 1.3202120308857304, 0.6128364656690982, 0.7600694601651116, -0.22233359857303325, 1.4081483224940277, 0.21669805381113447, -0.3786082265932788, 0.908354523914928, 0.6747509193960347, -0.3359375, 0.25, -0.234375, 2.4888661932358964)'},
{at: 1, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
{at: 2, is: 'matrix3d(0.39048513570444376, 0.14780794797065988, 0.6963068100217401, -4.857907861239344, -2.967682789284791, 0.6004978769584385, -3.5472376016872444, 26.675324787979896, -2.5953724498995308, 1.6280843851961373, 0.8163834310586356, 9.001735256585825, 1.34375, -1, 0.9375, -14.881239394516227)'},
]);
// Mismatched interpolation with an empty list should not use decomposition.
assertInterpolation({
property: 'transform',
from: 'none',
to: 'rotate(180deg)'
}, [
{at: -1, is: 'rotate(-180deg)'},
{at: 0, is: 'rotate(0deg)'},
{at: 0.25, is: 'rotate(45deg)'},
{at: 0.75, is: 'rotate(135deg)'},
{at: 1, is: 'rotate(180deg)'},
{at: 2, is: 'rotate(360deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'rotate(180deg)',
to: 'none'
}, [
{at: -1, is: 'rotate(360deg)'},
{at: 0, is: 'rotate(180deg)'},
{at: 0.25, is: 'rotate(135deg)'},
{at: 0.75, is: 'rotate(45deg)'},
{at: 1, is: 'rotate(0deg)'},
{at: 2, is: 'rotate(-180deg)'},
]);
assertInterpolation({
property: 'transform',
from: 'none',
to: 'rotate(360deg)'
}, [
{at: -1, is: 'rotate(-360deg)'},
{at: 0, is: 'rotate(0deg)'},
{at: 0.25, is: 'rotate(90deg)'},
{at: 0.75, is: 'rotate(270deg)'},
{at: 1, is: 'rotate(360deg)'},
{at: 2, is: 'rotate(720deg)'},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-001-expected.txt 0 → 100644
View file @ 72c5f480
This is a testharness.js-based test.
Found 408 tests; 400 PASS, 8 FAIL, 0 TIMEOUT, 0 NOTRUN.
PASS CSS Transitions: property <transform> from [perspective(400px)] to [perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [perspective(400px)] to [perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [perspective(400px)] to [perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00235294, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [perspective(400px)] to [perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00210526, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [perspective(400px)] to [perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [perspective(400px)] to [perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [perspective(400px)] to [perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [perspective(400px)] to [perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [perspective(400px)] to [perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00235294, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [perspective(400px)] to [perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00210526, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [perspective(400px)] to [perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [perspective(400px)] to [perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00235294, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00210526, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00235294, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00210526, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [perspective(400px)] to [perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0.648361, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, -0.0664682, 1, 0, 0, 0, 0, 1, -0.00235294, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, -4.44598, 1, 0, 0, 0, 0, 1, -0.00210526, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 2.23716, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, -6.40533, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0.648361, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, -0.0664682, 1, 0, 0, 0, 0, 1, -0.00235294, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, -4.44598, 1, 0, 0, 0, 0, 1, -0.00210526, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 2.23716, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, -6.40533, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0.648361, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, -0.0664682, 1, 0, 0, 0, 0, 1, -0.00235294, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, -4.44598, 1, 0, 0, 0, 0, 1, -0.00210526, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 2.23716, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, -6.40533, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0.648361, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, -0.0664682, 1, 0, 0, 0, 0, 1, -0.00235294, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, -4.44598, 1, 0, 0, 0, 0, 1, -0.00210526, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 2.23716, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [skewX(10rad) perspective(400px)] to [skewX(20rad) perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, -6.40533, 1, 0, 0, 0, 0, 1, -0.00166667, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, -0.00333333, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.25, -0.00235294, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.75, -0.00210526, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, -0.002, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 3, -0.00166667, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, -0.00333333, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.25, -0.00235294, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.75, -0.00210526, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, -0.002, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 3, -0.00166667, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, -0.00333333, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.25, -0.00235294, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.75, -0.00210526, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, -0.002, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 3, -0.00166667, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, -0.00333333, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.25, -0.00235294, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.75, -0.00210526, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, -0.002, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [scaleZ(1) perspective(400px)] to [scaleZ(2) perspective(500px)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 3, -0.00166667, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (-1) should be [matrix(-1.83697e-16, 1, -1, -1.83697e-16, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0) should be [matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0.25) should be [matrix(-0.258819, 0.965926, -0.965926, -0.258819, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0.75) should be [matrix(-0.258819, -0.965926, 0.965926, -0.258819, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (1) should be [matrix(0.866025, -0.5, 0.5, 0.866025, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (2) should be [matrix(-4.28626e-16, -1, 1, -4.28626e-16, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (-1) should be [matrix(-1.83697e-16, 1, -1, -1.83697e-16, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0) should be [matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0.25) should be [matrix(-0.258819, 0.965926, -0.965926, -0.258819, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0.75) should be [matrix(-0.258819, -0.965926, 0.965926, -0.258819, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (1) should be [matrix(0.866025, -0.5, 0.5, 0.866025, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (2) should be [matrix(-4.28626e-16, -1, 1, -4.28626e-16, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (-1) should be [matrix(-1.83697e-16, 1, -1, -1.83697e-16, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0) should be [matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0.25) should be [matrix(-0.258819, 0.965926, -0.965926, -0.258819, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0.75) should be [matrix(-0.258819, -0.965926, 0.965926, -0.258819, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (1) should be [matrix(0.866025, -0.5, 0.5, 0.866025, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (2) should be [matrix(-4.28626e-16, -1, 1, -4.28626e-16, 0, 0)]
PASS Web Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (-1) should be [matrix(-1.83697e-16, 1, -1, -1.83697e-16, 0, 0)]
PASS Web Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0) should be [matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)]
PASS Web Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0.25) should be [matrix(-0.258819, 0.965926, -0.965926, -0.258819, 0, 0)]
PASS Web Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (0.75) should be [matrix(-0.258819, -0.965926, 0.965926, -0.258819, 0, 0)]
PASS Web Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (1) should be [matrix(0.866025, -0.5, 0.5, 0.866025, 0, 0)]
PASS Web Animations: property <transform> from [rotate(30deg)] to [rotate(330deg)] at (2) should be [matrix(-4.28626e-16, -1, 1, -4.28626e-16, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, -0.996195, 0.0871557, 0, 0, -0.0871557, -0.996195, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, -0.965926, 0.258819, 0, 0, -0.258819, -0.965926, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 0.939693, -0.34202, 0, 0, 0.34202, 0.939693, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 0.766044, -0.642788, 0, 0, 0.642788, 0.766044, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, -0.996195, 0.0871557, 0, 0, -0.0871557, -0.996195, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, -0.965926, 0.258819, 0, 0, -0.258819, -0.965926, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 0.939693, -0.34202, 0, 0, 0.34202, 0.939693, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 0.766044, -0.642788, 0, 0, 0.642788, 0.766044, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, -0.996195, 0.0871557, 0, 0, -0.0871557, -0.996195, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, -0.965926, 0.258819, 0, 0, -0.258819, -0.965926, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 0.939693, -0.34202, 0, 0, 0.34202, 0.939693, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 0.766044, -0.642788, 0, 0, 0.642788, 0.766044, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (-1) should be [matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0.25) should be [matrix3d(1, 0, 0, 0, 0, -0.996195, 0.0871557, 0, 0, -0.0871557, -0.996195, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (0.75) should be [matrix3d(1, 0, 0, 0, 0, -0.965926, 0.258819, 0, 0, -0.258819, -0.965926, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (1) should be [matrix3d(1, 0, 0, 0, 0, 0.939693, -0.34202, 0, 0, 0.34202, 0.939693, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateX(700deg)] at (2) should be [matrix3d(1, 0, 0, 0, 0, 0.766044, -0.642788, 0, 0, 0.642788, 0.766044, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (-1) should be [matrix3d(0.173648, 0, 0.984808, 0, 0, 1, 0, 0, -0.984808, 0, 0.173648, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0.25) should be [matrix3d(-0.939693, 0, 0.34202, 0, 0, 1, 0, 0, -0.34202, 0, -0.939693, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0.75) should be [matrix3d(-0.5, 0, 0.866025, 0, 0, 1, 0, 0, -0.866025, 0, -0.5, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (1) should be [matrix3d(0.173648, 0, -0.984808, 0, 0, 1, 0, 0, 0.984808, 0, 0.173648, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (2) should be [matrix3d(-0.939693, 0, -0.34202, 0, 0, 1, 0, 0, 0.34202, 0, -0.939693, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (-1) should be [matrix3d(0.173648, 0, 0.984808, 0, 0, 1, 0, 0, -0.984808, 0, 0.173648, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0.25) should be [matrix3d(-0.939693, 0, 0.34202, 0, 0, 1, 0, 0, -0.34202, 0, -0.939693, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0.75) should be [matrix3d(-0.5, 0, 0.866025, 0, 0, 1, 0, 0, -0.866025, 0, -0.5, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (1) should be [matrix3d(0.173648, 0, -0.984808, 0, 0, 1, 0, 0, 0.984808, 0, 0.173648, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (2) should be [matrix3d(-0.939693, 0, -0.34202, 0, 0, 1, 0, 0, 0.34202, 0, -0.939693, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (-1) should be [matrix3d(0.173648, 0, 0.984808, 0, 0, 1, 0, 0, -0.984808, 0, 0.173648, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0.25) should be [matrix3d(-0.939693, 0, 0.34202, 0, 0, 1, 0, 0, -0.34202, 0, -0.939693, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0.75) should be [matrix3d(-0.5, 0, 0.866025, 0, 0, 1, 0, 0, -0.866025, 0, -0.5, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (1) should be [matrix3d(0.173648, 0, -0.984808, 0, 0, 1, 0, 0, 0.984808, 0, 0.173648, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (2) should be [matrix3d(-0.939693, 0, -0.34202, 0, 0, 1, 0, 0, 0.34202, 0, -0.939693, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (-1) should be [matrix3d(0.173648, 0, 0.984808, 0, 0, 1, 0, 0, -0.984808, 0, 0.173648, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0.25) should be [matrix3d(-0.939693, 0, 0.34202, 0, 0, 1, 0, 0, -0.34202, 0, -0.939693, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (0.75) should be [matrix3d(-0.5, 0, 0.866025, 0, 0, 1, 0, 0, -0.866025, 0, -0.5, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (1) should be [matrix3d(0.173648, 0, -0.984808, 0, 0, 1, 0, 0, 0.984808, 0, 0.173648, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(0deg)] to [rotateY(800deg)] at (2) should be [matrix3d(-0.939693, 0, -0.34202, 0, 0, 1, 0, 0, 0.34202, 0, -0.939693, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (-1) should be [matrix(-1, -6.12323e-16, 6.12323e-16, -1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0.25) should be [matrix(-0.707107, -0.707107, 0.707107, -0.707107, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0.75) should be [matrix(0.707107, -0.707107, 0.707107, 0.707107, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (1) should be [matrix(-1, 6.12323e-16, -6.12323e-16, -1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (2) should be [matrix(1, -1.22465e-15, 1.22465e-15, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (-1) should be [matrix(-1, -6.12323e-16, 6.12323e-16, -1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0.25) should be [matrix(-0.707107, -0.707107, 0.707107, -0.707107, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0.75) should be [matrix(0.707107, -0.707107, 0.707107, 0.707107, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (1) should be [matrix(-1, 6.12323e-16, -6.12323e-16, -1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (2) should be [matrix(1, -1.22465e-15, 1.22465e-15, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (-1) should be [matrix(-1, -6.12323e-16, 6.12323e-16, -1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0.25) should be [matrix(-0.707107, -0.707107, 0.707107, -0.707107, 0, 0)]
PASS CSS Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0.75) should be [matrix(0.707107, -0.707107, 0.707107, 0.707107, 0, 0)]
PASS CSS Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (1) should be [matrix(-1, 6.12323e-16, -6.12323e-16, -1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (2) should be [matrix(1, -1.22465e-15, 1.22465e-15, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (-1) should be [matrix(-1, -6.12323e-16, 6.12323e-16, -1, 0, 0)]
PASS Web Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0.25) should be [matrix(-0.707107, -0.707107, 0.707107, -0.707107, 0, 0)]
PASS Web Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (0.75) should be [matrix(0.707107, -0.707107, 0.707107, 0.707107, 0, 0)]
PASS Web Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (1) should be [matrix(-1, 6.12323e-16, -6.12323e-16, -1, 0, 0)]
PASS Web Animations: property <transform> from [rotateZ(0deg)] to [rotateZ(900deg)] at (2) should be [matrix(1, -1.22465e-15, 1.22465e-15, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (-1) should be [matrix3d(-1, 0, 6.12323e-16, 0, 0, 1, 0, 0, -6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0.25) should be [matrix3d(-0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, -0.707107, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0.75) should be [matrix3d(0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, 0.707107, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (1) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (2) should be [matrix3d(1, 0, 1.22465e-15, 0, 0, 1, 0, 0, -1.22465e-15, 0, 1, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (-1) should be [matrix3d(-1, 0, 6.12323e-16, 0, 0, 1, 0, 0, -6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0.25) should be [matrix3d(-0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, -0.707107, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0.75) should be [matrix3d(0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, 0.707107, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (1) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (2) should be [matrix3d(1, 0, 1.22465e-15, 0, 0, 1, 0, 0, -1.22465e-15, 0, 1, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (-1) should be [matrix3d(-1, 0, 6.12323e-16, 0, 0, 1, 0, 0, -6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0.25) should be [matrix3d(-0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, -0.707107, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0.75) should be [matrix3d(0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, 0.707107, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (1) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (2) should be [matrix3d(1, 0, 1.22465e-15, 0, 0, 1, 0, 0, -1.22465e-15, 0, 1, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (-1) should be [matrix3d(-1, 0, 6.12323e-16, 0, 0, 1, 0, 0, -6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0.25) should be [matrix3d(-0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, -0.707107, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (0.75) should be [matrix3d(0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, 0.707107, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (1) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg)] to [rotateY(900deg)] at (2) should be [matrix3d(1, 0, 1.22465e-15, 0, 0, 1, 0, 0, -1.22465e-15, 0, 1, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (-1) should be [matrix3d(1, 0, 1.22465e-15, 0, 0, 1, 0, 0, -1.22465e-15, 0, 1, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0.25) should be [matrix3d(0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, 0.707107, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0.75) should be [matrix3d(-0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, -0.707107, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (1) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (2) should be [matrix3d(-1, 0, 6.12323e-16, 0, 0, 1, 0, 0, -6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (-1) should be [matrix3d(1, 0, 1.22465e-15, 0, 0, 1, 0, 0, -1.22465e-15, 0, 1, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0.25) should be [matrix3d(0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, 0.707107, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0.75) should be [matrix3d(-0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, -0.707107, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (1) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (2) should be [matrix3d(-1, 0, 6.12323e-16, 0, 0, 1, 0, 0, -6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (-1) should be [matrix3d(1, 0, 1.22465e-15, 0, 0, 1, 0, 0, -1.22465e-15, 0, 1, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0.25) should be [matrix3d(0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, 0.707107, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0.75) should be [matrix3d(-0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, -0.707107, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (1) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (2) should be [matrix3d(-1, 0, 6.12323e-16, 0, 0, 1, 0, 0, -6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (-1) should be [matrix3d(1, 0, 1.22465e-15, 0, 0, 1, 0, 0, -1.22465e-15, 0, 1, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0.25) should be [matrix3d(0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, 0.707107, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (0.75) should be [matrix3d(-0.707107, 0, 0.707107, 0, 0, 1, 0, 0, -0.707107, 0, -0.707107, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (1) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotateY(900deg)] to [rotateZ(0deg)] at (2) should be [matrix3d(-1, 0, 6.12323e-16, 0, 0, 1, 0, 0, -6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (-1) should be [matrix3d(0.626289, -0.415263, 0.659787, 0, 0.703923, 0.664948, -0.249672, 0, -0.335045, 0.620806, 0.708763, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0) should be [matrix3d(0.122789, 0.975131, -0.184507, 0, -0.297561, 0.213535, 0.930516, 0, 0.946774, -0.0593548, 0.31638, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0.25) should be [matrix3d(-0.319982, 0.925131, 0.204314, 0, 0.0944409, -0.183432, 0.978485, 0, 0.942705, 0.332393, -0.0286754, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0.75) should be [matrix3d(-0.319982, 0.0944409, 0.942705, 0, 0.925131, -0.183432, 0.332393, 0, 0.204314, 0.978485, -0.0286754, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (1) should be [matrix3d(0.122789, -0.297561, 0.946774, 0, 0.975131, 0.213535, -0.0593548, 0, -0.184507, 0.930516, 0.31638, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (2) should be [matrix3d(0.626289, 0.703923, -0.335045, 0, -0.415263, 0.664948, 0.620806, 0, 0.659787, -0.249672, 0.708763, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (-1) should be [matrix3d(0.626289, -0.415263, 0.659787, 0, 0.703923, 0.664948, -0.249672, 0, -0.335045, 0.620806, 0.708763, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0) should be [matrix3d(0.122789, 0.975131, -0.184507, 0, -0.297561, 0.213535, 0.930516, 0, 0.946774, -0.0593548, 0.31638, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0.25) should be [matrix3d(-0.319982, 0.925131, 0.204314, 0, 0.0944409, -0.183432, 0.978485, 0, 0.942705, 0.332393, -0.0286754, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0.75) should be [matrix3d(-0.319982, 0.0944409, 0.942705, 0, 0.925131, -0.183432, 0.332393, 0, 0.204314, 0.978485, -0.0286754, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (1) should be [matrix3d(0.122789, -0.297561, 0.946774, 0, 0.975131, 0.213535, -0.0593548, 0, -0.184507, 0.930516, 0.31638, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (2) should be [matrix3d(0.626289, 0.703923, -0.335045, 0, -0.415263, 0.664948, 0.620806, 0, 0.659787, -0.249672, 0.708763, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (-1) should be [matrix3d(0.626289, -0.415263, 0.659787, 0, 0.703923, 0.664948, -0.249672, 0, -0.335045, 0.620806, 0.708763, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0) should be [matrix3d(0.122789, 0.975131, -0.184507, 0, -0.297561, 0.213535, 0.930516, 0, 0.946774, -0.0593548, 0.31638, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0.25) should be [matrix3d(-0.319982, 0.925131, 0.204314, 0, 0.0944409, -0.183432, 0.978485, 0, 0.942705, 0.332393, -0.0286754, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0.75) should be [matrix3d(-0.319982, 0.0944409, 0.942705, 0, 0.925131, -0.183432, 0.332393, 0, 0.204314, 0.978485, -0.0286754, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (1) should be [matrix3d(0.122789, -0.297561, 0.946774, 0, 0.975131, 0.213535, -0.0593548, 0, -0.184507, 0.930516, 0.31638, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (2) should be [matrix3d(0.626289, 0.703923, -0.335045, 0, -0.415263, 0.664948, 0.620806, 0, 0.659787, -0.249672, 0.708763, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (-1) should be [matrix3d(0.626289, -0.415263, 0.659787, 0, 0.703923, 0.664948, -0.249672, 0, -0.335045, 0.620806, 0.708763, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0) should be [matrix3d(0.122789, 0.975131, -0.184507, 0, -0.297561, 0.213535, 0.930516, 0, 0.946774, -0.0593548, 0.31638, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0.25) should be [matrix3d(-0.319982, 0.925131, 0.204314, 0, 0.0944409, -0.183432, 0.978485, 0, 0.942705, 0.332393, -0.0286754, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (0.75) should be [matrix3d(-0.319982, 0.0944409, 0.942705, 0, 0.925131, -0.183432, 0.332393, 0, 0.204314, 0.978485, -0.0286754, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (1) should be [matrix3d(0.122789, -0.297561, 0.946774, 0, 0.975131, 0.213535, -0.0593548, 0, -0.184507, 0.930516, 0.31638, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 100deg)] to [rotate3d(7, 8, 9, 260deg)] at (2) should be [matrix3d(0.626289, 0.703923, -0.335045, 0, -0.415263, 0.664948, 0.620806, 0, 0.659787, -0.249672, 0.708763, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (-1) should be [matrix3d(0.252577, -0.357503, 0.899109, 0, 0.934822, 0.329897, -0.131437, 0, -0.249624, 0.873705, 0.417526, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0.25) should be [matrix3d(-0.033449, 0.996101, -0.0816297, 0, -0.197851, 0.0734596, 0.977476, 0, 0.979661, 0.0488461, 0.194623, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0.75) should be [matrix3d(0.943106, -0.225303, 0.24452, 0, 0.269249, 0.948991, -0.164075, 0, -0.195081, 0.220576, 0.955662, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (1) should be [matrix3d(0.252577, 0.934822, -0.249624, 0, -0.357503, 0.329897, 0.873705, 0, 0.899109, -0.131437, 0.417526, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (2) should be [matrix3d(-0.494845, 0.57732, 0.649485, 0, 0.57732, -0.340206, 0.742268, 0, 0.649485, 0.742268, -0.164948, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (-1) should be [matrix3d(0.252577, -0.357503, 0.899109, 0, 0.934822, 0.329897, -0.131437, 0, -0.249624, 0.873705, 0.417526, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0.25) should be [matrix3d(-0.033449, 0.996101, -0.0816297, 0, -0.197851, 0.0734596, 0.977476, 0, 0.979661, 0.0488461, 0.194623, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0.75) should be [matrix3d(0.943106, -0.225303, 0.24452, 0, 0.269249, 0.948991, -0.164075, 0, -0.195081, 0.220576, 0.955662, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (1) should be [matrix3d(0.252577, 0.934822, -0.249624, 0, -0.357503, 0.329897, 0.873705, 0, 0.899109, -0.131437, 0.417526, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (2) should be [matrix3d(-0.494845, 0.57732, 0.649485, 0, 0.57732, -0.340206, 0.742268, 0, 0.649485, 0.742268, -0.164948, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (-1) should be [matrix3d(0.252577, -0.357503, 0.899109, 0, 0.934822, 0.329897, -0.131437, 0, -0.249624, 0.873705, 0.417526, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0.25) should be [matrix3d(-0.033449, 0.996101, -0.0816297, 0, -0.197851, 0.0734596, 0.977476, 0, 0.979661, 0.0488461, 0.194623, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0.75) should be [matrix3d(0.943106, -0.225303, 0.24452, 0, 0.269249, 0.948991, -0.164075, 0, -0.195081, 0.220576, 0.955662, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (1) should be [matrix3d(0.252577, 0.934822, -0.249624, 0, -0.357503, 0.329897, 0.873705, 0, 0.899109, -0.131437, 0.417526, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (2) should be [matrix3d(-0.494845, 0.57732, 0.649485, 0, 0.57732, -0.340206, 0.742268, 0, 0.649485, 0.742268, -0.164948, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (-1) should be [matrix3d(0.252577, -0.357503, 0.899109, 0, 0.934822, 0.329897, -0.131437, 0, -0.249624, 0.873705, 0.417526, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0.25) should be [matrix3d(-0.033449, 0.996101, -0.0816297, 0, -0.197851, 0.0734596, 0.977476, 0, 0.979661, 0.0488461, 0.194623, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (0.75) should be [matrix3d(0.943106, -0.225303, 0.24452, 0, 0.269249, 0.948991, -0.164075, 0, -0.195081, 0.220576, 0.955662, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (1) should be [matrix3d(0.252577, 0.934822, -0.249624, 0, -0.357503, 0.329897, 0.873705, 0, 0.899109, -0.131437, 0.417526, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(7, 8, 9, 0deg)] to [rotate3d(7, 8, 9, 450deg)] at (2) should be [matrix3d(-0.494845, 0.57732, 0.649485, 0, 0.57732, -0.340206, 0.742268, 0, 0.649485, 0.742268, -0.164948, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (-1) should be [matrix3d(3.06162e-16, 0, 1, 0, 0, 1, 0, 0, -1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0.25) should be [matrix3d(-0.382683, 0, -0.92388, 0, 0, 1, 0, 0, 0.92388, 0, -0.382683, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0.75) should be [matrix3d(0.92388, 0, 0.382683, 0, 0, 1, 0, 0, -0.382683, 0, 0.92388, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (1) should be [matrix3d(3.06162e-16, 0, -1, 0, 0, 1, 0, 0, 1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (2) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (-1) should be [matrix3d(3.06162e-16, 0, 1, 0, 0, 1, 0, 0, -1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0.25) should be [matrix3d(-0.382683, 0, -0.92388, 0, 0, 1, 0, 0, 0.92388, 0, -0.382683, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0.75) should be [matrix3d(0.92388, 0, 0.382683, 0, 0, 1, 0, 0, -0.382683, 0, 0.92388, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (1) should be [matrix3d(3.06162e-16, 0, -1, 0, 0, 1, 0, 0, 1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (2) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (-1) should be [matrix3d(3.06162e-16, 0, 1, 0, 0, 1, 0, 0, -1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0.25) should be [matrix3d(-0.382683, 0, -0.92388, 0, 0, 1, 0, 0, 0.92388, 0, -0.382683, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0.75) should be [matrix3d(0.92388, 0, 0.382683, 0, 0, 1, 0, 0, -0.382683, 0, 0.92388, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (1) should be [matrix3d(3.06162e-16, 0, -1, 0, 0, 1, 0, 0, 1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (2) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (-1) should be [matrix3d(3.06162e-16, 0, 1, 0, 0, 1, 0, 0, -1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0.25) should be [matrix3d(-0.382683, 0, -0.92388, 0, 0, 1, 0, 0, 0.92388, 0, -0.382683, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (0.75) should be [matrix3d(0.92388, 0, 0.382683, 0, 0, 1, 0, 0, -0.382683, 0, 0.92388, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (1) should be [matrix3d(3.06162e-16, 0, -1, 0, 0, 1, 0, 0, 1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 1, 0, 450deg)] at (2) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (-1) should be [matrix3d(3.06162e-16, 0, 1, 0, 0, 1, 0, 0, -1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0.25) should be [matrix3d(-0.382683, 0, -0.92388, 0, 0, 1, 0, 0, 0.92388, 0, -0.382683, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0.75) should be [matrix3d(0.92388, 0, 0.382683, 0, 0, 1, 0, 0, -0.382683, 0, 0.92388, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (1) should be [matrix3d(3.06162e-16, 0, -1, 0, 0, 1, 0, 0, 1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (2) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (-1) should be [matrix3d(3.06162e-16, 0, 1, 0, 0, 1, 0, 0, -1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0.25) should be [matrix3d(-0.382683, 0, -0.92388, 0, 0, 1, 0, 0, 0.92388, 0, -0.382683, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0.75) should be [matrix3d(0.92388, 0, 0.382683, 0, 0, 1, 0, 0, -0.382683, 0, 0.92388, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (1) should be [matrix3d(3.06162e-16, 0, -1, 0, 0, 1, 0, 0, 1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (2) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (-1) should be [matrix3d(3.06162e-16, 0, 1, 0, 0, 1, 0, 0, -1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0.25) should be [matrix3d(-0.382683, 0, -0.92388, 0, 0, 1, 0, 0, 0.92388, 0, -0.382683, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0.75) should be [matrix3d(0.92388, 0, 0.382683, 0, 0, 1, 0, 0, -0.382683, 0, 0.92388, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (1) should be [matrix3d(3.06162e-16, 0, -1, 0, 0, 1, 0, 0, 1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (2) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (-1) should be [matrix3d(3.06162e-16, 0, 1, 0, 0, 1, 0, 0, -1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0.25) should be [matrix3d(-0.382683, 0, -0.92388, 0, 0, 1, 0, 0, 0.92388, 0, -0.382683, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (0.75) should be [matrix3d(0.92388, 0, 0.382683, 0, 0, 1, 0, 0, -0.382683, 0, 0.92388, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (1) should be [matrix3d(3.06162e-16, 0, -1, 0, 0, 1, 0, 0, 1, 0, 3.06162e-16, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(0, 1, 0, 0deg)] to [rotate3d(0, 2, 0, 450deg)] at (2) should be [matrix3d(-1, 0, -6.12323e-16, 0, 0, 1, 0, 0, 6.12323e-16, 0, -1, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (-1) should be [matrix3d(-0.25, -0.957107, -0.146447, 0, 0.457107, -0.25, 0.853553, 0, -0.853553, 0.146447, 0.5, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0) should be [matrix3d(0.5, 0.5, -0.707107, 0, 0.5, 0.5, 0.707107, 0, 0.707107, -0.707107, 6.12323e-17, 0, 0, 0, 0, 1)]
FAIL CSS Transitions: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0.25) should be [matrix3d(0.0636854, 0.812166, -0.579941, 0, 0.276037, 0.544112, 0.792304, 0, 0.959035, -0.210543, -0.189536, 0, 0, 0, 0, 1)] assert_equals: expected "matrix3d ( 0.06 , 0.81 , - 0.58 , 0 , 0.28 , 0.54 , 0.79 , 0 , 0.96 , - 0.21 , - 0.19 , 0 , 0 , 0 , 0 , 1 ) " but got "matrix3d ( 0.69 , - 0.34 , - 0.64 , 0 , 0.72 , 0.19 , 0.67 , 0 , - 0.1 , - 0.92 , 0.37 , 0 , 0 , 0 , 0 , 1 ) "
FAIL CSS Transitions: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0.75) should be [matrix3d(-0.848254, 0.5078, -0.150348, 0, -0.0283918, 0.239883, 0.970387, 0, 0.528828, 0.827403, -0.189064, 0, 0, 0, 0, 1)] assert_equals: expected "matrix3d ( - 0.85 , 0.51 , - 0.15 , 0 , - 0.03 , 0.24 , 0.97 , 0 , 0.53 , 0.83 , - 0.19 , 0 , 0 , 0 , 0 , 1 ) " but got "matrix3d ( - 0.63 , - 0.78 , - 0.02 , 0 , 0.28 , - 0.25 , 0.93 , 0 , - 0.73 , 0.58 , 0.37 , 0 , 0 , 0 , 0 , 1 ) "
PASS CSS Transitions: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (1) should be [matrix3d(-1, 8.65956e-17, -8.65956e-17, 0, -8.65956e-17, -2.22045e-16, 1, 0, 8.65956e-17, 1, -2.22045e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (2) should be [matrix3d(0.5, -0.707107, -0.5, 0, 0.707107, 6.12323e-17, 0.707107, 0, -0.5, -0.707107, 0.5, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (-1) should be [matrix3d(-0.25, -0.957107, -0.146447, 0, 0.457107, -0.25, 0.853553, 0, -0.853553, 0.146447, 0.5, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0) should be [matrix3d(0.5, 0.5, -0.707107, 0, 0.5, 0.5, 0.707107, 0, 0.707107, -0.707107, 6.12323e-17, 0, 0, 0, 0, 1)]
FAIL CSS Transitions with transition: all: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0.25) should be [matrix3d(0.0636854, 0.812166, -0.579941, 0, 0.276037, 0.544112, 0.792304, 0, 0.959035, -0.210543, -0.189536, 0, 0, 0, 0, 1)] assert_equals: expected "matrix3d ( 0.06 , 0.81 , - 0.58 , 0 , 0.28 , 0.54 , 0.79 , 0 , 0.96 , - 0.21 , - 0.19 , 0 , 0 , 0 , 0 , 1 ) " but got "matrix3d ( 0.69 , - 0.34 , - 0.64 , 0 , 0.72 , 0.19 , 0.67 , 0 , - 0.1 , - 0.92 , 0.37 , 0 , 0 , 0 , 0 , 1 ) "
FAIL CSS Transitions with transition: all: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0.75) should be [matrix3d(-0.848254, 0.5078, -0.150348, 0, -0.0283918, 0.239883, 0.970387, 0, 0.528828, 0.827403, -0.189064, 0, 0, 0, 0, 1)] assert_equals: expected "matrix3d ( - 0.85 , 0.51 , - 0.15 , 0 , - 0.03 , 0.24 , 0.97 , 0 , 0.53 , 0.83 , - 0.19 , 0 , 0 , 0 , 0 , 1 ) " but got "matrix3d ( - 0.63 , - 0.78 , - 0.02 , 0 , 0.28 , - 0.25 , 0.93 , 0 , - 0.73 , 0.58 , 0.37 , 0 , 0 , 0 , 0 , 1 ) "
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (1) should be [matrix3d(-1, 8.65956e-17, -8.65956e-17, 0, -8.65956e-17, -2.22045e-16, 1, 0, 8.65956e-17, 1, -2.22045e-16, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (2) should be [matrix3d(0.5, -0.707107, -0.5, 0, 0.707107, 6.12323e-17, 0.707107, 0, -0.5, -0.707107, 0.5, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (-1) should be [matrix3d(-0.25, -0.957107, -0.146447, 0, 0.457107, -0.25, 0.853553, 0, -0.853553, 0.146447, 0.5, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0) should be [matrix3d(0.5, 0.5, -0.707107, 0, 0.5, 0.5, 0.707107, 0, 0.707107, -0.707107, 6.12323e-17, 0, 0, 0, 0, 1)]
FAIL CSS Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0.25) should be [matrix3d(0.0636854, 0.812166, -0.579941, 0, 0.276037, 0.544112, 0.792304, 0, 0.959035, -0.210543, -0.189536, 0, 0, 0, 0, 1)] assert_equals: expected "matrix3d ( 0.06 , 0.81 , - 0.58 , 0 , 0.28 , 0.54 , 0.79 , 0 , 0.96 , - 0.21 , - 0.19 , 0 , 0 , 0 , 0 , 1 ) " but got "matrix3d ( 0.69 , - 0.34 , - 0.64 , 0 , 0.72 , 0.19 , 0.67 , 0 , - 0.1 , - 0.92 , 0.37 , 0 , 0 , 0 , 0 , 1 ) "
FAIL CSS Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0.75) should be [matrix3d(-0.848254, 0.5078, -0.150348, 0, -0.0283918, 0.239883, 0.970387, 0, 0.528828, 0.827403, -0.189064, 0, 0, 0, 0, 1)] assert_equals: expected "matrix3d ( - 0.85 , 0.51 , - 0.15 , 0 , - 0.03 , 0.24 , 0.97 , 0 , 0.53 , 0.83 , - 0.19 , 0 , 0 , 0 , 0 , 1 ) " but got "matrix3d ( - 0.63 , - 0.78 , - 0.02 , 0 , 0.28 , - 0.25 , 0.93 , 0 , - 0.73 , 0.58 , 0.37 , 0 , 0 , 0 , 0 , 1 ) "
PASS CSS Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (1) should be [matrix3d(-1, 8.65956e-17, -8.65956e-17, 0, -8.65956e-17, -2.22045e-16, 1, 0, 8.65956e-17, 1, -2.22045e-16, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (2) should be [matrix3d(0.5, -0.707107, -0.5, 0, 0.707107, 6.12323e-17, 0.707107, 0, -0.5, -0.707107, 0.5, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (-1) should be [matrix3d(-0.25, -0.957107, -0.146447, 0, 0.457107, -0.25, 0.853553, 0, -0.853553, 0.146447, 0.5, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0) should be [matrix3d(0.5, 0.5, -0.707107, 0, 0.5, 0.5, 0.707107, 0, 0.707107, -0.707107, 6.12323e-17, 0, 0, 0, 0, 1)]
FAIL Web Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0.25) should be [matrix3d(0.0636854, 0.812166, -0.579941, 0, 0.276037, 0.544112, 0.792304, 0, 0.959035, -0.210543, -0.189536, 0, 0, 0, 0, 1)] assert_equals: expected "matrix3d ( 0.06 , 0.81 , - 0.58 , 0 , 0.28 , 0.54 , 0.79 , 0 , 0.96 , - 0.21 , - 0.19 , 0 , 0 , 0 , 0 , 1 ) " but got "matrix3d ( 0.69 , - 0.34 , - 0.64 , 0 , 0.72 , 0.19 , 0.67 , 0 , - 0.1 , - 0.92 , 0.37 , 0 , 0 , 0 , 0 , 1 ) "
FAIL Web Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (0.75) should be [matrix3d(-0.848254, 0.5078, -0.150348, 0, -0.0283918, 0.239883, 0.970387, 0, 0.528828, 0.827403, -0.189064, 0, 0, 0, 0, 1)] assert_equals: expected "matrix3d ( - 0.85 , 0.51 , - 0.15 , 0 , - 0.03 , 0.24 , 0.97 , 0 , 0.53 , 0.83 , - 0.19 , 0 , 0 , 0 , 0 , 1 ) " but got "matrix3d ( - 0.63 , - 0.78 , - 0.02 , 0 , 0.28 , - 0.25 , 0.93 , 0 , - 0.73 , 0.58 , 0.37 , 0 , 0 , 0 , 0 , 1 ) "
PASS Web Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (1) should be [matrix3d(-1, 8.65956e-17, -8.65956e-17, 0, -8.65956e-17, -2.22045e-16, 1, 0, 8.65956e-17, 1, -2.22045e-16, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotate3d(1, 1, 0, 90deg)] to [rotate3d(0, 1, 1, 180deg)] at (2) should be [matrix3d(0.5, -0.707107, -0.5, 0, 0.707107, 6.12323e-17, 0.707107, 0, -0.5, -0.707107, 0.5, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [none] to [rotate(90deg)] at (-1) should be [matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)]
PASS CSS Transitions: property <transform> from [none] to [rotate(90deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [none] to [rotate(90deg)] at (0.25) should be [matrix(0.92388, 0.382683, -0.382683, 0.92388, 0, 0)]
PASS CSS Transitions: property <transform> from [none] to [rotate(90deg)] at (0.75) should be [matrix(0.382683, 0.92388, -0.92388, 0.382683, 0, 0)]
PASS CSS Transitions: property <transform> from [none] to [rotate(90deg)] at (1) should be [matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)]
PASS CSS Transitions: property <transform> from [none] to [rotate(90deg)] at (2) should be [matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [none] to [rotate(90deg)] at (-1) should be [matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [none] to [rotate(90deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [none] to [rotate(90deg)] at (0.25) should be [matrix(0.92388, 0.382683, -0.382683, 0.92388, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [none] to [rotate(90deg)] at (0.75) should be [matrix(0.382683, 0.92388, -0.92388, 0.382683, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [none] to [rotate(90deg)] at (1) should be [matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [none] to [rotate(90deg)] at (2) should be [matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)]
PASS CSS Animations: property <transform> from [none] to [rotate(90deg)] at (-1) should be [matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)]
PASS CSS Animations: property <transform> from [none] to [rotate(90deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [none] to [rotate(90deg)] at (0.25) should be [matrix(0.92388, 0.382683, -0.382683, 0.92388, 0, 0)]
PASS CSS Animations: property <transform> from [none] to [rotate(90deg)] at (0.75) should be [matrix(0.382683, 0.92388, -0.92388, 0.382683, 0, 0)]
PASS CSS Animations: property <transform> from [none] to [rotate(90deg)] at (1) should be [matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)]
PASS CSS Animations: property <transform> from [none] to [rotate(90deg)] at (2) should be [matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)]
PASS Web Animations: property <transform> from [none] to [rotate(90deg)] at (-1) should be [matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)]
PASS Web Animations: property <transform> from [none] to [rotate(90deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [none] to [rotate(90deg)] at (0.25) should be [matrix(0.92388, 0.382683, -0.382683, 0.92388, 0, 0)]
PASS Web Animations: property <transform> from [none] to [rotate(90deg)] at (0.75) should be [matrix(0.382683, 0.92388, -0.92388, 0.382683, 0, 0)]
PASS Web Animations: property <transform> from [none] to [rotate(90deg)] at (1) should be [matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)]
PASS Web Animations: property <transform> from [none] to [rotate(90deg)] at (2) should be [matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(90deg)] to [none] at (-1) should be [matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(90deg)] to [none] at (0) should be [matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(90deg)] to [none] at (0.25) should be [matrix(0.382683, 0.92388, -0.92388, 0.382683, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(90deg)] to [none] at (0.75) should be [matrix(0.92388, 0.382683, -0.382683, 0.92388, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(90deg)] to [none] at (1) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotate(90deg)] to [none] at (2) should be [matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(90deg)] to [none] at (-1) should be [matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(90deg)] to [none] at (0) should be [matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(90deg)] to [none] at (0.25) should be [matrix(0.382683, 0.92388, -0.92388, 0.382683, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(90deg)] to [none] at (0.75) should be [matrix(0.92388, 0.382683, -0.382683, 0.92388, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(90deg)] to [none] at (1) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotate(90deg)] to [none] at (2) should be [matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(90deg)] to [none] at (-1) should be [matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(90deg)] to [none] at (0) should be [matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(90deg)] to [none] at (0.25) should be [matrix(0.382683, 0.92388, -0.92388, 0.382683, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(90deg)] to [none] at (0.75) should be [matrix(0.92388, 0.382683, -0.382683, 0.92388, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(90deg)] to [none] at (1) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotate(90deg)] to [none] at (2) should be [matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)]
PASS Web Animations: property <transform> from [rotate(90deg)] to [none] at (-1) should be [matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)]
PASS Web Animations: property <transform> from [rotate(90deg)] to [none] at (0) should be [matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)]
PASS Web Animations: property <transform> from [rotate(90deg)] to [none] at (0.25) should be [matrix(0.382683, 0.92388, -0.92388, 0.382683, 0, 0)]
PASS Web Animations: property <transform> from [rotate(90deg)] to [none] at (0.75) should be [matrix(0.92388, 0.382683, -0.382683, 0.92388, 0, 0)]
PASS Web Animations: property <transform> from [rotate(90deg)] to [none] at (1) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotate(90deg)] to [none] at (2) should be [matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (-1) should be [matrix3d(-0.173648, 0.336824, -0.925417, 0, 1.06329e-16, -0.939693, -0.34202, 0, -0.984808, -0.0593912, 0.163176, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0.25) should be [matrix3d(0.664463, 0.725494, 0.179296, 0, -0.664463, 0.683338, -0.302553, 0, -0.34202, 0.0818996, 0.936117, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0.75) should be [matrix3d(-0.353553, 0.524519, -0.774519, 0, -0.353553, -0.841506, -0.408494, 0, -0.866025, 0.12941, 0.482963, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (1) should be [matrix3d(-0.173648, 0.336824, 0.925417, 0, -1.06329e-16, -0.939693, 0.34202, 0, 0.984808, 0.0593912, 0.163176, 0, 0, 0, 0, 1)]
PASS CSS Transitions: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (2) should be [matrix3d(-0.939693, -0.219846, -0.262003, 0, -1.15079e-15, 0.766044, -0.642788, 0, 0.34202, -0.604023, -0.719846, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (-1) should be [matrix3d(-0.173648, 0.336824, -0.925417, 0, 1.06329e-16, -0.939693, -0.34202, 0, -0.984808, -0.0593912, 0.163176, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0.25) should be [matrix3d(0.664463, 0.725494, 0.179296, 0, -0.664463, 0.683338, -0.302553, 0, -0.34202, 0.0818996, 0.936117, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0.75) should be [matrix3d(-0.353553, 0.524519, -0.774519, 0, -0.353553, -0.841506, -0.408494, 0, -0.866025, 0.12941, 0.482963, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (1) should be [matrix3d(-0.173648, 0.336824, 0.925417, 0, -1.06329e-16, -0.939693, 0.34202, 0, 0.984808, 0.0593912, 0.163176, 0, 0, 0, 0, 1)]
PASS CSS Transitions with transition: all: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (2) should be [matrix3d(-0.939693, -0.219846, -0.262003, 0, -1.15079e-15, 0.766044, -0.642788, 0, 0.34202, -0.604023, -0.719846, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (-1) should be [matrix3d(-0.173648, 0.336824, -0.925417, 0, 1.06329e-16, -0.939693, -0.34202, 0, -0.984808, -0.0593912, 0.163176, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS CSS Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0.25) should be [matrix3d(0.664463, 0.725494, 0.179296, 0, -0.664463, 0.683338, -0.302553, 0, -0.34202, 0.0818996, 0.936117, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0.75) should be [matrix3d(-0.353553, 0.524519, -0.774519, 0, -0.353553, -0.841506, -0.408494, 0, -0.866025, 0.12941, 0.482963, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (1) should be [matrix3d(-0.173648, 0.336824, 0.925417, 0, -1.06329e-16, -0.939693, 0.34202, 0, 0.984808, 0.0593912, 0.163176, 0, 0, 0, 0, 1)]
PASS CSS Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (2) should be [matrix3d(-0.939693, -0.219846, -0.262003, 0, -1.15079e-15, 0.766044, -0.642788, 0, 0.34202, -0.604023, -0.719846, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (-1) should be [matrix3d(-0.173648, 0.336824, -0.925417, 0, 1.06329e-16, -0.939693, -0.34202, 0, -0.984808, -0.0593912, 0.163176, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0) should be [matrix(1, 0, 0, 1, 0, 0)]
PASS Web Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0.25) should be [matrix3d(0.664463, 0.725494, 0.179296, 0, -0.664463, 0.683338, -0.302553, 0, -0.34202, 0.0818996, 0.936117, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (0.75) should be [matrix3d(-0.353553, 0.524519, -0.774519, 0, -0.353553, -0.841506, -0.408494, 0, -0.866025, 0.12941, 0.482963, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (1) should be [matrix3d(-0.173648, 0.336824, 0.925417, 0, -1.06329e-16, -0.939693, 0.34202, 0, 0.984808, 0.0593912, 0.163176, 0, 0, 0, 0, 1)]
PASS Web Animations: property <transform> from [rotateX(0deg) rotateY(0deg) rotateZ(0deg)] to [rotateX(700deg) rotateY(800deg) rotateZ(900deg)] at (2) should be [matrix3d(-0.939693, -0.219846, -0.262003, 0, -1.15079e-15, 0.766044, -0.642788, 0, 0.34202, -0.604023, -0.719846, 0, 0, 0, 0, 1)]
Harness: the test ran to completion.
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-001.html 0 → 100644
View file @ 72c5f480
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
<meta name="assert" content="transform supports animation as a transform list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
</body>
<script>
// Perspective
test_interpolation({
property: 'transform',
from: 'perspective(400px)',
to: 'perspective(500px)'
}, [
{at: -1, expect: 'perspective(300px)'},
{at: 0, expect: 'perspective(400px)'},
{at: 0.25, expect: 'perspective(425px)'},
{at: 0.75, expect: 'perspective(475px)'},
{at: 1, expect: 'perspective(500px)'},
{at: 2, expect: 'perspective(600px)'},
]);
test_interpolation({
property: 'transform',
from: 'skewX(10rad) perspective(400px)',
to: 'skewX(20rad) perspective(500px)'
}, [
{at: -1, expect: 'skewX(0rad) perspective(300px)'},
{at: 0, expect: 'skewX(10rad) perspective(400px)'},
{at: 0.25, expect: 'skewX(12.5rad) perspective(425px)'},
{at: 0.75, expect: 'skewX(17.5rad) perspective(475px)'},
{at: 1, expect: 'skewX(20rad) perspective(500px)'},
{at: 2, expect: 'skewX(30rad) perspective(600px)'},
]);
test_interpolation({
property: 'transform',
from: 'scaleZ(1) perspective(400px)',
to: 'scaleZ(2) perspective(500px)'
}, [
{at: -1, expect: 'scaleZ(0) perspective(300px)'},
{at: 0, expect: 'scaleZ(1) perspective(400px)'},
{at: 0.25, expect: 'scaleZ(1.25) perspective(425px)'},
{at: 0.75, expect: 'scaleZ(1.75) perspective(475px)'},
{at: 1, expect: 'scaleZ(2) perspective(500px)'},
{at: 2, expect: 'scaleZ(3) perspective(600px)'},
]);
// Rotate
test_interpolation({
property: 'transform',
from: 'rotate(30deg)',
to: 'rotate(330deg)'
}, [
{at: -1, expect: 'rotate(-270deg)'},
{at: 0, expect: 'rotate(30deg)'},
{at: 0.25, expect: 'rotate(105deg)'},
{at: 0.75, expect: 'rotate(255deg)'},
{at: 1, expect: 'rotate(330deg)'},
{at: 2, expect: 'rotate(630deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotateX(0deg)',
to: 'rotateX(700deg)'
}, [
{at: -1, expect: 'rotateX(-700deg)'},
{at: 0, expect: 'rotateX(0deg)'},
{at: 0.25, expect: 'rotateX(175deg)'},
{at: 0.75, expect: 'rotateX(525deg)'},
{at: 1, expect: 'rotateX(700deg)'},
{at: 2, expect: 'rotateX(1400deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotateY(0deg)',
to: 'rotateY(800deg)'
}, [
{at: -1, expect: 'rotateY(-800deg)'},
{at: 0, expect: 'rotateY(0deg)'},
{at: 0.25, expect: 'rotateY(200deg)'},
{at: 0.75, expect: 'rotateY(600deg)'},
{at: 1, expect: 'rotateY(800deg)'},
{at: 2, expect: 'rotateY(1600deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotateZ(0deg)',
to: 'rotateZ(900deg)'
}, [
{at: -1, expect: 'rotateZ(-900deg)'},
{at: 0, expect: 'rotateZ(0deg)'},
{at: 0.25, expect: 'rotateZ(225deg)'},
{at: 0.75, expect: 'rotateZ(675deg)'},
{at: 1, expect: 'rotateZ(900deg)'},
{at: 2, expect: 'rotateZ(1800deg)'},
]);
// Interpolation is about a common axis if either endpoint has a rotation angle
// of zero.
test_interpolation({
property: 'transform',
from: 'rotateX(0deg)',
to: 'rotateY(900deg)'
}, [
{at: -1, expect: 'rotateY(-900deg)'},
{at: 0, expect: 'rotateY(0deg)'},
{at: 0.25, expect: 'rotateY(225deg)'},
{at: 0.75, expect: 'rotateY(675deg)'},
{at: 1, expect: 'rotateY(900deg)'},
{at: 2, expect: 'rotateY(1800deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotateY(900deg)',
to: 'rotateZ(0deg)'
}, [
{at: -1, expect: 'rotateY(1800deg)'},
{at: 0, expect: 'rotateY(900deg)'},
{at: 0.25, expect: 'rotateY(675deg)'},
{at: 0.75, expect: 'rotateY(225deg)'},
{at: 1, expect: 'rotateY(0deg)'},
{at: 2, expect: 'rotateY(-900deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotate3d(7, 8, 9, 100deg)',
to: 'rotate3d(7, 8, 9, 260deg)'
}, [
{at: -1, expect: 'rotate3d(7, 8, 9, -60deg)'},
{at: 0, expect: 'rotate3d(7, 8, 9, 100deg)'},
{at: 0.25, expect: 'rotate3d(7, 8, 9, 140deg)'},
{at: 0.75, expect: 'rotate3d(7, 8, 9, 220deg)'},
{at: 1, expect: 'rotate3d(7, 8, 9, 260deg)'},
{at: 2, expect: 'rotate3d(7, 8, 9, 420deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotate3d(7, 8, 9, 0deg)',
to: 'rotate3d(7, 8, 9, 450deg)'
}, [
{at: -1, expect: 'rotate3d(7, 8, 9, -450deg)'},
{at: 0, expect: 'rotate3d(7, 8, 9, 0deg)'},
{at: 0.25, expect: 'rotate3d(7, 8, 9, 112.5deg)'},
{at: 0.75, expect: 'rotate3d(7, 8, 9, 337.5deg)'},
{at: 1, expect: 'rotate3d(7, 8, 9, 450deg)'},
{at: 2, expect: 'rotate3d(7, 8, 9, 900deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotate3d(0, 1, 0, 0deg)',
to: 'rotate3d(0, 1, 0, 450deg)'
}, [
{at: -1, expect: 'rotate3d(0, 1, 0, -450deg)'},
{at: 0, expect: 'rotate3d(0, 1, 0, 0deg)'},
{at: 0.25, expect: 'rotate3d(0, 1, 0, 112.5deg)'},
{at: 0.75, expect: 'rotate3d(0, 1, 0, 337.5deg)'},
{at: 1, expect: 'rotate3d(0, 1, 0, 450deg)'},
{at: 2, expect: 'rotate3d(0, 1, 0, 900deg)'},
]);
// Rotation is about a common axis if the axes are colinear.
test_interpolation({
property: 'transform',
from: 'rotate3d(0, 1, 0, 0deg)',
to: 'rotate3d(0, 2, 0, 450deg)'
}, [
{at: -1, expect: 'rotate3d(0, 1, 0, -450deg)'},
{at: 0, expect: 'rotate3d(0, 1, 0, 0deg)'},
{at: 0.25, expect: 'rotate3d(0, 1, 0, 112.5deg)'},
{at: 0.75, expect: 'rotate3d(0, 1, 0, 337.5deg)'},
{at: 1, expect: 'rotate3d(0, 1, 0, 450deg)'},
{at: 2, expect: 'rotate3d(0, 1, 0, 900deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotate3d(1, 1, 0, 90deg)',
to: 'rotate3d(0, 1, 1, 180deg)'
}, [
{at: -1, expect: 'rotate3d(0.41, -0.41, -0.82, 120deg)'},
{at: 0, expect: 'rotate3d(1, 1, 0, 90deg)'},
{at: 0.25, expect: 'rotate3d(0.524083, 0.804261, 0.280178, 106.91deg)'},
{at: 0.75, expect: 'rotate3d(0.163027, 0.774382, 0.611354, 153.99deg)'},
{at: 1, expect: 'rotate3d(0, 1, 1, 180deg)'},
{at: 2, expect: 'rotate3d(0.71, 0, -0.71, 90deg)'},
]);
test_interpolation({
property: 'transform',
from: 'none',
to: 'rotate(90deg)'
}, [
{at: -1, expect: 'rotate(-90deg)'},
{at: 0, expect: 'rotate(0deg)'},
{at: 0.25, expect: 'rotate(22.5deg)'},
{at: 0.75, expect: 'rotate(67.5deg)'},
{at: 1, expect: 'rotate(90deg)'},
{at: 2, expect: 'rotate(180deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotate(90deg)',
to: 'none'
}, [
{at: -1, expect: 'rotate(180deg)'},
{at: 0, expect: 'rotate(90deg)'},
{at: 0.25, expect: 'rotate(67.5deg)'},
{at: 0.75, expect: 'rotate(22.5deg)'},
{at: 1, expect: 'rotate(0deg)'},
{at: 2, expect: 'rotate(-90deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
to: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'
}, [
{at: -1, expect: 'rotateX(-700deg) rotateY(-800deg) rotateZ(-900deg)'},
{at: 0, expect: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'},
{at: 0.25, expect: 'rotateX(175deg) rotateY(200deg) rotateZ(225deg)'},
{at: 0.75, expect: 'rotateX(525deg) rotateY(600deg) rotateZ(675deg)'},
{at: 1, expect: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'},
{at: 2, expect: 'rotateX(1400deg) rotateY(1600deg) rotateZ(1800deg)'},
]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-002.html 0 → 100644
View file @ 72c5f480
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
<meta name="assert" content="transform supports animation as a transform list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
</body>
<script>
// Scale
test_interpolation({
property: 'transform',
from: 'scale(10, 5)',
to: 'scale(20, 9)'
}, [
{at: -1, expect: 'scale(0, 1)'},
{at: 0, expect: 'scale(10, 5)'},
{at: 0.25, expect: 'scale(12.5, 6)'},
{at: 0.75, expect: 'scale(17.5, 8)'},
{at: 1, expect: 'scale(20, 9)'},
{at: 2, expect: 'scale(30, 13)'},
]);
test_interpolation({
property: 'transform',
from: 'scaleX(10)',
to: 'scaleX(20)'
}, [
{at: -1, expect: 'scaleX(0)'},
{at: 0, expect: 'scaleX(10)'},
{at: 0.25, expect: 'scaleX(12.5)'},
{at: 0.75, expect: 'scaleX(17.5)'},
{at: 1, expect: 'scaleX(20)'},
{at: 2, expect: 'scaleX(30)'},
]);
test_interpolation({
property: 'transform',
from: 'scaleY(5)',
to: 'scaleY(9)'
}, [
{at: -1, expect: 'scaleY(1)'},
{at: 0, expect: 'scaleY(5)'},
{at: 0.25, expect: 'scaleY(6)'},
{at: 0.75, expect: 'scaleY(8)'},
{at: 1, expect: 'scaleY(9)'},
{at: 2, expect: 'scaleY(13)'},
]);
test_interpolation({
property: 'transform',
from: 'scaleZ(1)',
to: 'scaleZ(2)'
}, [
{at: -1, expect: 'scaleZ(0)'},
{at: 0, expect: 'scaleZ(1)'},
{at: 0.25, expect: 'scaleZ(1.25)'},
{at: 0.75, expect: 'scaleZ(1.75)'},
{at: 1, expect: 'scaleZ(2)'},
{at: 2, expect: 'scaleZ(3)'},
]);
test_interpolation({
property: 'transform',
from: 'scale3d(10, 0.5, 1)',
to: 'scale3d(20, 1, 2)'
}, [
{at: -1, expect: 'scale3d(0, 0, 0)'},
{at: 0, expect: 'scale3d(10, 0.5, 1)'},
{at: 0.25, expect: 'scale3d(12.5, 0.625, 1.25)'},
{at: 0.75, expect: 'scale3d(17.5, 0.875, 1.75)'},
{at: 1, expect: 'scale3d(20, 1, 2)'},
{at: 2, expect: 'scale3d(30, 1.5, 3)'},
]);
test_interpolation({
property: 'transform',
from: 'scaleX(0)',
to: 'scaleY(0)',
}, [
{at: -1, expect: 'scale(-1, 2)'},
{at: 0, expect: 'scale(0, 1)'},
{at: 0.25, expect: 'scale(0.25, 0.75)'},
{at: 0.75, expect: 'scale(0.75, 0.25)'},
{at: 1, expect: 'scale(1, 0)'},
{at: 2, expect: 'scale(2, -1)'},
]);
test_interpolation({
property: 'transform',
from: 'none',
to: 'scale3d(2, 3, 5)'
}, [
{at: -1, expect: 'scale3d(0, -1, -3)'},
{at: 0, expect: 'scale3d(1, 1, 1)'},
{at: 0.25, expect: 'scale3d(1.25, 1.5, 2)'},
{at: 0.75, expect: 'scale3d(1.75, 2.5, 4)'},
{at: 1, expect: 'scale3d(2, 3, 5)'},
{at: 2, expect: 'scale3d(3, 5, 9)'},
]);
test_interpolation({
property: 'transform',
from: 'scale3d(2, 3, 5)',
to: 'none'
}, [
{at: -1, expect: 'scale3d(3, 5, 9)'},
{at: 0, expect: 'scale3d(2, 3, 5)'},
{at: 0.25, expect: 'scale3d(1.75, 2.5, 4)'},
{at: 0.75, expect: 'scale3d(1.25, 1.5, 2)'},
{at: 1, expect: 'scale3d(1, 1, 1)'},
{at: 2, expect: 'scale3d(0, -1, -3)'},
]);
test_interpolation({
property: 'transform',
from: 'scaleX(10) scaleY(0.5) scaleZ(1)',
to: 'scaleX(20) scaleY(1) scaleZ(2)'
}, [
{at: -1, expect: 'scaleX(0) scaleY(0) scaleZ(0)'},
{at: 0, expect: 'scaleX(10) scaleY(0.5) scaleZ(1)'},
{at: 0.25, expect: 'scaleX(12.5) scaleY(0.625) scaleZ(1.25)'},
{at: 0.75, expect: 'scaleX(17.5) scaleY(0.875) scaleZ(1.75)'},
{at: 1, expect: 'scaleX(20) scaleY(1) scaleZ(2)'},
{at: 2, expect: 'scaleX(30) scaleY(1.5) scaleZ(3)'},
]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-003.html 0 → 100644
View file @ 72c5f480
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
<meta name="assert" content="transform supports animation as a transform list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
</body>
<script>
test_interpolation({
property: 'transform',
from: 'skewX(10rad) scaleZ(1)',
to: 'skewX(20rad) scaleZ(2)'
}, [
{at: -1, expect: 'skewX(0rad) scaleZ(0)'},
{at: 0, expect: 'skewX(10rad) scaleZ(1)'},
{at: 0.25, expect: 'skewX(12.5rad) scaleZ(1.25)'},
{at: 0.75, expect: 'skewX(17.5rad) scaleZ(1.75)'},
{at: 1, expect: 'skewX(20rad) scaleZ(2)'},
{at: 2, expect: 'skewX(30rad) scaleZ(3)'},
]);
test_interpolation({
property: 'transform',
from: 'skewX(10rad)',
to: 'skewX(20rad) scaleZ(2)'
}, [
{at: -1, expect: 'skewX(0rad) scaleZ(0)'},
{at: 0, expect: 'skewX(10rad) scaleZ(1)'},
{at: 0.25, expect: 'skewX(12.5rad) scaleZ(1.25)'},
{at: 0.75, expect: 'skewX(17.5rad) scaleZ(1.75)'},
{at: 1, expect: 'skewX(20rad) scaleZ(2)'},
{at: 2, expect: 'skewX(30rad) scaleZ(3)'},
]);
test_interpolation({
property: 'transform',
from: 'scaleZ(3) perspective(400px)',
to: 'scaleZ(4) skewX(1rad) perspective(500px)'
}, [
{at: -1, expect: 'scaleZ(2) matrix3d(1, 0, 0, 0, -1.55741, 1, 0, 0, 0, 0, 1, -0.003, 0, 0, 0, 1)'},
{at: 0, expect: 'scaleZ(3) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'},
{at: 0.25, expect: 'scaleZ(3.25) matrix3d(1, 0, 0, 0, 0.389352, 1, 0, 0, 0, 0, 1, -0.002375, 0, 0, 0, 1)'},
{at: 0.75, expect: 'scaleZ(3.75) matrix3d(1, 0, 0, 0, 1.16806, 1, 0, 0, 0, 0, 1, -0.002125, 0, 0, 0, 1)'},
{at: 1, expect: 'scaleZ(4) matrix3d(1, 0, 0, 0, 1.55741, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'},
{at: 2, expect: 'scaleZ(5) matrix3d(1, 0, 0, 0, 3.11482, 1, 0, 0, 0, 0, 1, -0.0015, 0, 0, 0, 1)'},
]);
test_interpolation({
property: 'transform',
from: 'translateY(70%) scaleZ(1)',
to: 'translateY(90%) scaleZ(2)'
}, [
{at: -1, expect: 'translateY(50%) scaleZ(0)'},
{at: 0, expect: 'translateY(70%) scaleZ(1)'},
{at: 0.25, expect: 'translateY(75%) scaleZ(1.25)'},
{at: 0.75, expect: 'translateY(85%) scaleZ(1.75)'},
{at: 1, expect: 'translateY(90%) scaleZ(2)'},
{at: 2, expect: 'translateY(110%) scaleZ(3)'},
]);
test_interpolation({
property: 'transform',
from: 'translateY(70%)',
to: 'translateY(90%) scaleZ(2)'
}, [
{at: -1, expect: 'translateY(50%) scaleZ(0)'},
{at: 0, expect: 'translateY(70%)'},
{at: 0.25, expect: 'translateY(75%) scaleZ(1.25)'},
{at: 0.75, expect: 'translateY(85%) scaleZ(1.75)'},
{at: 1, expect: 'translateY(90%) scaleZ(2)'},
{at: 2, expect: 'translateY(110%) scaleZ(3)'},
]);
// Skew
test_interpolation({
property: 'transform',
from: 'skewX(10rad)',
to: 'skewX(20rad)'
}, [
{at: -1, expect: 'skewX(0rad)'},
{at: 0, expect: 'skewX(10rad)'},
{at: 0.25, expect: 'skewX(12.5rad)'},
{at: 0.75, expect: 'skewX(17.5rad)'},
{at: 1, expect: 'skewX(20rad)'},
{at: 2, expect: 'skewX(30rad)'},
]);
test_interpolation({
property: 'transform',
from: 'skewY(10rad)',
to: 'skewY(20rad)'
}, [
{at: -1, expect: 'skewY(0rad)'},
{at: 0, expect: 'skewY(10rad)'},
{at: 0.25, expect: 'skewY(12.5rad)'},
{at: 0.75, expect: 'skewY(17.5rad)'},
{at: 1, expect: 'skewY(20rad)'},
{at: 2, expect: 'skewY(30rad)'},
]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-004.html 0 → 100644
View file @ 72c5f480
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
<meta name="assert" content="transform supports animation as a transform list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
</body>
<script>
// Translate
test_interpolation({
property: 'transform',
from: 'translate(12px, 70%)',
to: 'translate(13px, 90%)'
}, [
{at: -1, expect: 'translate(11px, 50%)'},
{at: 0, expect: 'translate(12px, 70%)'},
{at: 0.25, expect: 'translate(12.25px, 75%)'},
{at: 0.75, expect: 'translate(12.75px, 85%)'},
{at: 1, expect: 'translate(13px, 90%)'},
{at: 2, expect: 'translate(14px, 110%)'},
]);
test_interpolation({
property: 'transform',
from: 'translateX(12px)',
to: 'translateX(13px)'
}, [
{at: -1, expect: 'translateX(11px)'},
{at: 0, expect: 'translateX(12px)'},
{at: 0.25, expect: 'translateX(12.25px)'},
{at: 0.75, expect: 'translateX(12.75px)'},
{at: 1, expect: 'translateX(13px)'},
{at: 2, expect: 'translateX(14px)'},
]);
test_interpolation({
property: 'transform',
from: 'translateY(70%)',
to: 'translateY(90%)'
}, [
{at: -1, expect: 'translateY(50%)'},
{at: 0, expect: 'translateY(70%)'},
{at: 0.25, expect: 'translateY(75%)'},
{at: 0.75, expect: 'translateY(85%)'},
{at: 1, expect: 'translateY(90%)'},
{at: 2, expect: 'translateY(110%)'},
]);
test_interpolation({
property: 'transform',
from: 'translateZ(2em)',
to: 'translateZ(3em)'
}, [
{at: -1, expect: 'translateZ(1em)'},
{at: 0, expect: 'translateZ(2em)'},
{at: 0.25, expect: 'translateZ(2.25em)'},
{at: 0.75, expect: 'translateZ(2.75em)'},
{at: 1, expect: 'translateZ(3em)'},
{at: 2, expect: 'translateZ(4em)'},
]);
test_interpolation({
property: 'transform',
from: 'translate3d(12px, 70%, 2em)',
to: 'translate3d(13px, 90%, 3em)'
}, [
{at: -1, expect: 'translate3d(11px, 50%, 1em)'},
{at: 0, expect: 'translate3d(12px, 70%, 2em)'},
{at: 0.25, expect: 'translate3d(12.25px, 75%, 2.25em)'},
{at: 0.75, expect: 'translate3d(12.75px, 85%, 2.75em)'},
{at: 1, expect: 'translate3d(13px, 90%, 3em)'},
{at: 2, expect: 'translate3d(14px, 110%, 4em)'},
]);
test_interpolation({
property: 'transform',
from: 'translateX(12px) translateY(70%) translateZ(2em)',
to: 'translateX(13px) translateY(90%) translateZ(3em)'
}, [
{at: -1, expect: 'translateX(11px) translateY(50%) translateZ(1em)'},
{at: 0, expect: 'translateX(12px) translateY(70%) translateZ(2em)'},
{at: 0.25, expect: 'translateX(12.25px) translateY(75%) translateZ(2.25em)'},
{at: 0.75, expect: 'translateX(12.75px) translateY(85%) translateZ(2.75em)'},
{at: 1, expect: 'translateX(13px) translateY(90%) translateZ(3em)'},
{at: 2, expect: 'translateX(14px) translateY(110%) translateZ(4em)'},
]);
test_interpolation({
property: 'transform',
from: 'skewX(10rad) translateY(70%)',
to: 'skewX(20rad) translateY(90%)'
}, [
{at: -1, expect: 'skewX(0rad) translateY(50%)'},
{at: 0, expect: 'skewX(10rad) translateY(70%)'},
{at: 0.25, expect: 'skewX(12.5rad) translateY(75%)'},
{at: 0.75, expect: 'skewX(17.5rad) translateY(85%)'},
{at: 1, expect: 'skewX(20rad) translateY(90%)'},
{at: 2, expect: 'skewX(30rad) translateY(110%)'},
]);
test_interpolation({
property: 'transform',
from: 'skewX(1rad)',
to: 'translate3d(8px, -4px, 12px) skewX(2rad)'
}, [
{at: -1, expect: 'matrix3d(1, 0, 0, 0, 5.2998553125713235, 1, 0, 0, 0, 0, 1, 0, -8, 4, -12, 1)'},
{at: 0, expect: 'matrix(1, 0, 1.5574077246549023, 1, 0, 0)'},
{at: 0.25, expect: 'matrix3d(1, 0, 0, 0, 0.621795827675797, 1, 0, 0, 0, 0, 1, 0, 2, -1, 3, 1)'},
{at: 0.75, expect: 'matrix3d(1, 0, 0, 0, -1.2494279662824135, 1, 0, 0, 0, 0, 1, 0, 6, -3, 9, 1)'},
{at: 1, expect: 'matrix3d(1, 0, 0, 0, -2.185039863261519, 1, 0, 0, 0, 0, 1, 0, 8, -4, 12, 1)'},
{at: 2, expect: 'matrix3d(1, 0, 0, 0, -5.9274874511779405, 1, 0, 0, 0, 0, 1, 0, 16, -8, 24, 1)'},
]);
test_interpolation({
property: 'transform',
from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
to: 'scaleY(2) skewX(2rad) perspective(500px)'
}, [
{at: -1, expect: 'matrix3d(1, 0, 0, 0, 0, 0, 0, 0, -0.03876288659793814, 0.01938144329896907, 0.94, -0.0029653608247422686, 16, -8, 24, 0.986144329896907)'},
{at: 0, expect: 'matrix3d(1, 0, 0, 0, 1.5574077246549023, 1, 0, 0, -0.02, 0.01, 0.97, -0.0025, 8, -4, 12, 1)'},
{at: 0.25, expect: 'matrix3d(1, 0, 0, 0, 1.1186572632293585, 1.25, 0, 0, -0.0151159793814433, 0.00755798969072165, 0.9775, -0.002378247422680413, 6, -3, 9, 1.0012989690721648)'},
{at: 0.75, expect: 'matrix3d(1, 0, 0, 0, -0.7525665307288518, 1.75, 0, 0, -0.005115979381443298, 0.002557989690721649, 0.9924999999999999, -0.002128247422680412, 2, -1, 3, 1.001298969072165)'},
{at: 1, expect: 'matrix3d(1, 0, 0, 0, -2.185039863261519, 2, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'},
{at: 2, expect: 'matrix3d(1, 0, 0, 0, -11.227342763749263, 3, 0, 0, 0.021237113402061854, -0.010618556701030927, 1.03, -0.0014653608247422677, -8, 4, -12, 0.9861443298969074)'},
]);
test_interpolation({
property: 'transform',
from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
to: 'translate3d(4px, -12px, 8px) scaleY(2) perspective(500px)'
}, [
{at: -1, expect: 'translate3d(12px, 4px, 16px) matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -0.003, 0, 0, 0, 1)'},
{at: 0, expect: 'translate3d(8px, -4px, 12px) matrix3d(1, 0, 0, 0, 1.55741, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'},
{at: 0.25, expect: 'translate3d(7px, -6px, 11px) matrix3d(1, 0, 0, 0, 1.46007, 1.25, 0, 0, 0, 0, 1, -0.002375, 0, 0, 0, 1)'},
{at: 0.75, expect: 'translate3d(5px, -10px, 9px) matrix3d(1, 0, 0, 0, 0.681366, 1.75, 0, 0, 0, 0, 1, -0.002125, 0, 0, 0, 1)'},
{at: 1, expect: 'translate3d(4px, -12px, 8px) matrix3d(1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'},
{at: 2, expect: 'translate3d(0px, -20px, 4px) matrix3d(1, 0, 0, 0, -4.67222, 3, 0, 0, 0, 0, 1, -0.0015, 0, 0, 0, 1)'},
]);
test_interpolation({
property: 'transform',
from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
to: 'translate3d(4px, -12px, 8px) skewX(2rad) scaleY(2)'
}, [
{at: -1, expect: 'translate3d(12px, 4px, 16px) skewX(0rad) matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -0.005, 0, 0, 0, 1)'},
{at: 0, expect: 'translate3d(8px, -4px, 12px) skewX(1rad) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'},
{at: 0.25, expect: 'translate3d(7px, -6px, 11px) skewX(1.25rad) matrix3d(1, 0, 0, 0, 0, 1.25, 0, 0, 0, 0, 1, -0.001875, 0, 0, 0, 1)'},
{at: 0.75, expect: 'translate3d(5px, -10px, 9px) skewX(1.75rad) matrix3d(1, 0, 0, 0, 0, 1.75, 0, 0, 0, 0, 1, -0.000625, 0, 0, 0, 1)'},
{at: 1, expect: 'translate3d(4px, -12px, 8px) skewX(2rad) matrix(1, 0, 0, 2, 0, 0)'},
{at: 2, expect: 'translate3d(0px, -20px, 4px) skewX(3rad) matrix3d(1, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0.0025, 0, 0, 0, 1)'},
]);
test_interpolation({
property: 'transform',
from: 'translate3D(100px, 200px, 300px)',
to: 'none'
}, [
{at: -1, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 400, 600, 1)'},
{at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 200, 300, 1)'},
{at: 0.25, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 75, 150, 225, 1)'},
{at: 0.75, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25, 50, 75, 1)'},
{at: 1, expect: 'matrix(1, 0, 0, 1, 0, 0) '},
{at: 2, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -100, -200, -300, 1)'},
]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-005.html 0 → 100644
View file @ 72c5f480
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
<meta name="assert" content="transform supports animation as a transform list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
color: white;
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
overflow: hidden;
}
.expected {
background-color: green;
}
.target > div {
width: 10px;
height: 10px;
display: inline-block;
background: orange;
margin: 1px;
}
.test {
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
</body>
<script>
// Matrix transforms:
// 2D matrix transforms:
//
// [m11 m21 0 m41] [1 0 0 Tx] [cos(R) -sin(R) 0 0] [1 K 0 0] [Sx 0 0 0]
// [m12 m22 0 m42] = [0 1 0 Ty] [sin(R) cos(R) 0 0] [0 1 0 0] [0 Sy 0 0]
// [ 0 0 1 0 ] [0 0 1 0 ] [ 0 0 1 0] [0 0 1 0] [0 0 1 0]
// [ 0 0 0 1 ] [0 0 0 1 ] [ 0 0 0 1] [0 0 0 1] [0 0 0 1]
//
// M = translate * rotate * skew * scale
// See also webkit-transform-interpolation-005.html
//
const cos30 = Math.cos(Math.PI / 6);
const sin30 = Math.sin(Math.PI / 6);
const cos45 = Math.cos(Math.PI / 4);
const sin45 = Math.sin(Math.PI / 4);
const cos60 = Math.cos(Math.PI / 3);
const sin60 = Math.sin(Math.PI / 3);
// translateY(-6px) -> translateX(6px) rotate(90deg) scaleX(7)
test_interpolation({
property: 'transform',
from: 'matrix(1, 0, 0, 1, 0, -6)',
to: 'matrix(0, 7, -1, 0, 6, 0)'
}, [
{at: -1, expect: 'matrix(0, 5, 1, 0, -6, -12)'},
{at: 0, expect: 'matrix(1, 0, 0, 1, 0, -6)'},
{
at: 1/3,
expect: `matrix(${3 * cos30}, ${3 * sin30}, -${sin30}, ${cos30}, 2, -4)`
},
{
at: 0.5,
expect: `matrix(${4 * cos45}, ${4 * sin45}, -${sin45}, ${cos45}, 3, -3)`
},
{
at: 2/3,
expect: `matrix(${5 * cos60}, ${5 * sin60}, -${sin60}, ${cos60}, 4, -2)`
},
{at: 1, expect: 'matrix(0, 7, -1, 0, 6, 0)'},
{at: 2, expect: 'matrix(-13, 0, 0, -1, 12, 6)'}
]);
// translateX(6px) rotate(90deg) scaleX(7) -> translateY(-6px)
test_interpolation({
property: 'transform',
from: 'matrix(0, 7, -1, 0, 6, 0)',
to: 'matrix(1, 0, 0, 1, 0, -6)',
}, [
{at: -1, expect: 'matrix(-13, 0, 0, -1, 12, 6)'},
{at: 0, expect: 'matrix(0, 7, -1, 0, 6, 0)'},
{
at: 1/3,
expect: `matrix(${5 * cos60}, ${5 * sin60}, -${sin60}, ${cos60}, 4, -2)`
},
{
at: 0.5,
expect: `matrix(${4 * cos45}, ${4 * sin45}, -${sin45}, ${cos45}, 3, -3)`
},
{
at: 2/3,
expect: `matrix(${3 * cos30}, ${3 * sin30}, -${sin30}, ${cos30}, 2, -4)`
},
{at: 1, expect: 'matrix(1, 0, 0, 1, 0, -6)'},
{at: 2, expect: 'matrix(0, 5, 1, 0, -6, -12)'}
]);
// scaleY(7) -> skewX(45deg) scaleX(7)
test_interpolation({
property: 'transform',
from: 'matrix(1, 0, 0, 7, 0, 0)',
to: 'matrix(7, 0, 1, 1, 0, 0)'
}, [
{at: -1, expect: 'matrix(-5, 0, -13, 13, 0, 0)'},
{at: 0, expect: 'matrix(1, 0, 0, 7, 0, 0)'},
{at: 1/3, expect: 'matrix(3, 0, 1.6667, 5, 0, 0)'},
{at: 0.5, expect: 'matrix(4, 0, 2, 4, 0, 0)'},
{at: 2/3, expect: 'matrix(5, 0, 2, 3, 0, 0)'},
{at: 1, expect: `matrix(7, 0, 1, 1, 0, 0)`},
{at: 2, expect: `matrix(13, 0, -10, -5, 0, 0)`}
]);
// 3-D matrix transforms.
// TODO(kevers): Revisit 3D transform examples. It is difficult to infer
// the quality of the matrix decompositions from the expected output.
test_interpolation({
property: 'transform',
from: 'none',
to: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'
}, [
{at: -1, expect: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'},
{at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
{at: 0.25, expect: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'},
{at: 0.75, expect: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'},
{at: 1, expect: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'},
{at: 2, expect: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'},
]);
test_interpolation({
property: 'transform',
from: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)',
to: 'none'
}, [
{at: -1, expect: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'},
{at: 0, expect: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'},
{at: 0.25, expect: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'},
{at: 0.75, expect: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'},
{at: 1, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
{at: 2, expect: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'},
]);
test_interpolation({
property: 'transform',
from: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)',
to: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)'
}, [
{at: -1, expect: 'matrix3d(1.9877532948000005, 0.0, 0.0, 0.0, 0.0, 2.7492749567000003, 0.0, 0.0, 0.0, 0.0, 2.5165290423999997, 0.0, 20.2343946258, 21.1087405532, 21.371164870599998, 1.0)'},
{at: 0, expect: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)'},
{at: 0.25, expect: 'matrix3d(2.441256919175, 0.0, 0.0, 0.0, 0.0, 2.571299218825, 0.0, 0.0, 0.0, 0.0, 2.6947530634, 0.0, 20.35889062555, 20.561444082325, 20.800684839349998, 1.0)'},
{at: 0.75, expect: 'matrix3d(2.622658368925, 0.0, 0.0, 0.0, 0.0, 2.500108923675, 0.0, 0.0, 0.0, 0.0, 2.7660426718, 0.0, 20.408689025450002, 20.342525493975, 20.572492826850002, 1.0)'},
{at: 1, expect: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)'},
{at: 2, expect: 'matrix3d(3.0761619932999995, 0.0, 0.0, 0.0, 0.0, 2.3221331858, 0.0, 0.0, 0.0, 0.0, 2.9442666928000003, 0.0, 20.5331850252, 19.7952290231, 20.002012795600002, 1.0)'},
]);
test_interpolation({
property: 'transform',
from: 'none',
to: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'
}, [
{at: -1, expect: 'matrix3d(-0.0000000000000002377810622383943, -1.0671050586638147, -0.08972656766237302, 1.3740432449326199, 0.98484601036295, -2.653201092395309, 0.6753819540610847, 3.6127240080250744, -2.7988839807429846, -1.2090004194153336, -0.5183744226115445, -0.7936088631686278, 1.1875, 0.0625, -1.3125, 5.340768914473683)'},
{at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
{at: 0.25, expect: 'matrix3d(0.9041890962319094, 0.3522701519297133, -0.15240204298176957, -0.1428256720529315, -0.7579798772527586, 0.6803606288839232, -0.05133336076757235, 0.37904689530895724, -0.1957679784745485, 0.38554138029509327, 0.8226186974340638, 0.3370288143441876, -0.296875, -0.015625, 0.328125, 0.5930529142680923)'},
{at: 0.75, expect: 'matrix3d(0.35007413226026135, 0.7254385504141292, -0.4977009150941454, 0.09582061929004702, -1.1027525038949482, -0.5884810398827429, 0.4516829688651701, 0.5447944343861767, -0.68717798815684, 0.2657772247405681, 0.5465690479810023, 1.0836207863885503, -0.890625, -0.046875, 0.984375, 0.5930529142680927)'},
{at: 1, expect: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'},
{at: 2, expect: 'matrix3d(-0.5844534449366048, -0.42278005999296053, -0.4650580659922564, -0.6817595809063256, 0.9156938760088464, 0.3851647027225889, 0.9244443507516923, 0.7218225020358241, -0.0803568793574344, 0.1719974850210706, -0.49676609633513097, -0.25968177786904373, -2.375, -0.125, 2.625, 5.340768914473685)'},
]);
test_interpolation({
property: 'transform',
from: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)',
to: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'
}, [
{at: -1, expect: 'matrix3d(-0.6299594065765657, -0.10825090106268696, -0.20133311671001855, 5.485724217214554, 6.358051978686152, 0.16496896269344588, 1.5760051143537075, -54.21568355620423, 0.7106057459805782, -1.1596356050622005, -0.11495342545397585, -4.913752963990824, -1.03125, -1.125, 3.5625, -5.901513951904114)'},
{at: 0, expect: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'},
{at: 0.25, expect: 'matrix3d(0.33652832679595723, 0.55254445148386, -0.7544724447833296, 0.22700224951774267, -0.69720168363685, -0.036373245768780864, 0.28149188169180933, -0.2845156818045006, -0.24737156018941048, 0.31207160370190334, 0.4564821058052897, 0.9220853089096839, -1.2265625, 0.203125, 0.75, 1.647016932991011)'},
{at: 0.75, expect: 'matrix3d(0.6861191524977764, -0.18025672746204927, -0.8710297237546482, 0.6072134247444672, 0.2819931018922366, 0.27778974607679663, -0.6540128246146626, 0.5063632314069845, 0.5509562084361049, -0.3215202993119732, 0.5459062603735321, 2.8697154005492105, -1.3046875, 0.734375, -0.375, 1.6470169329910096)'},
{at: 1, expect: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'},
{at: 2, expect: 'matrix3d(-1.1789992641434441, -0.7109729379601547, -0.4455746537954199, -21.703089533128907, -0.11137581475421703, -0.08822983871000473, -0.05695380894007451, -2.22667264132605, -3.1443917136741506, 1.8952588096345078, 2.426615889772007, -21.697523130750138, -1.5, 2.0625, -3.1875, -5.901513951904121)'},
]);
test_interpolation({
property: 'transform',
from: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)',
to: 'none'
}, [
{at: -1, expect: 'matrix3d(-0.6413028394192518, -1.0702420910513302, -0.5807595966791961, -18.02447171345163, 0.8211815704840004, 1.0980679097347057, 0.9399408862655454, 22.460730852026064, 0.28421009261178104, -0.5408346238741739, 0.5194791363698213, 3.075163035391172, -2.6875, 2, -1.875, -14.881239394516232)'},
{at: 0, expect: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'},
{at: 0.25, expect: 'matrix3d(0.7912976716694541, -0.4517927901159618, -0.6868745974719376, 1.2522201536338506, 0.7952183069582651, 0.06340410955800829, -0.7956629784232128, 2.2561737435012983, 0.345639443327071, -0.8934490945546473, 0.830131443385676, 1.2606901484983566, -1.0078125, 0.75, -0.703125, 2.4888661932358946)'},
{at: 0.75, expect: 'matrix3d(1.0093457700315165, -0.12746048375025829, -0.24746788943106088, 1.3202120308857304, 0.6128364656690982, 0.7600694601651116, -0.22233359857303325, 1.4081483224940277, 0.21669805381113447, -0.3786082265932788, 0.908354523914928, 0.6747509193960347, -0.3359375, 0.25, -0.234375, 2.4888661932358964)'},
{at: 1, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
{at: 2, expect: 'matrix3d(0.39048513570444376, 0.14780794797065988, 0.6963068100217401, -4.857907861239344, -2.967682789284791, 0.6004978769584385, -3.5472376016872444, 26.675324787979896, -2.5953724498995308, 1.6280843851961373, 0.8163834310586356, 9.001735256585825, 1.34375, -1, 0.9375, -14.881239394516227)'},
]);
// Mismatched interpolation with an empty list should not use decomposition.
test_interpolation({
property: 'transform',
from: 'none',
to: 'rotate(180deg)'
}, [
{at: -1, expect: 'rotate(-180deg)'},
{at: 0, expect: 'rotate(0deg)'},
{at: 0.25, expect: 'rotate(45deg)'},
{at: 0.75, expect: 'rotate(135deg)'},
{at: 1, expect: 'rotate(180deg)'},
{at: 2, expect: 'rotate(360deg)'},
]);
test_interpolation({
property: 'transform',
from: 'rotate(180deg)',
to: 'none'
}, [
{at: -1, expect: 'rotate(360deg)'},
{at: 0, expect: 'rotate(180deg)'},
{at: 0.25, expect: 'rotate(135deg)'},
{at: 0.75, expect: 'rotate(45deg)'},
{at: 1, expect: 'rotate(0deg)'},
{at: 2, expect: 'rotate(-180deg)'},
]);
test_interpolation({
property: 'transform',
from: 'none',
to: 'rotate(360deg)'
}, [
{at: -1, expect: 'rotate(-360deg)'},
{at: 0, expect: 'rotate(0deg)'},
{at: 0.25, expect: 'rotate(90deg)'},
{at: 0.75, expect: 'rotate(270deg)'},
{at: 1, expect: 'rotate(360deg)'},
{at: 2, expect: 'rotate(720deg)'},
]);
</script>
third_party/blink/web_tests/animations/interpolation/transform-interpolation-006.html → third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-006.html
View file @ 72c5f480
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
<meta name="assert" content="transform supports animation as a transform list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
transform: translate(30px);
......@@ -30,62 +38,63 @@
overflow: hidden;
}
</style>
<body>
<template id="target-template">
<div></div>
</template>
<script src="resources/interpolation-test.js"></script>
<template id="target-template">
<div></div>
</template>
</body>
<script>
assertInterpolation({
test_interpolation({
property: 'transform',
from: neutralKeyframe,
to: 'translate(20px)',
}, [
{at: -1, is: 'translate(0px)'},
{at: 0, is: 'translate(10px)'},
{at: 0.25, is: 'translate(12.5px)'},
{at: 0.75, is: 'translate(17.5px)'},
{at: 1, is: 'translate(20px)'},
{at: 2, is: 'translate(30px)'},
{at: -1, expect: 'translate(0px)'},
{at: 0, expect: 'translate(10px)'},
{at: 0.25, expect: 'translate(12.5px)'},
{at: 0.75, expect: 'translate(17.5px)'},
{at: 1, expect: 'translate(20px)'},
{at: 2, expect: 'translate(30px)'},
]);
assertInterpolation({
test_interpolation({
property: 'transform',
from: 'initial',
to: 'translate(20px)',
}, [
{at: -1, is: 'translate(-20px)'},
{at: 0, is: 'translate(0px)'},
{at: 0.25, is: 'translate(5px)'},
{at: 0.75, is: 'translate(15px)'},
{at: 1, is: 'translate(20px)'},
{at: 2, is: 'translate(40px)'},
{at: -1, expect: 'translate(-20px)'},
{at: 0, expect: 'translate(0px)'},
{at: 0.25, expect: 'translate(5px)'},
{at: 0.75, expect: 'translate(15px)'},
{at: 1, expect: 'translate(20px)'},
{at: 2, expect: 'translate(40px)'},
]);
assertInterpolation({
test_interpolation({
property: 'transform',
from: 'inherit',
to: 'translate(20px)',
}, [
{at: -1, is: 'translate(40px)'},
{at: 0, is: 'translate(30px)'},
{at: 0.25, is: 'translate(27.5px)'},
{at: 0.75, is: 'translate(22.5px)'},
{at: 1, is: 'translate(20px)'},
{at: 2, is: 'translate(10px)'},
{at: -1, expect: 'translate(40px)'},
{at: 0, expect: 'translate(30px)'},
{at: 0.25, expect: 'translate(27.5px)'},
{at: 0.75, expect: 'translate(22.5px)'},
{at: 1, expect: 'translate(20px)'},
{at: 2, expect: 'translate(10px)'},
]);
assertInterpolation({
test_interpolation({
property: 'transform',
from: 'unset',
to: 'translate(20px)',
}, [
{at: -1, is: 'translate(-20px)'},
{at: 0, is: 'translate(0px)'},
{at: 0.25, is: 'translate(5px)'},
{at: 0.75, is: 'translate(15px)'},
{at: 1, is: 'translate(20px)'},
{at: 2, is: 'translate(40px)'},
{at: -1, expect: 'translate(-20px)'},
{at: 0, expect: 'translate(0px)'},
{at: 0.25, expect: 'translate(5px)'},
{at: 0.75, expect: 'translate(15px)'},
{at: 1, expect: 'translate(20px)'},
{at: 2, expect: 'translate(40px)'},
]);
</script>
</body>
third_party/blink/web_tests/animations/interpolation/transform-origin-interpolation.html → third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-origin-interpolation.html
View file @ 72c5f480
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-origin interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property">
<meta name="assert" content="transform supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
transform-origin: 30px 10px;
......@@ -20,98 +28,98 @@
left: -50px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<body></body>
<script>
assertInterpolation({
test_interpolation({
property: 'transform-origin',
from: neutralKeyframe,
to: '20px 20px',
}, [
{at: -0.3, is: '7px 33px'},
{at: 0, is: '10px 30px'},
{at: 0.3, is: '13px 27px'},
{at: 0.6, is: '16px 24px'},
{at: 1, is: '20px 20px'},
{at: 1.5, is: '25px 15px'},
{at: -0.3, expect: '7px 33px'},
{at: 0, expect: '10px 30px'},
{at: 0.3, expect: '13px 27px'},
{at: 0.6, expect: '16px 24px'},
{at: 1, expect: '20px 20px'},
{at: 1.5, expect: '25px 15px'},
]);
assertInterpolation({
test_interpolation({
property: 'transform-origin',
from: 'initial',
to: '20px 20px',
}, [
{at: -0.3, is: '26.5px 26.5px'},
{at: 0, is: '25px 25px'},
{at: 0.3, is: '23.5px 23.5px'},
{at: 0.6, is: '22px 22px'},
{at: 1, is: '20px 20px'},
{at: 1.5, is: '17.5px 17.5px'},
{at: -0.3, expect: '26.5px 26.5px'},
{at: 0, expect: '25px 25px'},
{at: 0.3, expect: '23.5px 23.5px'},
{at: 0.6, expect: '22px 22px'},
{at: 1, expect: '20px 20px'},
{at: 1.5, expect: '17.5px 17.5px'},
]);
assertInterpolation({
test_interpolation({
property: 'transform-origin',
from: 'inherit',
to: '20px 20px',
}, [
{at: -0.3, is: '33px 7px'},
{at: 0, is: '30px 10px'},
{at: 0.3, is: '27px 13px'},
{at: 0.6, is: '24px 16px'},
{at: 1, is: '20px 20px'},
{at: 1.5, is: '15px 25px'},
{at: -0.3, expect: '33px 7px'},
{at: 0, expect: '30px 10px'},
{at: 0.3, expect: '27px 13px'},
{at: 0.6, expect: '24px 16px'},
{at: 1, expect: '20px 20px'},
{at: 1.5, expect: '15px 25px'},
]);
assertInterpolation({
test_interpolation({
property: 'transform-origin',
from: 'unset',
to: '20px 20px',
}, [
{at: -0.3, is: '26.5px 26.5px'},
{at: 0, is: '25px 25px'},
{at: 0.3, is: '23.5px 23.5px'},
{at: 0.6, is: '22px 22px'},
{at: 1, is: '20px 20px'},
{at: 1.5, is: '17.5px 17.5px'},
{at: -0.3, expect: '26.5px 26.5px'},
{at: 0, expect: '25px 25px'},
{at: 0.3, expect: '23.5px 23.5px'},
{at: 0.6, expect: '22px 22px'},
{at: 1, expect: '20px 20px'},
{at: 1.5, expect: '17.5px 17.5px'},
]);
assertInterpolation({
test_interpolation({
property: 'transform-origin',
from: 'top left',
to: 'bottom right',
}, [
{at: -0.3, is: '-15px -15px'},
{at: 0, is: '0px 0px'},
{at: 0.3, is: '15px 15px'},
{at: 0.6, is: '30px 30px'},
{at: 1, is: '50px 50px'},
{at: 1.5, is: '75px 75px'},
{at: -0.3, expect: '-15px -15px'},
{at: 0, expect: '0px 0px'},
{at: 0.3, expect: '15px 15px'},
{at: 0.6, expect: '30px 30px'},
{at: 1, expect: '50px 50px'},
{at: 1.5, expect: '75px 75px'},
]);
assertInterpolation({
test_interpolation({
property: 'transform-origin',
from: 'center center',
to: '0% 100px',
}, [
{at: -0.3, is: '32.5px 2.5px'},
{at: 0, is: '25px 25px'},
{at: 0.3, is: '17.5px 47.5px'},
{at: 0.6, is: '10px 70px'},
{at: 1, is: '0px 100px'},
{at: 1.5, is: '-12.5px 137.5px'},
{at: -0.3, expect: '32.5px 2.5px'},
{at: 0, expect: '25px 25px'},
{at: 0.3, expect: '17.5px 47.5px'},
{at: 0.6, expect: '10px 70px'},
{at: 1, expect: '0px 100px'},
{at: 1.5, expect: '-12.5px 137.5px'},
]);
assertInterpolation({
test_interpolation({
property: 'transform-origin',
from: '0% 50% 5px',
to: '100% 150% 0px'
}, [
{at: -0.3, is: '-30% 20% 6.5px'},
{at: 0, is: '0% 50% 5px'},
{at: 0.3, is: '30% 80% 3.5px'},
{at: 0.6, is: '60% 110% 2px'},
{at: 1, is: '100% 150% 0px'},
{at: 1.5, is: '150% 200% -2.5px'},
{at: -0.3, expect: '-30% 20% 6.5px'},
{at: 0, expect: '0% 50% 5px'},
{at: 0.3, expect: '30% 80% 3.5px'},
{at: 0.6, expect: '60% 110% 2px'},
{at: 1, expect: '100% 150% 0px'},
{at: 1.5, expect: '150% 200% -2.5px'},
]);
</script>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment