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