transform-scale-composition.html (3635B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform-scale composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions"> 5 <meta name="assert" content="transform-scale 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 scale functions results in multiplying their 14 // values (scale(2) scale(3) == scale(6)), whereas accumulation does a 1-based 15 // sum of the components (accumulate(scale(2), scale(3)) == scale(2 + 3 - 1) == 16 // scale(4)). 17 18 // ------------ Addition tests -------------- 19 20 test_composition({ 21 property: 'transform', 22 underlying: 'scaleX(2)', 23 addFrom: 'scaleX(3)', 24 addTo: 'scaleX(4)', 25 }, [ 26 {at: -0.5, expect: 'scaleX(5)'}, 27 {at: 0, expect: 'scaleX(6)'}, 28 {at: 0.25, expect: 'scaleX(6.5)'}, 29 {at: 0.5, expect: 'scaleX(7)'}, 30 {at: 0.75, expect: 'scaleX(7.5)'}, 31 {at: 1, expect: 'scaleX(8)'}, 32 {at: 1.5, expect: 'scaleX(9)'}, 33 ]); 34 35 test_composition({ 36 property: 'transform', 37 underlying: 'scaleY(2)', 38 addFrom: 'scaleY(3)', 39 addTo: 'scaleY(4)', 40 }, [ 41 {at: -0.5, expect: 'scaleY(5)'}, 42 {at: 0, expect: 'scaleY(6)'}, 43 {at: 0.25, expect: 'scaleY(6.5)'}, 44 {at: 0.5, expect: 'scaleY(7)'}, 45 {at: 0.75, expect: 'scaleY(7.5)'}, 46 {at: 1, expect: 'scaleY(8)'}, 47 {at: 1.5, expect: 'scaleY(9)'}, 48 ]); 49 50 test_composition({ 51 property: 'transform', 52 underlying: 'scaleZ(2)', 53 addFrom: 'scaleZ(3)', 54 addTo: 'scaleZ(4)', 55 }, [ 56 {at: -0.5, expect: 'scaleZ(5)'}, 57 {at: 0, expect: 'scaleZ(6)'}, 58 {at: 0.25, expect: 'scaleZ(6.5)'}, 59 {at: 0.5, expect: 'scaleZ(7)'}, 60 {at: 0.75, expect: 'scaleZ(7.5)'}, 61 {at: 1, expect: 'scaleZ(8)'}, 62 {at: 1.5, expect: 'scaleZ(9)'}, 63 ]); 64 65 // ------------ Accumulation tests -------------- 66 67 test_composition({ 68 property: 'transform', 69 underlying: 'scaleX(2)', 70 accumulateFrom: 'scaleX(3)', 71 accumulateTo: 'scaleX(4)', 72 }, [ 73 {at: -0.5, expect: 'scaleX(3.5)'}, 74 {at: 0, expect: 'scaleX(4)'}, 75 {at: 0.25, expect: 'scaleX(4.25)'}, 76 {at: 0.5, expect: 'scaleX(4.5)'}, 77 {at: 0.75, expect: 'scaleX(4.75)'}, 78 {at: 1, expect: 'scaleX(5)'}, 79 {at: 1.5, expect: 'scaleX(5.5)'}, 80 ]); 81 82 test_composition({ 83 property: 'transform', 84 underlying: 'scaleY(2)', 85 accumulateFrom: 'scaleY(3)', 86 accumulateTo: 'scaleY(4)', 87 }, [ 88 {at: -0.5, expect: 'scaleY(3.5)'}, 89 {at: 0, expect: 'scaleY(4)'}, 90 {at: 0.25, expect: 'scaleY(4.25)'}, 91 {at: 0.5, expect: 'scaleY(4.5)'}, 92 {at: 0.75, expect: 'scaleY(4.75)'}, 93 {at: 1, expect: 'scaleY(5)'}, 94 {at: 1.5, expect: 'scaleY(5.5)'}, 95 ]); 96 97 test_composition({ 98 property: 'transform', 99 underlying: 'scaleZ(2)', 100 accumulateFrom: 'scaleZ(3)', 101 accumulateTo: 'scaleZ(4)', 102 }, [ 103 {at: -0.5, expect: 'scaleZ(3.5)'}, 104 {at: 0, expect: 'scaleZ(4)'}, 105 {at: 0.25, expect: 'scaleZ(4.25)'}, 106 {at: 0.5, expect: 'scaleZ(4.5)'}, 107 {at: 0.75, expect: 'scaleZ(4.75)'}, 108 {at: 1, expect: 'scaleZ(5)'}, 109 {at: 1.5, expect: 'scaleZ(5.5)'}, 110 ]); 111 112 // The scale functions all share the same primitive type (scale3d), so can be 113 // accumulated between. 114 test_composition({ 115 property: 'transform', 116 underlying: 'scale(2, 4)', 117 accumulateFrom: 'scaleZ(3)', 118 accumulateTo: 'scaleZ(4)', 119 }, [ 120 {at: -0.5, expect: 'scale3d(2, 4, 2.5)'}, 121 {at: 0, expect: 'scale3d(2, 4, 3)'}, 122 {at: 0.25, expect: 'scale3d(2, 4, 3.25)'}, 123 {at: 0.5, expect: 'scale3d(2, 4, 3.5)'}, 124 {at: 0.75, expect: 'scale3d(2, 4, 3.75)'}, 125 {at: 1, expect: 'scale3d(2, 4, 4)'}, 126 {at: 1.5, expect: 'scale3d(2, 4, 4.5)'}, 127 ]); 128 </script> 129 </body>