mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 422b440e0b587317e4539378b18c362a4ea7afee
This commit is contained in:
WPT Sync Bot
parent
dbee7f7d27
commit
0c29efe000
160 changed files with 6195 additions and 2605 deletions
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title> perspective composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective">
|
||||
<meta name="assert" content="perspective supports animation">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'perspective',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'perspective',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'perspective',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'perspective',
|
||||
underlying: '100px',
|
||||
addFrom: '100px',
|
||||
addTo: 'none',
|
||||
}, [
|
||||
{at: -0.3, expect: '200px'},
|
||||
{at: 0, expect: '200px'},
|
||||
{at: 0.5, expect: 'none'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 1.5, expect: 'none'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title> rotate composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
|
||||
<meta name="assert" content="rotate supports animation">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '100deg',
|
||||
addFrom: '10deg',
|
||||
addTo: '30deg',
|
||||
}, [
|
||||
{at: -1, expect: '90deg'},
|
||||
{at: 0, expect: '110deg'},
|
||||
{at: 0.25, expect: '115deg'},
|
||||
{at: 0.75, expect: '125deg'},
|
||||
{at: 1, expect: '130deg'},
|
||||
{at: 2, expect: '150deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '1 0 0 200deg',
|
||||
addFrom: '1 0 0 -100deg',
|
||||
replaceTo: '1 0 0 40deg',
|
||||
}, [
|
||||
{at: -1, expect: '1 0 0 160deg'},
|
||||
{at: 0, expect: '1 0 0 100deg'},
|
||||
{at: 0.25, expect: '1 0 0 85deg'},
|
||||
{at: 0.75, expect: '1 0 0 55deg'},
|
||||
{at: 1, expect: '1 0 0 40deg'},
|
||||
{at: 2, expect: '1 0 0 -20deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '0 1 0 -40deg',
|
||||
replaceFrom: '0 1 0 50deg',
|
||||
addTo: '0 1 0 10deg',
|
||||
}, [
|
||||
{at: -1, expect: '0 1 0 130deg'},
|
||||
{at: 0, expect: '0 1 0 50deg'},
|
||||
{at: 0.25, expect: '0 1 0 30deg'},
|
||||
{at: 0.75, expect: '0 1 0 -10deg'},
|
||||
{at: 1, expect: '0 1 0 -30deg'},
|
||||
{at: 2, expect: '0 1 0 -110deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '1 2 3 40deg',
|
||||
addFrom: '2 4 6 10deg',
|
||||
addTo: '3 6 9 50deg',
|
||||
}, [
|
||||
{at: -1, expect: '1 2 3 10deg'},
|
||||
{at: 0, expect: '1 2 3 50deg'},
|
||||
{at: 0.25, expect: '1 2 3 60deg'},
|
||||
{at: 0.75, expect: '1 2 3 80deg'},
|
||||
{at: 1, expect: '1 2 3 90deg'},
|
||||
{at: 2, expect: '1 2 3 130deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '1 2 3 270deg',
|
||||
addFrom: '1 2 3 90deg',
|
||||
replaceTo: '0 1 0 100deg',
|
||||
}, [
|
||||
{at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'},
|
||||
{at: 0, expect: '1 2 3 360deg'},
|
||||
{at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'},
|
||||
{at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'},
|
||||
{at: 1, expect: '0 1 0 100deg'},
|
||||
{at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '1 2 3 90deg',
|
||||
addFrom: '2 4 6 270deg',
|
||||
replaceTo: '0 1 0 100deg',
|
||||
}, [
|
||||
{at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'},
|
||||
{at: 0, expect: '1 2 3 360deg'},
|
||||
{at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'},
|
||||
{at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'},
|
||||
{at: 1, expect: '0 1 0 100deg'},
|
||||
{at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '1 0 0 90deg',
|
||||
addFrom: '0 1 0 180deg',
|
||||
replaceTo: '0 0 1 90deg',
|
||||
}, [
|
||||
{at: -1, expect: '-6.12323e-17 -1 1.57009e-16 90deg'},
|
||||
{at: 0, expect: '-4.32978e-17 -0.707107 -0.707107 180deg'},
|
||||
{at: 0.25, expect: '-1.48952e-16 -0.894427 -0.447214 131.81deg'},
|
||||
{at: 0.75, expect: '-2.94392e-17 -0.707107 0.707107 70.5288deg'},
|
||||
{at: 1, expect: '90deg'},
|
||||
{at: 2, expect: '-6.12323e-17 -1 -4.71028e-16 90deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: 'none',
|
||||
addFrom: 'none',
|
||||
replaceTo: '0 1 0 100deg',
|
||||
}, [
|
||||
{at: -1, expect: '0 1 0 -100deg'},
|
||||
{at: 0, expect: 'none'},
|
||||
{at: 0.25, expect: '0 1 0 25deg'},
|
||||
{at: 0.75, expect: '0 1 0 75deg'},
|
||||
{at: 1, expect: '0 1 0 100deg'},
|
||||
{at: 2, expect: '0 1 0 200deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: 'none',
|
||||
addFrom: '2 4 6 270deg',
|
||||
replaceTo: 'none',
|
||||
}, [
|
||||
{at: -1, expect: '2 4 6 540deg'},
|
||||
{at: 0, expect: '2 4 6 270deg'},
|
||||
{at: 0.25, expect: '2 4 6 202.5deg'},
|
||||
{at: 0.75, expect: '2 4 6 67.5deg'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 2, expect: '2 4 6 -270deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '1 2 3 90deg',
|
||||
addFrom: 'none',
|
||||
replaceTo: '0 1 0 100deg',
|
||||
}, [
|
||||
{at: -1, expect: '0.31 -0.22 0.92 131.66deg'},
|
||||
{at: 0, expect: '1 2 3 90deg'},
|
||||
{at: 0.25, expect: '0.21 0.73 0.64 86.72deg'},
|
||||
{at: 0.75, expect: '0.07 0.97 0.21 92.05deg'},
|
||||
{at: 1, expect: '0 1 0 100deg'},
|
||||
{at: 2, expect: '-0.2 0.79 -0.59 151.11deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '1 2 3 90deg',
|
||||
addFrom: '2 4 6 270deg',
|
||||
replaceTo: 'none',
|
||||
}, [
|
||||
{at: -1, expect: '1 2 3 720deg'},
|
||||
{at: 0, expect: '1 2 3 360deg'},
|
||||
{at: 0.25, expect: '1 2 3 270deg'},
|
||||
{at: 0.75, expect: '1 2 3 90deg'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 2, expect: '1 2 3 -360deg'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>scale composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
|
||||
<meta name="assert" content="scale supports animation.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'scale',
|
||||
underlying: '2 1',
|
||||
addFrom: '3 1',
|
||||
addTo: '4 1',
|
||||
}, [
|
||||
{at: -0.5, expect: '5 1'},
|
||||
{at: 0, expect: '6 1'},
|
||||
{at: 0.25, expect: '6.5 1'},
|
||||
{at: 0.5, expect: '7 1'},
|
||||
{at: 0.75, expect: '7.5 1'},
|
||||
{at: 1, expect: '8 1'},
|
||||
{at: 1.5, expect: '9 1'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'scale',
|
||||
underlying: '1 2 3',
|
||||
addFrom: '4 5 6',
|
||||
replaceTo: '7 8 9',
|
||||
}, [
|
||||
{at: -0.5, expect: '2.5 11 22.5'},
|
||||
{at: 0, expect: '4 10 18'},
|
||||
{at: 0.25, expect: '4.75 9.5 15.75'},
|
||||
{at: 0.5, expect: '5.5 9 13.5'},
|
||||
{at: 0.75, expect: '6.25 8.5 11.25'},
|
||||
{at: 1, expect: '7 8 9'},
|
||||
{at: 1.5, expect: '8.5 7 4.5'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'scale',
|
||||
underlying: 'none',
|
||||
addFrom: 'none',
|
||||
replaceTo: '1.5 1',
|
||||
}, [
|
||||
{at: -1, expect: '0.5 1'},
|
||||
{at: 0, expect: '1'},
|
||||
{at: 0.25, expect: '1.125 1'},
|
||||
{at: 0.75, expect: '1.375 1'},
|
||||
{at: 1, expect: '1.5 1'},
|
||||
{at: 2, expect: '2 1'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'scale',
|
||||
underlying: 'none',
|
||||
addFrom: '4 5 6',
|
||||
replaceTo: 'none',
|
||||
}, [
|
||||
{at: -1, expect: '7 9 11'},
|
||||
{at: 0, expect: '4 5 6'},
|
||||
{at: 0.25, expect: '3.25 4 4.75'},
|
||||
{at: 0.75, expect: '1.75 2 2.25'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 2, expect: '-2 -3 -4'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'scale',
|
||||
underlying: '1 2 3',
|
||||
addFrom: 'none',
|
||||
replaceTo: '7 8 9',
|
||||
}, [
|
||||
{at: -0.5, expect: '-2 -1 0'},
|
||||
{at: 0, expect: '1 2 3'},
|
||||
{at: 0.25, expect: '2.5 3.5 4.5'},
|
||||
{at: 0.5, expect: '4 5 6'},
|
||||
{at: 0.75, expect: '5.5 6.5 7.5'},
|
||||
{at: 1, expect: '7 8 9'},
|
||||
{at: 1.5, expect: '10 11 12'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'scale',
|
||||
underlying: '1 2 3',
|
||||
addFrom: '4 5 6',
|
||||
replaceTo: 'none',
|
||||
}, [
|
||||
{at: -0.5, expect: '5.5 14.5 26.5'},
|
||||
{at: 0, expect: '4 10 18'},
|
||||
{at: 0.25, expect: '3.25 7.75 13.75'},
|
||||
{at: 0.5, expect: '2.5 5.5 9.5'},
|
||||
{at: 0.75, expect: '1.75 3.25 5.25'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 1.5, expect: '-0.5 -3.5 -7.5'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform composition</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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// This file contains tests for the composition behavior of transforms that is
|
||||
// unrelated to the individual transform functions. For the transform functions
|
||||
// themselves, see the transform-*-composition.html subtests.
|
||||
|
||||
// ------------------ Addition -----------------
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateX(100deg) rotateY(100deg)',
|
||||
addFrom: 'translate(10px, 20px)',
|
||||
replaceTo: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateX(50deg) rotateY(50deg) translate(-40px, -80px)'},
|
||||
{at: 0, expect: 'rotateX(100deg) rotateY(100deg) translate(10px, 20px)'},
|
||||
{at: 0.25, expect: 'rotateX(125deg) rotateY(125deg) translate(35px, 70px)'},
|
||||
{at: 0.5, expect: 'rotateX(150deg) rotateY(150deg) translate(60px, 120px)'},
|
||||
{at: 0.75, expect: 'rotateX(175deg) rotateY(175deg) translate(85px, 170px)'},
|
||||
{at: 1, expect: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)'},
|
||||
{at: 1.5, expect: 'rotateX(250deg) rotateY(250deg) translate(160px, 320px)'},
|
||||
]);
|
||||
|
||||
// Shorter list is extended with corresponding identity transforms for pairwise
|
||||
// interpolation.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateX(45deg)',
|
||||
addFrom: 'none',
|
||||
addTo: 'rotateY(360deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateX(45deg) rotateY(-180deg)'},
|
||||
{at: 0, expect: 'rotateX(45deg) rotateY(0deg)'},
|
||||
{at: 0.25, expect: 'rotateX(45deg) rotateY(90deg)'},
|
||||
{at: 0.5, expect: 'rotateX(45deg) rotateY(180deg)'},
|
||||
{at: 0.75, expect: 'rotateX(45deg) rotateY(270deg)'},
|
||||
{at: 1, expect: 'rotateX(45deg) rotateY(360deg)'},
|
||||
{at: 1.5, expect: 'rotateX(45deg) rotateY(540deg)'},
|
||||
]);
|
||||
|
||||
// Matrix decomposition cases
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateX(90deg)',
|
||||
addFrom: 'translate(100px, 100px)',
|
||||
addTo: 'scale(2)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'matrix3d(0.5, 0, 0, 0, 0, 1.11022e-16, 0.5, 0, 0, -1, 2.22045e-16, 0, 150, 9.18485e-15, 150, 1)'},
|
||||
{at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 6.12323e-17, 1, 0, 0, -1, 6.12323e-17, 0, 100, 6.12323e-15, 100, 1)'},
|
||||
{at: 0.25, expect: 'matrix3d(1.25, 0, 0, 0, 0, 2.77556e-16, 1.25, 0, 0, -1, 2.22045e-16, 0, 75, 4.59243e-15, 75, 1)'},
|
||||
{at: 0.5, expect: 'matrix3d(1.5, 0, 0, 0, 0, 3.33067e-16, 1.5, 0, 0, -1, 2.22045e-16, 0, 50, 3.06162e-15, 50, 1)'},
|
||||
{at: 0.75, expect: 'matrix3d(1.75, 0, 0, 0, 0, 3.88578e-16, 1.75, 0, 0, -1, 2.22045e-16, 0, 25, 1.53081e-15, 25, 1)'},
|
||||
{at: 1, expect: 'matrix3d(2, 0, 0, 0, 0, 1.22465e-16, 2, 0, 0, -1, 6.12323e-17, 0, 0, 0, 0, 1)'},
|
||||
{at: 1.5, expect: 'matrix3d(2.5, 0, 0, 0, 0, 5.55112e-16, 2.5, 0, 0, -1, 2.22045e-16, 0, -50, -3.06162e-15, -50, 1)'},
|
||||
]);
|
||||
|
||||
// Force a fallback to matrix interpolation.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateX(45deg)',
|
||||
addFrom: 'scaleX(1)',
|
||||
addTo: 'rotateY(360deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateX(45deg)'},
|
||||
{at: 0, expect: 'rotateX(45deg)'},
|
||||
{at: 0.25, expect: 'rotateX(45deg)'},
|
||||
{at: 0.5, expect: 'rotateX(45deg)'},
|
||||
{at: 0.75, expect: 'rotateX(45deg)'},
|
||||
{at: 1, expect: 'rotateX(45deg)'},
|
||||
{at: 1.5, expect: 'rotateX(45deg)'},
|
||||
]);
|
||||
|
||||
// ------------------ Accumulation -----------------
|
||||
|
||||
// TODO(smcgruer): Add tests for accumulation behaviors.
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform-matrix composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="transform-matrix 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// For matrix and matrix3d, addition is defined as concatenation whilst
|
||||
// accumulation works by decomposing the matrix and then accumulating the
|
||||
// decomposed functions. We can therefore test the difference between the
|
||||
// two by mixing functions such that a naive multiplication would look
|
||||
// different than the accumulation behavior.
|
||||
//
|
||||
// Note that due to the complexities of decomposition the test space here is
|
||||
// huge; we cover some basic cases and hope that the tests for the individual
|
||||
// functions provide a lot of the remaining coverage.
|
||||
|
||||
// Creates a matrix3d function, encoding the passed rotation and translation.
|
||||
// Note that the translate will not be affected by the rotation.
|
||||
function create3dMatrix(x, y, z, radians, translateX) {
|
||||
// Normalize the rotation axes.
|
||||
const length = Math.sqrt(x*x + y*y + z*z);
|
||||
x /= length;
|
||||
y /= length;
|
||||
z /= length;
|
||||
|
||||
const sc = Math.sin(radians / 2) * Math.cos(radians / 2);
|
||||
const sq = Math.sin(radians / 2) * Math.sin(radians / 2);
|
||||
|
||||
// https://drafts.csswg.org/css-transforms-2/#Rotate3dDefined
|
||||
// https://drafts.csswg.org/css-transforms-2/#Translate3dDefined
|
||||
return 'matrix3d(' + [
|
||||
1 - 2 * (y*y + z*z) * sq,
|
||||
2 * (x * y * sq + z * sc),
|
||||
2 * (x * z * sq - y * sc),
|
||||
0,
|
||||
2 * (x * y * sq - z * sc),
|
||||
1 - 2 * (x*x + z*z) * sq,
|
||||
2 * (y * z * sq + x * sc),
|
||||
0,
|
||||
2 * (x * z * sq + y * sc),
|
||||
2 * (y * z * sq - x * sc),
|
||||
1 - 2 * (x*x + y*y) * sq,
|
||||
0,
|
||||
translateX, 0, 0, 1].join() + ')';
|
||||
}
|
||||
|
||||
// ------------ Addition tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
// translateX(100px) rotate(90deg)
|
||||
underlying: 'matrix(0, 1, -1, 0, 100, 0)',
|
||||
// translateX(100px)
|
||||
addFrom: 'matrix(1, 0, 0, 1, 100, 0)',
|
||||
// translateX(200px)
|
||||
addTo: 'matrix(1, 0, 0, 1, 200, 0)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'matrix(0, 1, -1, 0, 100, 50)'},
|
||||
{at: 0, expect: 'matrix(0, 1, -1, 0, 100, 100)'},
|
||||
{at: 0.25, expect: 'matrix(0, 1, -1, 0, 100, 125)'},
|
||||
{at: 0.5, expect: 'matrix(0, 1, -1, 0, 100, 150)'},
|
||||
{at: 0.75, expect: 'matrix(0, 1, -1, 0, 100, 175)'},
|
||||
{at: 1, expect: 'matrix(0, 1, -1, 0, 100, 200)'},
|
||||
{at: 1.5, expect: 'matrix(0, 1, -1, 0, 100, 250)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
// translateX(100px) rotate3d(1, 1, 0, 45deg)
|
||||
underlying: create3dMatrix(1, 1, 0, Math.PI / 4, 100),
|
||||
// translateX(100px)
|
||||
addFrom: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)',
|
||||
// translateX(200px)
|
||||
addTo: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)',
|
||||
}, [
|
||||
// matrix3ds are hard to read; these are the decomposed forms for clarity
|
||||
{at: -0.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(50px)'},
|
||||
{at: 0, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(100px)'},
|
||||
{at: 0.25, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(125px)'},
|
||||
{at: 0.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(150px)'},
|
||||
{at: 0.75, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(175px)'},
|
||||
{at: 1, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(200px)'},
|
||||
{at: 1.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(250px)'},
|
||||
]);
|
||||
|
||||
// Addition of non-invertible matrices is still defined as concatenation so
|
||||
// includes the underlying value.
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
// Non-invertible.
|
||||
underlying: 'matrix(1, 1, 0, 0, 0, 100)',
|
||||
// translateX(100px)
|
||||
addFrom: 'matrix(1, 0, 0, 1, 100, 0)',
|
||||
// translateX(200px)
|
||||
addTo: 'matrix(1, 0, 0, 1, 200, 0)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
|
||||
{at: 0, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
|
||||
{at: 0.25, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
|
||||
{at: 0.5, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
|
||||
{at: 0.75, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
|
||||
{at: 1, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
|
||||
{at: 1.5, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
// translateX(100px)
|
||||
underlying: 'matrix(1, 0, 0, 1, 100, 0)',
|
||||
// Non-invertible
|
||||
addFrom: 'matrix(1, 1, 0, 0, 0, 100)',
|
||||
// translateX(200px)
|
||||
addTo: 'matrix(1, 0, 0, 1, 200, 0)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
|
||||
{at: 0, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
|
||||
{at: 0.25, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
|
||||
{at: 0.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
|
||||
{at: 0.75, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
|
||||
{at: 1, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
|
||||
{at: 1.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
|
||||
]);
|
||||
|
||||
// ------------ Accumulation tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
// translateX(100px) rotate(90deg)
|
||||
underlying: 'matrix(0, 1, -1, 0, 100, 0)',
|
||||
// translateX(100px)
|
||||
accumulateFrom: 'matrix(1, 0, 0, 1, 100, 0)',
|
||||
// translateX(200px)
|
||||
accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'matrix(0, 1, -1, 0, 150, 0)'},
|
||||
{at: 0, expect: 'matrix(0, 1, -1, 0, 200, 0)'},
|
||||
{at: 0.25, expect: 'matrix(0, 1, -1, 0, 225, 0)'},
|
||||
{at: 0.5, expect: 'matrix(0, 1, -1, 0, 250, 0)'},
|
||||
{at: 0.75, expect: 'matrix(0, 1, -1, 0, 275, 0)'},
|
||||
{at: 1, expect: 'matrix(0, 1, -1, 0, 300, 0)'},
|
||||
{at: 1.5, expect: 'matrix(0, 1, -1, 0, 350, 0)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
// translateX(100px) rotate3d(1, 1, 0, 45deg)
|
||||
underlying: create3dMatrix(1, 1, 0, Math.PI / 4, 100),
|
||||
// translateX(100px)
|
||||
accumulateFrom: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)',
|
||||
// translateX(200px)
|
||||
accumulateTo: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)',
|
||||
}, [
|
||||
// matrix3ds are hard to read; these are the decomposed forms for clarity
|
||||
{at: -0.5, expect: 'translateX(150px) rotate3d(1, 1, 0, 45deg)'},
|
||||
{at: 0, expect: 'translateX(200px) rotate3d(1, 1, 0, 45deg)'},
|
||||
{at: 0.25, expect: 'translateX(225px) rotate3d(1, 1, 0, 45deg)'},
|
||||
{at: 0.5, expect: 'translateX(250px) rotate3d(1, 1, 0, 45deg)'},
|
||||
{at: 0.75, expect: 'translateX(275px) rotate3d(1, 1, 0, 45deg)'},
|
||||
{at: 1, expect: 'translateX(300px) rotate3d(1, 1, 0, 45deg)'},
|
||||
{at: 1.5, expect: 'translateX(350px) rotate3d(1, 1, 0, 45deg)'},
|
||||
]);
|
||||
|
||||
// Accumulation of non-invertible matrices falls back to replace behavior.
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
// Non-invertible.
|
||||
underlying: 'matrix(1, 1, 0, 0, 0, 100)',
|
||||
// translateX(100px)
|
||||
accumulateFrom: 'matrix(1, 0, 0, 1, 100, 0)',
|
||||
// translateX(200px)
|
||||
accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'matrix(1, 0, 0, 1, 50, 0)'},
|
||||
{at: 0, expect: 'matrix(1, 0, 0, 1, 100, 0)'},
|
||||
{at: 0.25, expect: 'matrix(1, 0, 0, 1, 125, 0)'},
|
||||
{at: 0.5, expect: 'matrix(1, 0, 0, 1, 150, 0)'},
|
||||
{at: 0.75, expect: 'matrix(1, 0, 0, 1, 175, 0)'},
|
||||
{at: 1, expect: 'matrix(1, 0, 0, 1, 200, 0)'},
|
||||
{at: 1.5, expect: 'matrix(1, 0, 0, 1, 250, 0)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
// translateX(100px)
|
||||
underlying: 'matrix(1, 0, 0, 1, 100, 0)',
|
||||
// Non-invertible
|
||||
accumulateFrom: 'matrix(1, 1, 0, 0, 0, 100)',
|
||||
// translateX(200px)
|
||||
accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
|
||||
{at: 0, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
|
||||
{at: 0.25, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
|
||||
{at: 0.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
|
||||
{at: 0.75, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
|
||||
{at: 1, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
|
||||
{at: 1.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform-perspective composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions">
|
||||
<meta name="assert" content="transform-perspective 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// Addition and accumulation of perspective values are very similar, but not
|
||||
// identical. We can test the difference by constructing a scenario where a
|
||||
// perspective parameter would go negative in one case (and thus be clamped
|
||||
// to 0), and would not go negative in the other case.
|
||||
//
|
||||
// In the test below, the values differ at 1.5 progress. The reason for this
|
||||
// is that at 1.5 progress, the addition case (which uses concatenation)
|
||||
// computes to:
|
||||
//
|
||||
// perspective(10px) perspective(-50px)
|
||||
//
|
||||
// Since perspective cannot go negative, this is clamped to:
|
||||
//
|
||||
// perspective(10px) identity
|
||||
//
|
||||
// The accumulation case, on the other hand, combines the components
|
||||
// and so ends up blending from perspective(5px) to perspective(8.33...px) at
|
||||
// 1.5 progress, which results in perspective(12.5px) - this is what you would
|
||||
// get with addition too, if not for the clamping behavior.
|
||||
|
||||
// ------------ Addition tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'perspective(10px)',
|
||||
addFrom: 'perspective(10px)',
|
||||
addTo: 'perspective(50px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'perspective(4.12px)'},
|
||||
{at: 0, expect: 'perspective(5px)'},
|
||||
{at: 0.25, expect: 'perspective(5.45px)'},
|
||||
{at: 0.5, expect: 'perspective(6.15px)'},
|
||||
{at: 0.75, expect: 'perspective(7.06px)'},
|
||||
{at: 1, expect: 'perspective(8.33px)'},
|
||||
{at: 1.5, expect: 'perspective(10px)'},
|
||||
]);
|
||||
|
||||
// ------------ Accumulation tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'perspective(10px)',
|
||||
accumulateFrom: 'perspective(10px)',
|
||||
accumulateTo: 'perspective(50px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'perspective(4.12px)'},
|
||||
{at: 0, expect: 'perspective(5px)'},
|
||||
{at: 0.25, expect: 'perspective(5.45px)'},
|
||||
{at: 0.5, expect: 'perspective(6.15px)'},
|
||||
{at: 0.75, expect: 'perspective(7.06px)'},
|
||||
{at: 1, expect: 'perspective(8.33px)'},
|
||||
{at: 1.5, expect: 'perspective(12.5px)'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform-rotate composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#funcdef-transform-rotate">
|
||||
<meta name="assert" content="transform-rotate 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// ------------ Addition tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateX(20deg)',
|
||||
addFrom: 'rotateX(40deg)',
|
||||
addTo: 'rotateX(60deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateX(50deg)'},
|
||||
{at: 0, expect: 'rotateX(60deg)'},
|
||||
{at: 0.25, expect: 'rotateX(65deg)'},
|
||||
{at: 0.5, expect: 'rotateX(70deg)'},
|
||||
{at: 0.75, expect: 'rotateX(75deg)'},
|
||||
{at: 1, expect: 'rotateX(80deg)'},
|
||||
{at: 1.5, expect: 'rotateX(90deg)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateY(20deg)',
|
||||
addFrom: 'rotateY(40deg)',
|
||||
addTo: 'rotateY(60deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateY(50deg)'},
|
||||
{at: 0, expect: 'rotateY(60deg)'},
|
||||
{at: 0.25, expect: 'rotateY(65deg)'},
|
||||
{at: 0.5, expect: 'rotateY(70deg)'},
|
||||
{at: 0.75, expect: 'rotateY(75deg)'},
|
||||
{at: 1, expect: 'rotateY(80deg)'},
|
||||
{at: 1.5, expect: 'rotateY(90deg)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateZ(20deg)',
|
||||
addFrom: 'rotateZ(40deg)',
|
||||
addTo: 'rotateZ(60deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateZ(50deg)'},
|
||||
{at: 0, expect: 'rotateZ(60deg)'},
|
||||
{at: 0.25, expect: 'rotateZ(65deg)'},
|
||||
{at: 0.5, expect: 'rotateZ(70deg)'},
|
||||
{at: 0.75, expect: 'rotateZ(75deg)'},
|
||||
{at: 1, expect: 'rotateZ(80deg)'},
|
||||
{at: 1.5, expect: 'rotateZ(90deg)'},
|
||||
]);
|
||||
|
||||
// When testing rotate functions in isolation, the additive and accumulation
|
||||
// behaviors are functionally identical. This test includes a skew to ensure
|
||||
// both methods are implemented; add should append the from/to after the skew.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotate(45deg) skew(10deg, 20deg)',
|
||||
addFrom: 'rotate(45deg)',
|
||||
addTo: 'rotate(225deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(-45deg)'},
|
||||
{at: 0, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(45deg)'},
|
||||
{at: 0.25, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(90deg)'},
|
||||
{at: 0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(135deg)'},
|
||||
{at: 0.75, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(180deg)'},
|
||||
{at: 1, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(225deg)'},
|
||||
{at: 1.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(315deg)'},
|
||||
]);
|
||||
// ------------ Accumulation tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateX(20deg)',
|
||||
accumulateFrom: 'rotateX(40deg)',
|
||||
accumulateTo: 'rotateX(60deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateX(50deg)'},
|
||||
{at: 0, expect: 'rotateX(60deg)'},
|
||||
{at: 0.25, expect: 'rotateX(65deg)'},
|
||||
{at: 0.5, expect: 'rotateX(70deg)'},
|
||||
{at: 0.75, expect: 'rotateX(75deg)'},
|
||||
{at: 1, expect: 'rotateX(80deg)'},
|
||||
{at: 1.5, expect: 'rotateX(90deg)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateY(20deg)',
|
||||
accumulateFrom: 'rotateY(40deg)',
|
||||
accumulateTo: 'rotateY(60deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateY(50deg)'},
|
||||
{at: 0, expect: 'rotateY(60deg)'},
|
||||
{at: 0.25, expect: 'rotateY(65deg)'},
|
||||
{at: 0.5, expect: 'rotateY(70deg)'},
|
||||
{at: 0.75, expect: 'rotateY(75deg)'},
|
||||
{at: 1, expect: 'rotateY(80deg)'},
|
||||
{at: 1.5, expect: 'rotateY(90deg)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateZ(20deg)',
|
||||
accumulateFrom: 'rotateZ(40deg)',
|
||||
accumulateTo: 'rotateZ(60deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotateZ(50deg)'},
|
||||
{at: 0, expect: 'rotateZ(60deg)'},
|
||||
{at: 0.25, expect: 'rotateZ(65deg)'},
|
||||
{at: 0.5, expect: 'rotateZ(70deg)'},
|
||||
{at: 0.75, expect: 'rotateZ(75deg)'},
|
||||
{at: 1, expect: 'rotateZ(80deg)'},
|
||||
{at: 1.5, expect: 'rotateZ(90deg)'},
|
||||
]);
|
||||
|
||||
// The rotate functions all share the same primitive type (rotate3d), so can be
|
||||
// accumulated between. If primitive type matching is not properly being
|
||||
// performed, this test would likely fail with a fallback to replace behavior.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotateX(45deg)',
|
||||
accumulateFrom: 'rotateY(30deg)',
|
||||
accumulateTo: 'rotateY(70deg)',
|
||||
}, [
|
||||
// Due to how rotation is accumulated (addition of underlying angles), the
|
||||
// behavior is identical to concatenating the components. The expectations
|
||||
// are expressed as concatenations for readability.
|
||||
{at: -0.5, expect: 'rotateX(45deg) rotateY(10deg)'},
|
||||
{at: 0, expect: 'rotateX(45deg) rotateY(30deg)'},
|
||||
{at: 0.25, expect: 'rotateX(45deg) rotateY(40deg)'},
|
||||
{at: 0.5, expect: 'rotateX(45deg) rotateY(50deg)'},
|
||||
{at: 0.75, expect: 'rotateX(45deg) rotateY(60deg)'},
|
||||
{at: 1, expect: 'rotateX(45deg) rotateY(70deg)'},
|
||||
{at: 1.5, expect: 'rotateX(45deg) rotateY(90deg)'},
|
||||
]);
|
||||
|
||||
// When testing rotate functions in isolation, the additive and accumulation
|
||||
// behaviors are functionally identical. This test includes a skew to ensure
|
||||
// both methods are implemented; accumulate should combine the rotate before
|
||||
// the skew.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'rotate(45deg) skew(10deg, 20deg)',
|
||||
accumulateFrom: 'rotate(45deg)',
|
||||
accumulateTo: 'rotate(225deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'rotate(0deg) skew(10deg, 20deg)'},
|
||||
{at: 0, expect: 'rotate(90deg) skew(10deg, 20deg)'},
|
||||
{at: 0.25, expect: 'rotate(135deg) skew(10deg, 20deg)'},
|
||||
{at: 0.5, expect: 'rotate(180deg) skew(10deg, 20deg)'},
|
||||
{at: 0.75, expect: 'rotate(225deg) skew(10deg, 20deg)'},
|
||||
{at: 1, expect: 'rotate(270deg) skew(10deg, 20deg)'},
|
||||
{at: 1.5, expect: 'rotate(360deg) skew(10deg, 20deg)'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform-scale composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions">
|
||||
<meta name="assert" content="transform-scale 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// Addition (aka concatenation) of scale functions results in multiplying their
|
||||
// values (scale(2) scale(3) == scale(6)), whereas accumulation does a 1-based
|
||||
// sum of the components (accumulate(scale(2), scale(3)) == scale(2 + 3 - 1) ==
|
||||
// scale(4)).
|
||||
|
||||
// ------------ Addition tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'scaleX(2)',
|
||||
addFrom: 'scaleX(3)',
|
||||
addTo: 'scaleX(4)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'scaleX(5)'},
|
||||
{at: 0, expect: 'scaleX(6)'},
|
||||
{at: 0.25, expect: 'scaleX(6.5)'},
|
||||
{at: 0.5, expect: 'scaleX(7)'},
|
||||
{at: 0.75, expect: 'scaleX(7.5)'},
|
||||
{at: 1, expect: 'scaleX(8)'},
|
||||
{at: 1.5, expect: 'scaleX(9)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'scaleY(2)',
|
||||
addFrom: 'scaleY(3)',
|
||||
addTo: 'scaleY(4)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'scaleY(5)'},
|
||||
{at: 0, expect: 'scaleY(6)'},
|
||||
{at: 0.25, expect: 'scaleY(6.5)'},
|
||||
{at: 0.5, expect: 'scaleY(7)'},
|
||||
{at: 0.75, expect: 'scaleY(7.5)'},
|
||||
{at: 1, expect: 'scaleY(8)'},
|
||||
{at: 1.5, expect: 'scaleY(9)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'scaleZ(2)',
|
||||
addFrom: 'scaleZ(3)',
|
||||
addTo: 'scaleZ(4)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'scaleZ(5)'},
|
||||
{at: 0, expect: 'scaleZ(6)'},
|
||||
{at: 0.25, expect: 'scaleZ(6.5)'},
|
||||
{at: 0.5, expect: 'scaleZ(7)'},
|
||||
{at: 0.75, expect: 'scaleZ(7.5)'},
|
||||
{at: 1, expect: 'scaleZ(8)'},
|
||||
{at: 1.5, expect: 'scaleZ(9)'},
|
||||
]);
|
||||
|
||||
// ------------ Accumulation tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'scaleX(2)',
|
||||
accumulateFrom: 'scaleX(3)',
|
||||
accumulateTo: 'scaleX(4)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'scaleX(3.5)'},
|
||||
{at: 0, expect: 'scaleX(4)'},
|
||||
{at: 0.25, expect: 'scaleX(4.25)'},
|
||||
{at: 0.5, expect: 'scaleX(4.5)'},
|
||||
{at: 0.75, expect: 'scaleX(4.75)'},
|
||||
{at: 1, expect: 'scaleX(5)'},
|
||||
{at: 1.5, expect: 'scaleX(5.5)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'scaleY(2)',
|
||||
accumulateFrom: 'scaleY(3)',
|
||||
accumulateTo: 'scaleY(4)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'scaleY(3.5)'},
|
||||
{at: 0, expect: 'scaleY(4)'},
|
||||
{at: 0.25, expect: 'scaleY(4.25)'},
|
||||
{at: 0.5, expect: 'scaleY(4.5)'},
|
||||
{at: 0.75, expect: 'scaleY(4.75)'},
|
||||
{at: 1, expect: 'scaleY(5)'},
|
||||
{at: 1.5, expect: 'scaleY(5.5)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'scaleZ(2)',
|
||||
accumulateFrom: 'scaleZ(3)',
|
||||
accumulateTo: 'scaleZ(4)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'scaleZ(3.5)'},
|
||||
{at: 0, expect: 'scaleZ(4)'},
|
||||
{at: 0.25, expect: 'scaleZ(4.25)'},
|
||||
{at: 0.5, expect: 'scaleZ(4.5)'},
|
||||
{at: 0.75, expect: 'scaleZ(4.75)'},
|
||||
{at: 1, expect: 'scaleZ(5)'},
|
||||
{at: 1.5, expect: 'scaleZ(5.5)'},
|
||||
]);
|
||||
|
||||
// The scale functions all share the same primitive type (scale3d), so can be
|
||||
// accumulated between.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'scale(2, 4)',
|
||||
accumulateFrom: 'scaleZ(3)',
|
||||
accumulateTo: 'scaleZ(4)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'scale3d(2, 4, 2.5)'},
|
||||
{at: 0, expect: 'scale3d(2, 4, 3)'},
|
||||
{at: 0.25, expect: 'scale3d(2, 4, 3.25)'},
|
||||
{at: 0.5, expect: 'scale3d(2, 4, 3.5)'},
|
||||
{at: 0.75, expect: 'scale3d(2, 4, 3.75)'},
|
||||
{at: 1, expect: 'scale3d(2, 4, 4)'},
|
||||
{at: 1.5, expect: 'scale3d(2, 4, 4.5)'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform-skew composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions">
|
||||
<meta name="assert" content="transform-skew 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// Addition (aka concatenation) of two skew functions skew(a) and skew(b)
|
||||
// results in computing tan(a) + tan(b), whereas accumulation results in summing
|
||||
// the components to get tan(a + b).
|
||||
|
||||
// ------------ Addition tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'skewX(10deg)',
|
||||
addFrom: 'skewX(30deg)',
|
||||
addTo: 'skewX(50deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'skewX(10deg) skewX(20deg)'},
|
||||
{at: 0, expect: 'skewX(10deg) skewX(30deg)'},
|
||||
{at: 0.25, expect: 'skewX(10deg) skewX(35deg)'},
|
||||
{at: 0.5, expect: 'skewX(10deg) skewX(40deg)'},
|
||||
{at: 0.75, expect: 'skewX(10deg) skewX(45deg)'},
|
||||
{at: 1, expect: 'skewX(10deg) skewX(50deg)'},
|
||||
{at: 1.5, expect: 'skewX(10deg) skewX(60deg)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'skewY(10deg)',
|
||||
addFrom: 'skewY(30deg)',
|
||||
addTo: 'skewY(50deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'skewY(10deg) skewY(20deg)'},
|
||||
{at: 0, expect: 'skewY(10deg) skewY(30deg)'},
|
||||
{at: 0.25, expect: 'skewY(10deg) skewY(35deg)'},
|
||||
{at: 0.5, expect: 'skewY(10deg) skewY(40deg)'},
|
||||
{at: 0.75, expect: 'skewY(10deg) skewY(45deg)'},
|
||||
{at: 1, expect: 'skewY(10deg) skewY(50deg)'},
|
||||
{at: 1.5, expect: 'skewY(10deg) skewY(60deg)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'skew(10deg, 20deg)',
|
||||
addFrom: 'skew(30deg, 10deg)',
|
||||
addTo: 'skew(50deg, 50deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'skew(10deg, 20deg) skew(20deg, -10deg)'},
|
||||
{at: 0, expect: 'skew(10deg, 20deg) skew(30deg, 10deg)'},
|
||||
{at: 0.25, expect: 'skew(10deg, 20deg) skew(35deg, 20deg)'},
|
||||
{at: 0.5, expect: 'skew(10deg, 20deg) skew(40deg, 30deg)'},
|
||||
{at: 0.75, expect: 'skew(10deg, 20deg) skew(45deg, 40deg)'},
|
||||
{at: 1, expect: 'skew(10deg, 20deg) skew(50deg, 50deg)'},
|
||||
{at: 1.5, expect: 'skew(10deg, 20deg) skew(60deg, 70deg)'},
|
||||
]);
|
||||
|
||||
// ------------ Accumulation tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'skewX(45deg)',
|
||||
accumulateFrom: 'skewX(30deg)',
|
||||
accumulateTo: 'skewX(70deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'skewX(55deg)'},
|
||||
{at: 0, expect: 'skewX(75deg)'},
|
||||
{at: 0.25, expect: 'skewX(85deg)'},
|
||||
{at: 0.5, expect: 'skewX(95deg)'},
|
||||
{at: 0.75, expect: 'skewX(105deg)'},
|
||||
{at: 1, expect: 'skewX(115deg)'},
|
||||
{at: 1.5, expect: 'skewX(135deg)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'skewY(45deg)',
|
||||
accumulateFrom: 'skewY(30deg)',
|
||||
accumulateTo: 'skewY(70deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'skewY(55deg)'},
|
||||
{at: 0, expect: 'skewY(75deg)'},
|
||||
{at: 0.25, expect: 'skewY(85deg)'},
|
||||
{at: 0.5, expect: 'skewY(95deg)'},
|
||||
{at: 0.75, expect: 'skewY(105deg)'},
|
||||
{at: 1, expect: 'skewY(115deg)'},
|
||||
{at: 1.5, expect: 'skewY(135deg)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'skew(10deg, 45deg)',
|
||||
accumulateFrom: 'skew(20deg, 30deg)',
|
||||
accumulateTo: 'skew(40deg, 70deg)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'skew(20deg, 55deg)'},
|
||||
{at: 0, expect: 'skew(30deg, 75deg)'},
|
||||
{at: 0.25, expect: 'skew(35deg, 85deg)'},
|
||||
{at: 0.5, expect: 'skew(40deg, 95deg)'},
|
||||
{at: 0.75, expect: 'skew(45deg, 105deg)'},
|
||||
{at: 1, expect: 'skew(50deg, 115deg)'},
|
||||
{at: 1.5, expect: 'skew(60deg, 135deg)'},
|
||||
]);
|
||||
|
||||
// The skew{X,Y} functions DO NOT share the same primitive type, so cannot be
|
||||
// accumlated between directly. Instead, they fall back to matrix accumulation,
|
||||
// which this tests for.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'skewX(45deg)',
|
||||
accumulateFrom: 'skewY(45deg)',
|
||||
accumulateTo: 'skewY(45deg)',
|
||||
}, [
|
||||
// Note that this is not equivalent to any form of combined skews.
|
||||
{at: 0.5, expect: 'matrix(1, 1, 0.5, 1.5, 0, 0)'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform-translate composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions">
|
||||
<meta name="assert" content="transform-translate 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>
|
||||
|
||||
<body>
|
||||
<script src="../interpolation/resources/interpolation-test.js"></script>
|
||||
<script>
|
||||
// ------------ Addition tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'translate(10px, 20px)',
|
||||
addFrom: 'translate(100px, 200px)',
|
||||
addTo: 'translate(200px, 400px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'translate(60px, 120px)'},
|
||||
{at: 0, expect: 'translate(110px, 220px)'},
|
||||
{at: 0.25, expect: 'translate(135px, 270px)'},
|
||||
{at: 0.5, expect: 'translate(160px, 320px)'},
|
||||
{at: 0.75, expect: 'translate(185px, 370px)'},
|
||||
{at: 1, expect: 'translate(210px, 420px)'},
|
||||
{at: 1.5, expect: 'translate(260px, 520px)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'translate(10px, 20px)',
|
||||
addFrom: 'translate(100px, 200px)',
|
||||
replaceTo: 'translate(210px, 420px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'translate(60px, 120px)'},
|
||||
{at: 0, expect: 'translate(110px, 220px)'},
|
||||
{at: 0.25, expect: 'translate(135px, 270px)'},
|
||||
{at: 0.5, expect: 'translate(160px, 320px)'},
|
||||
{at: 0.75, expect: 'translate(185px, 370px)'},
|
||||
{at: 1, expect: 'translate(210px, 420px)'},
|
||||
{at: 1.5, expect: 'translate(260px, 520px)'},
|
||||
]);
|
||||
|
||||
// When testing translate functions in isolation, the additive and accumulation
|
||||
// behaviors are functionally identical. This test includes a rotate to ensure
|
||||
// both methods are implemented; add should append the from/to after the rotate.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'translateX(100px) rotate(90deg)',
|
||||
addFrom: 'translateX(100px)',
|
||||
addTo: 'translateX(200px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'translateX(100px) rotate(90deg) translateX(50px)'},
|
||||
{at: 0, expect: 'translateX(100px) rotate(90deg) translateX(100px)'},
|
||||
{at: 0.25, expect: 'translateX(100px) rotate(90deg) translateX(125px)'},
|
||||
{at: 0.5, expect: 'translateX(100px) rotate(90deg) translateX(150px)'},
|
||||
{at: 0.75, expect: 'translateX(100px) rotate(90deg) translateX(175px)'},
|
||||
{at: 1, expect: 'translateX(100px) rotate(90deg) translateX(200px)'},
|
||||
{at: 1.5, expect: 'translateX(100px) rotate(90deg) translateX(250px)'},
|
||||
]);
|
||||
|
||||
// ------------ Accumulation tests --------------
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'translateX(100px)',
|
||||
accumulateFrom: 'translateX(50px)',
|
||||
accumulateTo: 'translateX(250px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'translateX(50px)'},
|
||||
{at: 0, expect: 'translateX(150px)'},
|
||||
{at: 0.25, expect: 'translateX(200px)'},
|
||||
{at: 0.5, expect: 'translateX(250px)'},
|
||||
{at: 0.75, expect: 'translateX(300px)'},
|
||||
{at: 1, expect: 'translateX(350px)'},
|
||||
{at: 1.5, expect: 'translateX(450px)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'translateY(100px)',
|
||||
accumulateFrom: 'translateY(50px)',
|
||||
accumulateTo: 'translateY(250px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'translateY(50px)'},
|
||||
{at: 0, expect: 'translateY(150px)'},
|
||||
{at: 0.25, expect: 'translateY(200px)'},
|
||||
{at: 0.5, expect: 'translateY(250px)'},
|
||||
{at: 0.75, expect: 'translateY(300px)'},
|
||||
{at: 1, expect: 'translateY(350px)'},
|
||||
{at: 1.5, expect: 'translateY(450px)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'translateZ(100px)',
|
||||
accumulateFrom: 'translateZ(50px)',
|
||||
accumulateTo: 'translateZ(250px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'translateZ(50px)'},
|
||||
{at: 0, expect: 'translateZ(150px)'},
|
||||
{at: 0.25, expect: 'translateZ(200px)'},
|
||||
{at: 0.5, expect: 'translateZ(250px)'},
|
||||
{at: 0.75, expect: 'translateZ(300px)'},
|
||||
{at: 1, expect: 'translateZ(350px)'},
|
||||
{at: 1.5, expect: 'translateZ(450px)'},
|
||||
]);
|
||||
|
||||
// The translate functions all share the same primitive type (translate3d), so
|
||||
// can be accumulated between.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'translate(100px, 50px)',
|
||||
accumulateFrom: 'translateZ(50px)',
|
||||
accumulateTo: 'translateZ(250px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'translate3d(100px, 50px, -50px)'},
|
||||
{at: 0, expect: 'translate3d(100px, 50px, 50px)'},
|
||||
{at: 0.25, expect: 'translate3d(100px, 50px, 100px)'},
|
||||
{at: 0.5, expect: 'translate3d(100px, 50px, 150px)'},
|
||||
{at: 0.75, expect: 'translate3d(100px, 50px, 200px)'},
|
||||
{at: 1, expect: 'translate3d(100px, 50px, 250px)'},
|
||||
{at: 1.5, expect: 'translate3d(100px, 50px, 350px)'},
|
||||
]);
|
||||
|
||||
// When testing translate functions in isolation, the additive and accumulation
|
||||
// behaviors are functionally identical. This test includes a rotate to ensure
|
||||
// both methods are implemented; accumulate should combine the transform before
|
||||
// the rotate.
|
||||
test_composition({
|
||||
property: 'transform',
|
||||
underlying: 'translateX(100px) rotate(90deg)',
|
||||
accumulateFrom: 'translateX(100px)',
|
||||
accumulateTo: 'translateX(200px)',
|
||||
}, [
|
||||
{at: -0.5, expect: 'translateX(150px) rotate(90deg)'},
|
||||
{at: 0, expect: 'translateX(200px) rotate(90deg)'},
|
||||
{at: 0.25, expect: 'translateX(225px) rotate(90deg)'},
|
||||
{at: 0.5, expect: 'translateX(250px) rotate(90deg)'},
|
||||
{at: 0.75, expect: 'translateX(275px) rotate(90deg)'},
|
||||
{at: 1, expect: 'translateX(300px) rotate(90deg)'},
|
||||
{at: 1.5, expect: 'translateX(350px) rotate(90deg)'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>translate composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||
<meta name="assert" content="translate supports <length> and <percentage> animation.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: '100px 200px 300px',
|
||||
addFrom: '-50px 50%',
|
||||
addTo: '100%',
|
||||
}, [
|
||||
{at: -1, expect: '-100% calc(200px + 100%) 300px'},
|
||||
{at: 0, expect: 'calc(50px + 0%) calc(200px + 50%) 300px'},
|
||||
{at: 0.25, expect: 'calc(62.5px + 25%) calc(200px + 37.5%) 300px'},
|
||||
{at: 0.75, expect: 'calc(87.5px + 75%) calc(200px + 12.5%) 300px'},
|
||||
{at: 1, expect: 'calc(100px + 100%) calc(200px + 0%) 300px'},
|
||||
{at: 2, expect: 'calc(150px + 200%) calc(200px - 50%) 300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: '100px 200px 300px',
|
||||
addFrom: '50% 100px',
|
||||
replaceTo: '200px 50% 100px',
|
||||
}, [
|
||||
{at: -1, expect: '100% calc(600px - 50%) 500px'},
|
||||
{at: 0, expect: 'calc(100px + 50%) calc(300px + 0%) 300px'},
|
||||
{at: 0.25, expect: 'calc(125px + 37.5%) calc(225px + 12.5%) 250px'},
|
||||
{at: 0.75, expect: 'calc(175px + 12.5%) calc(75px + 37.5%) 150px'},
|
||||
{at: 1, expect: 'calc(200px + 0%) 50% 100px'},
|
||||
{at: 2, expect: 'calc(300px - 50%) calc(-300px + 100%) -100px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: '100px 200px 300px',
|
||||
replaceFrom: '50% 100px',
|
||||
addTo: '200px 50% 100px',
|
||||
}, [
|
||||
{at: -1, expect: 'calc(-300px + 100%) -50% -400px'},
|
||||
{at: 0, expect: '50% calc(100px + 0%)'},
|
||||
{at: 0.25, expect: 'calc(75px + 37.5%) calc(125px + 12.5%) 100px'},
|
||||
{at: 0.75, expect: 'calc(225px + 12.5%) calc(175px + 37.5%) 300px'},
|
||||
{at: 1, expect: 'calc(300px + 0%) calc(200px + 50%) 400px'},
|
||||
{at: 2, expect: 'calc(600px - 50%) calc(300px + 100%) 800px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: 'none',
|
||||
replaceFrom: 'none',
|
||||
addTo: '100px',
|
||||
}, [
|
||||
{at: -1, expect: '-100px'},
|
||||
{at: 0, expect: 'none'},
|
||||
{at: 0.25, expect: '25px'},
|
||||
{at: 0.75, expect: '75px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 2, expect: '200px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: 'none',
|
||||
addFrom: 'none',
|
||||
addTo: '100px',
|
||||
}, [
|
||||
{at: -1, expect: '-100px'},
|
||||
{at: 0, expect: 'none'},
|
||||
{at: 0.25, expect: '25px'},
|
||||
{at: 0.75, expect: '75px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 2, expect: '200px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: 'none',
|
||||
replaceFrom: '0px 40px 60px',
|
||||
replaceTo: 'none',
|
||||
}, [
|
||||
{at: -1, expect: '0px 80px 120px'},
|
||||
{at: 0, expect: '0px 40px 60px'},
|
||||
{at: 0.25, expect: '0px 30px 45px'},
|
||||
{at: 0.75, expect: '0px 10px 15px'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 2, expect: '0px -40px -60px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: 'none',
|
||||
replaceFrom: '0px 40px 60px',
|
||||
addTo: 'none',
|
||||
}, [
|
||||
{at: -1, expect: '0px 80px 120px'},
|
||||
{at: 0, expect: '0px 40px 60px'},
|
||||
{at: 0.25, expect: '0px 30px 45px'},
|
||||
{at: 0.75, expect: '0px 10px 15px'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 2, expect: '0px -40px -60px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: '80px 20px',
|
||||
addFrom: 'none',
|
||||
replaceTo: '0px 40px 60px',
|
||||
}, [
|
||||
{at: -1, expect: '160px 0px -60px'},
|
||||
{at: 0, expect: '80px 20px'},
|
||||
{at: 0.25, expect: '60px 25px 15px'},
|
||||
{at: 0.5, expect: '40px 30px 30px'},
|
||||
{at: 0.75, expect: '20px 35px 45px'},
|
||||
{at: 1, expect: '0px 40px 60px'},
|
||||
{at: 2, expect: '-80px 60px 120px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'translate',
|
||||
underlying: '80px 20px',
|
||||
addFrom: '0px 40px 60px',
|
||||
replaceTo: 'none',
|
||||
}, [
|
||||
{at: -1, expect: '160px 120px 120px'},
|
||||
{at: 0, expect: '80px 60px 60px'},
|
||||
{at: 0.25, expect: '60px 45px 45px'},
|
||||
{at: 0.5, expect: '40px 30px 30px'},
|
||||
{at: 0.75, expect: '20px 15px 15px'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 2, expect: '-80px -60px -60px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue