<!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>
Codebase Browser
chromium