calc-interpolation.html (3668B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>calc interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-values-3/#calc-notation"> 5 <meta name="assert" content="calc supports animation by computed value"> 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 .container { 13 position: relative; 14 width: 50px; 15 height: 50px; 16 border: black solid 2px; 17 display: inline-block; 18 margin-left: 10px; 19 margin-right: 10px; 20 background-color: white; 21 } 22 .target { 23 position: absolute; 24 width: 10px; 25 height: 50px; 26 background-color: black; 27 } 28 .expected { 29 background-color: green; 30 } 31 </style> 32 33 <body> 34 <template id="target-template"> 35 <div class="container"> 36 <div class="target"></div> 37 </div> 38 </template> 39 <div class="target" id="inf-target"></div> 40 <script> 41 const APPROX_INFINITY = (function() { 42 const target = document.getElementById("inf-target"); 43 target.style.letterSpacing = "calc(1px * infinity)"; 44 const inf = parseFloat(getComputedStyle(target).letterSpacing); 45 target.remove(); 46 return inf; 47 }()); 48 49 test_interpolation({ 50 property: 'left', 51 from: '0px', 52 to: 'calc(infinity * 1px)', 53 target_names:['CSS Transitions', 'CSS Transitions with transition: all'] 54 }, [ 55 {at: -0.25, expect: `${APPROX_INFINITY * -0.25 }px`}, 56 {at: 0, expect: '0px'}, 57 {at: 0.25, expect: `${APPROX_INFINITY * 0.25}px`}, 58 {at: 0.5, expect: `${APPROX_INFINITY * 0.5}px`}, 59 {at: 0.75, expect: `${APPROX_INFINITY * 0.75}px`}, 60 {at: 1, expect: `${APPROX_INFINITY}px`}, 61 {at: 1.25, expect: `${APPROX_INFINITY * 1.25}px`} 62 ]); 63 64 test_interpolation({ 65 property: 'left', 66 from: '0px', 67 to: 'calc(infinity * 1px)', 68 target_names:['CSS Animations', 'Web Animations'] 69 }, [ 70 {at: -0.25, expect: `${-APPROX_INFINITY}px`}, 71 {at: 0, expect: `0px`}, 72 {at: 0.25, expect: `${APPROX_INFINITY}px`}, 73 {at: 0.5, expect: `${APPROX_INFINITY}px`}, 74 {at: 0.75, expect: `${APPROX_INFINITY}px`}, 75 {at: 1, expect: `${APPROX_INFINITY}px`}, 76 {at: 1.25, expect: `${APPROX_INFINITY}px`} 77 ]); 78 79 test_interpolation({ 80 property: 'left', 81 from: 'calc(50% - 25px)', 82 to: 'calc(100% - 10px)' 83 }, [ 84 {at: -0.25, expect: '-10px'}, 85 {at: 0, expect: '0px'}, 86 {at: 0.25, expect: '10px'}, 87 {at: 0.5, expect: '20px'}, 88 {at: 0.75, expect: '30px'}, 89 {at: 1, expect: '40px'}, 90 {at: 1.25, expect: '50px'} 91 ]); 92 93 test_interpolation({ 94 property: 'text-indent', 95 from: 'calc(50% - 25px)', 96 to: 'calc(100% - 10px)' 97 }, [ 98 {at: -0.25, expect: 'calc(((50% - 25px) * 1.25) + ((100% - 10px) * -0.25))'}, 99 {at: 0, expect: 'calc(50% - 25px)'}, 100 {at: 0.25, expect: 'calc(((50% - 25px) * 0.75) + ((100% - 10px) * 0.25))'}, 101 {at: 0.5, expect: 'calc(((50% - 25px) * 0.5) + ((100% - 10px) * 0.5))'}, 102 {at: 0.75, expect: 'calc(((50% - 25px) * 0.25) + ((100% - 10px) * 0.75))'}, 103 {at: 1, expect: 'calc(100% - 10px)'}, 104 {at: 1.25, expect: 'calc(((50% - 25px) * -0.25) + ((100% - 10px) * 1.25))'} 105 ]); 106 107 test_interpolation({ 108 property: 'text-indent', 109 from: '0em', 110 to: '100px' 111 }, [ 112 {at: -0.25, expect: '-25px'}, 113 {at: 0, expect: '0em'}, 114 {at: 0.25, expect: '25px'}, 115 {at: 0.5, expect: '50px'}, 116 {at: 0.75, expect: '75px'}, 117 {at: 1, expect: '100px'}, 118 {at: 1.25, expect: '125px'} 119 ]); 120 121 test_interpolation({ 122 property: 'text-indent', 123 from: '0%', 124 to: '100px' 125 }, [ 126 {at: -0.25, expect: 'calc(0% + -25px)'}, 127 {at: 0, expect: '0%'}, 128 {at: 0.25, expect: 'calc(0% + 25px)'}, 129 {at: 0.5, expect: 'calc(0% + 50px)'}, 130 {at: 0.75, expect: 'calc(0% + 75px)'}, 131 {at: 1, expect: 'calc(0% + 100px)'}, 132 {at: 1.25, expect: 'calc(0% + 125px)'} 133 ]); 134 135 </script> 136 </body>