calc-size-width-interpolation.html (4969B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>width: calc-size() animations</title> 4 <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> 5 <meta name="timeout" content="long"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../../support/interpolation-testcommon.js"></script> 9 10 <style> 11 .parent { 12 display: block; 13 width: 200px; 14 } 15 .target { 16 display: block; 17 } 18 .target::before { 19 display: block; 20 content: ""; 21 width: 100px; 22 } 23 </style> 24 25 <body> 26 27 <script> 28 test_interpolation({ 29 property: 'width', 30 from: 'calc-size(auto, size)', 31 to: 'calc-size(auto, size * 2)', 32 }, [ 33 { at: -0.25, expect: '150px' }, 34 { at: 0, expect: '200px' }, 35 { at: 0.25, expect: '250px' }, 36 { at: 0.5, expect: '300px' }, 37 { at: 0.75, expect: '350px' }, 38 { at: 1, expect: '400px' }, 39 { at: 1.25, expect: '450px' }, 40 ]); 41 42 test_interpolation({ 43 property: 'width', 44 from: neutralKeyframe, 45 to: 'calc-size(auto, size * 2)', 46 }, [ 47 { at: -0.25, expect: '150px' }, 48 { at: 0, expect: '200px' }, 49 { at: 0.25, expect: '250px' }, 50 { at: 0.5, expect: '300px' }, 51 { at: 0.75, expect: '350px' }, 52 { at: 1, expect: '400px' }, 53 { at: 1.25, expect: '450px' }, 54 ]); 55 56 test_interpolation({ 57 property: 'width', 58 from: 'calc-size(min-content, 0px)', 59 to: 'calc-size(min-content, size)', 60 }, [ 61 { at: -0.25, expect: '0' }, 62 { at: 0, expect: '0' }, 63 { at: 0.25, expect: '25px' }, 64 { at: 0.5, expect: '50px' }, 65 { at: 0.75, expect: '75px' }, 66 { at: 1, expect: '100px' }, 67 { at: 1.25, expect: '125px' }, 68 ]); 69 70 const KEYWORDS = { 71 "auto": 200, 72 "min-content": 100, 73 "fit-content": 100, 74 "max-content": 100, 75 "stretch": 200, 76 }; 77 78 for (const keyword in KEYWORDS) { 79 let expected = KEYWORDS[keyword]; 80 test_interpolation({ 81 property: 'width', 82 from: keyword, 83 to: `calc-size(${keyword}, size * 2)`, 84 }, [ 85 { at: -0.25, expect: `${expected * 0.75}px` }, 86 { at: 0, expect: `${expected}px` }, 87 { at: 0.75, expect: `${expected * 1.75}px` }, 88 { at: 1, expect: `${expected * 2}px` }, 89 { at: 1.25, expect: `${expected * 2.25}px` }, 90 ]); 91 92 test_interpolation({ 93 property: 'width', 94 from: keyword, 95 to: 'calc-size(any, 50px)', 96 }, [ 97 { at: -0.25, expect: `${expected * 1.25 - 50 * 0.25}px` }, 98 { at: 0, expect: `${expected}px` }, 99 { at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` }, 100 { at: 1, expect: `50px` }, 101 { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` }, 102 ]); 103 104 test_interpolation({ 105 property: 'width', 106 from: 'calc-size(any, 50px)', 107 to: `calc-size(${keyword}, size * 2)`, 108 }, [ 109 { at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` }, 110 { at: 0, expect: "50px" }, 111 { at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` }, 112 { at: 1, expect: `${expected * 2}px` }, 113 { at: 1.25, expect: `${expected * 2.5 - 50 * 0.25}px` }, 114 ]); 115 116 test_no_interpolation({ 117 property: 'width', 118 from: keyword, 119 to: 'calc-size(50px, size)', 120 }); 121 } 122 123 const KEYWORD_PAIRS = [ 124 [ "auto", "fit-content" ], 125 [ "fit-content", "min-content" ], 126 [ "stretch", "auto" ], 127 [ "max-content", "stretch" ], 128 ]; 129 130 for (const pair of KEYWORD_PAIRS) { 131 test_no_interpolation({ 132 property: 'width', 133 from: pair[0], 134 to: `calc-size(${pair[1]}, size)`, 135 }); 136 } 137 138 test_interpolation({ 139 property: 'width', 140 from: 'calc-size(20px, size)', 141 to: 'calc-size(60px, size)', 142 }, [ 143 { at: -0.25, expect: '10px' }, 144 { at: 0, expect: '20px' }, 145 { at: 0.75, expect: '50px' }, 146 { at: 1, expect: '60px' }, 147 { at: 1.25, expect: '70px' }, 148 ]); 149 150 test_interpolation({ 151 property: 'width', 152 from: 'calc-size(50%, size)', /* 100px */ 153 to: 'calc-size(60px, size)', 154 }, [ 155 { at: -0.25, expect: '110px' }, 156 { at: 0, expect: '100px' }, 157 { at: 0.75, expect: '70px' }, 158 { at: 1, expect: '60px' }, 159 { at: 1.25, expect: '50px' }, 160 ]); 161 162 test_interpolation({ 163 property: 'width', 164 from: 'calc-size(37px, 200px)', 165 to: `calc-size(37px, size * 2 + 7% + 12px)`, /* adds to 100px */ 166 }, [ 167 { at: -0.25, expect: '225px' }, 168 { at: 0, expect: '200px' }, 169 { at: 0.75, expect: '125px' }, 170 { at: 1, expect: '100px' }, 171 { at: 1.25, expect: '75px' }, 172 ]); 173 174 let parent_auto_style = document.createElement("style"); 175 parent_auto_style.innerText = ` 176 body { width: 300px; } 177 .parent { width: auto; } 178 `; 179 document.head.append(parent_auto_style); 180 181 test_interpolation({ 182 property: 'width', 183 from: 'inherit', 184 to: `calc-size(auto, size * 0.5)`, 185 }, [ 186 { at: -0.25, expect: '337.5px' }, 187 { at: 0, expect: '300px' }, 188 { at: 0.75, expect: '187.5px' }, 189 { at: 1, expect: '150px' }, 190 { at: 1.25, expect: '112.5px' }, 191 ]); 192 193 parent_auto_style.remove(); 194 195 196 </script>