transform-skew-composition.html (4061B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform-skew composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions"> 5 <meta name="assert" content="transform-skew supports animation as a transform list"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <body> 12 <script> 13 // Addition (aka concatenation) of two skew functions skew(a) and skew(b) 14 // results in computing tan(a) + tan(b), whereas accumulation results in summing 15 // the components to get tan(a + b). 16 17 // ------------ Addition tests -------------- 18 19 test_composition({ 20 property: 'transform', 21 underlying: 'skewX(10deg)', 22 addFrom: 'skewX(30deg)', 23 addTo: 'skewX(50deg)', 24 }, [ 25 {at: -0.5, expect: 'skewX(10deg) skewX(20deg)'}, 26 {at: 0, expect: 'skewX(10deg) skewX(30deg)'}, 27 {at: 0.25, expect: 'skewX(10deg) skewX(35deg)'}, 28 {at: 0.5, expect: 'skewX(10deg) skewX(40deg)'}, 29 {at: 0.75, expect: 'skewX(10deg) skewX(45deg)'}, 30 {at: 1, expect: 'skewX(10deg) skewX(50deg)'}, 31 {at: 1.5, expect: 'skewX(10deg) skewX(60deg)'}, 32 ]); 33 34 test_composition({ 35 property: 'transform', 36 underlying: 'skewY(10deg)', 37 addFrom: 'skewY(30deg)', 38 addTo: 'skewY(50deg)', 39 }, [ 40 {at: -0.5, expect: 'skewY(10deg) skewY(20deg)'}, 41 {at: 0, expect: 'skewY(10deg) skewY(30deg)'}, 42 {at: 0.25, expect: 'skewY(10deg) skewY(35deg)'}, 43 {at: 0.5, expect: 'skewY(10deg) skewY(40deg)'}, 44 {at: 0.75, expect: 'skewY(10deg) skewY(45deg)'}, 45 {at: 1, expect: 'skewY(10deg) skewY(50deg)'}, 46 {at: 1.5, expect: 'skewY(10deg) skewY(60deg)'}, 47 ]); 48 49 test_composition({ 50 property: 'transform', 51 underlying: 'skew(10deg, 20deg)', 52 addFrom: 'skew(30deg, 10deg)', 53 addTo: 'skew(50deg, 50deg)', 54 }, [ 55 {at: -0.5, expect: 'skew(10deg, 20deg) skew(20deg, -10deg)'}, 56 {at: 0, expect: 'skew(10deg, 20deg) skew(30deg, 10deg)'}, 57 {at: 0.25, expect: 'skew(10deg, 20deg) skew(35deg, 20deg)'}, 58 {at: 0.5, expect: 'skew(10deg, 20deg) skew(40deg, 30deg)'}, 59 {at: 0.75, expect: 'skew(10deg, 20deg) skew(45deg, 40deg)'}, 60 {at: 1, expect: 'skew(10deg, 20deg) skew(50deg, 50deg)'}, 61 {at: 1.5, expect: 'skew(10deg, 20deg) skew(60deg, 70deg)'}, 62 ]); 63 64 // ------------ Accumulation tests -------------- 65 66 test_composition({ 67 property: 'transform', 68 underlying: 'skewX(45deg)', 69 accumulateFrom: 'skewX(30deg)', 70 accumulateTo: 'skewX(70deg)', 71 }, [ 72 {at: -0.5, expect: 'skewX(55deg)'}, 73 {at: 0, expect: 'skewX(75deg)'}, 74 {at: 0.25, expect: 'skewX(85deg)'}, 75 {at: 0.5, expect: 'skewX(95deg)'}, 76 {at: 0.75, expect: 'skewX(105deg)'}, 77 {at: 1, expect: 'skewX(115deg)'}, 78 {at: 1.5, expect: 'skewX(135deg)'}, 79 ]); 80 81 test_composition({ 82 property: 'transform', 83 underlying: 'skewY(45deg)', 84 accumulateFrom: 'skewY(30deg)', 85 accumulateTo: 'skewY(70deg)', 86 }, [ 87 {at: -0.5, expect: 'skewY(55deg)'}, 88 {at: 0, expect: 'skewY(75deg)'}, 89 {at: 0.25, expect: 'skewY(85deg)'}, 90 {at: 0.5, expect: 'skewY(95deg)'}, 91 {at: 0.75, expect: 'skewY(105deg)'}, 92 {at: 1, expect: 'skewY(115deg)'}, 93 {at: 1.5, expect: 'skewY(135deg)'}, 94 ]); 95 96 test_composition({ 97 property: 'transform', 98 underlying: 'skew(10deg, 45deg)', 99 accumulateFrom: 'skew(20deg, 30deg)', 100 accumulateTo: 'skew(40deg, 70deg)', 101 }, [ 102 {at: -0.5, expect: 'skew(20deg, 55deg)'}, 103 {at: 0, expect: 'skew(30deg, 75deg)'}, 104 {at: 0.25, expect: 'skew(35deg, 85deg)'}, 105 {at: 0.5, expect: 'skew(40deg, 95deg)'}, 106 {at: 0.75, expect: 'skew(45deg, 105deg)'}, 107 {at: 1, expect: 'skew(50deg, 115deg)'}, 108 {at: 1.5, expect: 'skew(60deg, 135deg)'}, 109 ]); 110 111 // The skew{X,Y} functions DO NOT share the same primitive type, so cannot be 112 // accumlated between directly. Instead, they fall back to matrix accumulation, 113 // which this tests for. 114 test_composition({ 115 property: 'transform', 116 underlying: 'skewX(45deg)', 117 accumulateFrom: 'skewY(45deg)', 118 accumulateTo: 'skewY(45deg)', 119 }, [ 120 // Note that this is not equivalent to any form of combined skews. 121 {at: 0.5, expect: 'matrix(1, 1, 0.5, 1.5, 0, 0)'}, 122 ]); 123 </script> 124 </body>