transform-composition.html (3651B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> 5 <meta name="assert" content="transform 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 // This file contains tests for the composition behavior of transforms that is 14 // unrelated to the individual transform functions. For the transform functions 15 // themselves, see the transform-*-composition.html subtests. 16 17 // ------------------ Addition ----------------- 18 test_composition({ 19 property: 'transform', 20 underlying: 'rotateX(100deg) rotateY(100deg)', 21 addFrom: 'translate(10px, 20px)', 22 replaceTo: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)', 23 }, [ 24 {at: -0.5, expect: 'rotateX(50deg) rotateY(50deg) translate(-40px, -80px)'}, 25 {at: 0, expect: 'rotateX(100deg) rotateY(100deg) translate(10px, 20px)'}, 26 {at: 0.25, expect: 'rotateX(125deg) rotateY(125deg) translate(35px, 70px)'}, 27 {at: 0.5, expect: 'rotateX(150deg) rotateY(150deg) translate(60px, 120px)'}, 28 {at: 0.75, expect: 'rotateX(175deg) rotateY(175deg) translate(85px, 170px)'}, 29 {at: 1, expect: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)'}, 30 {at: 1.5, expect: 'rotateX(250deg) rotateY(250deg) translate(160px, 320px)'}, 31 ]); 32 33 // Shorter list is extended with corresponding identity transforms for pairwise 34 // interpolation. 35 test_composition({ 36 property: 'transform', 37 underlying: 'rotateX(45deg)', 38 addFrom: 'none', 39 addTo: 'rotateY(360deg)', 40 }, [ 41 {at: -0.5, expect: 'rotateX(45deg) rotateY(-180deg)'}, 42 {at: 0, expect: 'rotateX(45deg) rotateY(0deg)'}, 43 {at: 0.25, expect: 'rotateX(45deg) rotateY(90deg)'}, 44 {at: 0.5, expect: 'rotateX(45deg) rotateY(180deg)'}, 45 {at: 0.75, expect: 'rotateX(45deg) rotateY(270deg)'}, 46 {at: 1, expect: 'rotateX(45deg) rotateY(360deg)'}, 47 {at: 1.5, expect: 'rotateX(45deg) rotateY(540deg)'}, 48 ]); 49 50 // Matrix decomposition cases 51 test_composition({ 52 property: 'transform', 53 underlying: 'rotateX(90deg)', 54 addFrom: 'translate(100px, 100px)', 55 addTo: 'scale(2)', 56 }, [ 57 {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)'}, 58 {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)'}, 59 {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)'}, 60 {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)'}, 61 {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)'}, 62 {at: 1, expect: 'matrix3d(2, 0, 0, 0, 0, 1.22465e-16, 2, 0, 0, -1, 6.12323e-17, 0, 0, 0, 0, 1)'}, 63 {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)'}, 64 ]); 65 66 // Force a fallback to matrix interpolation. 67 test_composition({ 68 property: 'transform', 69 underlying: 'rotateX(45deg)', 70 addFrom: 'scaleX(1)', 71 addTo: 'rotateY(360deg)', 72 }, [ 73 {at: -0.5, expect: 'rotateX(45deg)'}, 74 {at: 0, expect: 'rotateX(45deg)'}, 75 {at: 0.25, expect: 'rotateX(45deg)'}, 76 {at: 0.5, expect: 'rotateX(45deg)'}, 77 {at: 0.75, expect: 'rotateX(45deg)'}, 78 {at: 1, expect: 'rotateX(45deg)'}, 79 {at: 1.5, expect: 'rotateX(45deg)'}, 80 ]); 81 82 // ------------------ Accumulation ----------------- 83 84 // TODO(smcgruer): Add tests for accumulation behaviors. 85 </script> 86 </body>