grid-template-rows-interpolation.html (7908B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>grid-template-rows interpolation</title> 6 <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing"> 7 <meta name="assert" content="grid-template-rows supports animation."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 <style> 12 .parent { 13 grid-template-rows: 10px 20px 30px; 14 } 15 </style> 16 </head> 17 <body> 18 <script> 19 'use strict'; 20 21 // Distinct length of track list. 22 test_no_interpolation({ 23 property: 'grid-template-rows', 24 from: "1fr 1fr 1fr", 25 to: "2fr 2fr" 26 }); 27 28 test_no_interpolation({ 29 property: 'grid-template-rows', 30 from: "10px 20px 30px", 31 to: "20px 30px" 32 }); 33 34 test_no_interpolation({ 35 property: 'grid-template-rows', 36 from: "1fr 1fr 1fr", 37 to: "none" 38 }); 39 40 test_no_interpolation({ 41 property: 'grid-template-rows', 42 from: "none", 43 to: "20px 30px" 44 }); 45 46 // Exercise <explicit-track-list> 47 test_interpolation({ 48 property: 'grid-template-rows', 49 from: "10px 20px 30px", 50 to: "20px 30px 40px" 51 }, [ 52 {at: -1, expect: "0px 10px 20px"}, 53 {at: 0, expect: "10px 20px 30px"}, 54 {at: 0.4, expect: "14px 24px 34px"}, 55 {at: 0.6, expect: "16px 26px 36px"}, 56 {at: 1, expect: "20px 30px 40px"}, 57 {at: 2, expect: "30px 40px 50px"} 58 ]); 59 60 test_interpolation({ 61 property: 'grid-template-rows', 62 from: "10px 20px 30px", 63 to: "20% 30% 40px" 64 }, [ 65 {at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"}, 66 {at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"}, 67 {at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"}, 68 {at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"}, 69 {at: 1, expect: "20% 30% 40px"}, 70 {at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"} 71 ]); 72 73 test_interpolation({ 74 property: 'grid-template-rows', 75 from: "1fr 1fr 1fr", 76 to: "2fr auto 2fr" 77 }, [ 78 {at: -1, expect: "0fr 1fr 0fr"}, 79 {at: 0, expect: "1fr 1fr 1fr"}, 80 {at: 0.4, expect: "1.4fr 1fr 1.4fr"}, 81 {at: 0.6, expect: "1.6fr auto 1.6fr"}, 82 {at: 1, expect: "2fr auto 2fr"}, 83 {at: 2, expect: "3fr auto 3fr"} 84 ]); 85 86 test_interpolation({ 87 property: 'grid-template-rows', 88 from: "1fr [a b] 1fr [d] 1fr", 89 to: "2fr [c] auto 2fr" 90 }, [ 91 {at: -1, expect: "0fr [a b] 1fr [d] 0fr"}, 92 {at: 0, expect: "1fr [a b] 1fr [d] 1fr"}, 93 {at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"}, 94 {at: 0.6, expect: "1.6fr [c] auto 1.6fr"}, 95 {at: 1, expect: "2fr [c] auto 2fr"}, 96 {at: 2, expect: "3fr [c] auto 3fr"} 97 ]); 98 99 test_interpolation({ 100 property: 'grid-template-rows', 101 from: "fit-content(10px) fit-content(20px)", 102 to: "fit-content(20px) max-content" 103 }, [ 104 {at: -1, expect: "fit-content(0px) fit-content(20px)"}, 105 {at: 0, expect: "fit-content(10px) fit-content(20px)"}, 106 {at: 0.4, expect: "fit-content(14px) fit-content(20px)"}, 107 {at: 0.6, expect: "fit-content(16px) max-content"}, 108 {at: 1, expect: "fit-content(20px) max-content"}, 109 {at: 2, expect: "fit-content(30px) max-content"} 110 ]); 111 112 test_interpolation({ 113 property: 'grid-template-rows', 114 from: "minmax(10px, 1fr) minmax(20px, 2fr)", 115 to: "minmax(20px, 2fr) minmax(30px, auto)" 116 }, [ 117 {at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"}, 118 {at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"}, 119 {at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"}, 120 {at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"}, 121 {at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"}, 122 {at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"} 123 ]); 124 125 test_interpolation({ 126 property: 'grid-template-rows', 127 from: "10px 10px 10px", 128 to: "1fr fit-content(20px) minmax(20px, 2fr)" 129 }, [ 130 {at: -1, expect: "10px 10px 10px"}, 131 {at: 0, expect: "10px 10px 10px"}, 132 {at: 0.4, expect: "10px 10px 10px"}, 133 {at: 0.6, expect: "1fr fit-content(20px) minmax(20px, 2fr)"}, 134 {at: 1, expect: "1fr fit-content(20px) minmax(20px, 2fr)"}, 135 {at: 2, expect: "1fr fit-content(20px) minmax(20px, 2fr)"} 136 ]); 137 138 test_interpolation({ 139 property: 'grid-template-rows', 140 from: "1fr 1fr 1fr", 141 to: "20px fit-content(20px) minmax(20px, 2fr)" 142 }, [ 143 {at: -1, expect: "1fr 1fr 1fr"}, 144 {at: 0, expect: "1fr 1fr 1fr"}, 145 {at: 0.4, expect: "1fr 1fr 1fr"}, 146 {at: 0.6, expect: "20px fit-content(20px) minmax(20px, 2fr)"}, 147 {at: 1, expect: "20px fit-content(20px) minmax(20px, 2fr)"}, 148 {at: 2, expect: "20px fit-content(20px) minmax(20px, 2fr)"} 149 ]); 150 151 test_interpolation({ 152 property: 'grid-template-rows', 153 from: "fit-content(10px)", 154 to: "minmax(20px, 2fr)" 155 }, [ 156 {at: -1, expect: "fit-content(10px)"}, 157 {at: 0, expect: "fit-content(10px)"}, 158 {at: 0.4, expect: "fit-content(10px)"}, 159 {at: 0.6, expect: "minmax(20px, 2fr)"}, 160 {at: 1, expect: "minmax(20px, 2fr)"}, 161 {at: 2, expect: "minmax(20px, 2fr)"} 162 ]); 163 164 test_interpolation({ 165 property: 'grid-template-rows', 166 from: "inherit", 167 to: "20px 30px 40px" 168 }, [ 169 {at: -1, expect: "0px 10px 20px"}, 170 {at: 0, expect: "10px 20px 30px"}, 171 {at: 0.4, expect: "14px 24px 34px"}, 172 {at: 0.6, expect: "16px 26px 36px"}, 173 {at: 1, expect: "20px 30px 40px"}, 174 {at: 2, expect: "30px 40px 50px"} 175 ]); 176 177 // Exercise <track-list> (with <track-repeat>) 178 // https://drafts.csswg.org/css-grid/#repeat-interpolation 179 test_no_interpolation({ 180 property: 'grid-template-rows', 181 from: "1fr repeat(2, 2fr 30px) 1fr", 182 to: "2fr repeat(2, 3fr 40px 50px) 2fr" 183 }); 184 185 test_no_interpolation({ 186 property: 'grid-template-rows', 187 from: "1fr repeat(2, 2fr 30px) 1fr", 188 to: "2fr repeat(3, 3fr 40px) 2fr" 189 }); 190 191 // See https://github.com/w3c/csswg-drafts/issues/3503 192 test_no_interpolation({ 193 property: 'grid-template-rows', 194 from: "repeat(2, 2fr 30px)", 195 to: "repeat(4, 40px)" 196 }); 197 198 test_interpolation({ 199 property: 'grid-template-rows', 200 from: "1fr repeat(2, 2fr auto 30px) 1fr", 201 to: "2fr repeat(2, 3fr 30px 40px) 2fr" 202 }, [ 203 {at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"}, 204 {at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"}, 205 {at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"}, 206 {at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"}, 207 {at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"}, 208 {at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"} 209 ]); 210 211 // Exercise <auto-track-list> 212 test_no_interpolation({ 213 property: 'grid-template-rows', 214 from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px", 215 to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))" 216 }); 217 218 test_no_interpolation({ 219 property: 'grid-template-rows', 220 from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px", 221 to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px" 222 }); 223 224 test_no_interpolation({ 225 property: 'grid-template-rows', 226 from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px", 227 to: "20px repeat(auto-fill, minmax(35px, auto)) 20px" 228 }); 229 </script> 230 </body> 231 </html>