transform-interpolation-006.html (2298B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform interpolation</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 <style> 12 .parent { 13 transform: translate(30px); 14 } 15 .target { 16 color: white; 17 width: 100px; 18 height: 100px; 19 background-color: black; 20 display: inline-block; 21 overflow: hidden; 22 transform: translate(10px); 23 } 24 .expected { 25 background-color: green; 26 } 27 .parent { 28 transform: 30px; 29 } 30 .target > div { 31 width: 10px; 32 height: 10px; 33 display: inline-block; 34 background: orange; 35 margin: 1px; 36 } 37 .test { 38 overflow: hidden; 39 } 40 </style> 41 42 <body> 43 <template id="target-template"> 44 <div></div> 45 </template> 46 </body> 47 48 <script> 49 test_interpolation({ 50 property: 'transform', 51 from: neutralKeyframe, 52 to: 'translate(20px)', 53 }, [ 54 {at: -1, expect: 'translate(0px)'}, 55 {at: 0, expect: 'translate(10px)'}, 56 {at: 0.25, expect: 'translate(12.5px)'}, 57 {at: 0.75, expect: 'translate(17.5px)'}, 58 {at: 1, expect: 'translate(20px)'}, 59 {at: 2, expect: 'translate(30px)'}, 60 ]); 61 62 test_interpolation({ 63 property: 'transform', 64 from: 'initial', 65 to: 'translate(20px)', 66 }, [ 67 {at: -1, expect: 'translate(-20px)'}, 68 {at: 0, expect: 'translate(0px)'}, 69 {at: 0.25, expect: 'translate(5px)'}, 70 {at: 0.75, expect: 'translate(15px)'}, 71 {at: 1, expect: 'translate(20px)'}, 72 {at: 2, expect: 'translate(40px)'}, 73 ]); 74 75 test_interpolation({ 76 property: 'transform', 77 from: 'inherit', 78 to: 'translate(20px)', 79 }, [ 80 {at: -1, expect: 'translate(40px)'}, 81 {at: 0, expect: 'translate(30px)'}, 82 {at: 0.25, expect: 'translate(27.5px)'}, 83 {at: 0.75, expect: 'translate(22.5px)'}, 84 {at: 1, expect: 'translate(20px)'}, 85 {at: 2, expect: 'translate(10px)'}, 86 ]); 87 88 test_interpolation({ 89 property: 'transform', 90 from: 'unset', 91 to: 'translate(20px)', 92 }, [ 93 {at: -1, expect: 'translate(-20px)'}, 94 {at: 0, expect: 'translate(0px)'}, 95 {at: 0.25, expect: 'translate(5px)'}, 96 {at: 0.75, expect: 'translate(15px)'}, 97 {at: 1, expect: 'translate(20px)'}, 98 {at: 2, expect: 'translate(40px)'}, 99 ]); 100 </script>