grid-columns-rows-get-set-multiple.html (14803B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org"> 4 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=73272"> 5 <link href="/css/support/width-keyword-classes.css" rel="stylesheet"> 6 <link href="/css/support/grid.css" rel="stylesheet"> 7 <link href="/css/support/alignment.css" rel="stylesheet"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 9 <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing"> 10 <meta name="assert" content="Test that setting and getting multiple grid-template-columns and grid-template-rows works as expected"> 11 <style> 12 /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution. */ 13 .definite { 14 width: 800px; 15 height: 600px; 16 } 17 18 .gridItem { 19 grid-column: 1; 20 grid-row: 1; 21 width: 7px; 22 height: 16px; 23 } 24 25 .gridItem2 { 26 grid-column: 2; 27 grid-row: 2; 28 width: 17px; 29 height: 3px; 30 } 31 32 .gridWithFixed { 33 grid-template-columns: 7px 11px; 34 grid-template-rows: 17px 2px; 35 } 36 37 .gridWithPercent { 38 grid-template-columns: 50% 100%; 39 grid-template-rows: 25% 75%; 40 } 41 .gridWithAuto { 42 grid-template-columns: auto auto; 43 grid-template-rows: auto auto; 44 } 45 .gridWithEM { 46 grid-template-columns: 10em 12em; 47 grid-template-rows: 15em 17em; 48 font: 10px Ahem; 49 } 50 .gridWithNoneAndAuto { 51 grid-template-columns: none auto; 52 grid-template-rows: none auto; 53 } 54 .gridNoneWithAndFixed { 55 grid-template-columns: none 15px; 56 grid-template-rows: none 22px; 57 } 58 .gridWithThreeItems { 59 grid-template-columns: 15px auto 10em; 60 grid-template-rows: 12em 18px auto; 61 font: 10px Ahem; 62 } 63 .gridWithFitContentAndFitAvailable { 64 grid-template-columns: -webkit-content-available; 65 grid-template-rows: -webkit-fit-content -webkit-fit-available; 66 } 67 .gridWithMinMaxContent { 68 grid-template-columns: min-content max-content; 69 grid-template-rows: max-content min-content; 70 } 71 .gridWithMinMaxAndFixed { 72 grid-template-columns: minmax(45px, 30%) 15px; 73 grid-template-rows: 12em minmax(35%, 10px); 74 font: 10px Ahem; 75 } 76 .gridWithMinMaxAndMinMaxContent { 77 grid-template-columns: minmax(min-content, 30%) 15px; 78 grid-template-rows: 12em minmax(35%, max-content); 79 font: 10px Ahem; 80 } 81 .gridWithFractionFraction { 82 grid-template-columns: 2fr 3fr; 83 grid-template-rows: 3fr 5fr; 84 } 85 .gridWithFractionMinMax { 86 grid-template-columns: minmax(min-content, 45px) 2fr; 87 grid-template-rows: 3fr minmax(14px, max-content); 88 } 89 .gridWithCalcCalc { 90 grid-template-columns: calc(200px) calc(10em); 91 grid-template-rows: calc(15em) calc(75px); 92 font: 10px Ahem; 93 } 94 .gridWithCalcAndFixed { 95 grid-template-columns: calc(50%) 8em; 96 grid-template-rows: 88px calc(25%); 97 font: 10px Ahem; 98 } 99 .gridWithCalcAndMinMax { 100 grid-template-columns: calc(30px + 20%) minmax(min-content, 80px); 101 grid-template-rows: minmax(25%, max-content) calc(10% - 7px); 102 } 103 .gridWithCalcInsideMinMax { 104 grid-template-columns: minmax(calc(23px + 10%), 400px) 12em; 105 grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px)); 106 font: 10px Ahem; 107 } 108 .gridWithAutoInsideMinMax { 109 grid-template-columns: minmax(auto, min-content) 30px; 110 grid-template-rows: calc(100px + 2em) minmax(10%, auto); 111 } 112 </style> 113 <script src="/resources/testharness.js"></script> 114 <script src="/resources/testharnessreport.js"></script> 115 <div class="grid definite gridWithFixed" id="gridWithFixedElement"></div> 116 <div class="grid definite gridWithPercent" id="gridWithPercentElement"></div> 117 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"> 118 <div class="gridItem"></div> 119 </div> 120 <div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"> 121 <div class="gridItem2"></div> 122 </div> 123 <div class="grid definite gridWithEM" id="gridWithEMElement"></div> 124 <div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> 125 <div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> 126 <div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div> 127 <div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div> 128 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div> 129 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement"> 130 <div class="gridItem"></div> 131 <div class="gridItem2"></div> 132 </div> 133 <div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> 134 <div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div> 135 <div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div> 136 <div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div> 137 <div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div> 138 <div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> 139 <div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div> 140 <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div> 141 <div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div> 142 143 <script> 144 function testGridDefinitionsValues(id, columnValue, rowValue) 145 { 146 test(function(){ 147 var element = document.getElementById(id); 148 var readColumnValue = getComputedStyle(element).gridTemplateColumns; 149 var readRowValue = getComputedStyle(element).gridTemplateRows; 150 assert_equals(readColumnValue, columnValue); 151 assert_equals(readRowValue, rowValue); 152 }, `Test getting grid-template-columns and grid-template-rows set through CSS for element '${id}' : grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`); 153 } 154 155 function testGridDefinitionsSetJSValues( 156 columnValue, 157 rowValue, 158 computedColumnValue = columnValue, 159 computedRowValue = rowValue, 160 jsColumnValue = columnValue, 161 jsRowValue = rowValue) 162 { 163 test(function(){ 164 window.element = document.createElement("div"); 165 document.body.appendChild(element); 166 element.style.display = "grid"; 167 element.style.width = "800px"; 168 element.style.height = "600px"; 169 element.style.justifyContent = "start"; 170 element.style.alignContent = "start"; 171 element.style.font = "10px Ahem"; // Used to resolve em font consistently. 172 element.style.gridTemplateColumns = columnValue; 173 element.style.gridTemplateRows = rowValue; 174 assert_equals(getComputedStyle(element).gridTemplateColumns, computedColumnValue); 175 assert_equals(element.style.gridTemplateColumns, jsColumnValue); 176 assert_equals(getComputedStyle(element).gridTemplateRows, computedRowValue); 177 assert_equals(element.style.gridTemplateRows, jsRowValue); 178 document.body.removeChild(element); 179 }, `Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '${computedColumnValue}', element.style.gridTemplateColumns = '${columnValue}', grid-template-rows = '${computedRowValue}', element.style.gridTemplateRows = '${rowValue}'`); 180 } 181 182 function testGridDefinitionsSetBadJSValues(columnValue, rowValue) 183 { 184 test(function(){ 185 window.element = document.createElement("div"); 186 document.body.appendChild(element); 187 element.style.gridTemplateColumns = columnValue; 188 element.style.gridTemplateRows = rowValue; 189 assert_equals(getComputedStyle(element).gridTemplateColumns, "none"); 190 assert_equals(getComputedStyle(element).gridTemplateRows, "none"); 191 document.body.removeChild(element); 192 }, `Test setting bad JS values: grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`); 193 } 194 195 function testDefaultValue() 196 { 197 test(function(){ 198 var element = document.createElement("div"); 199 document.body.appendChild(element); 200 assert_equals(getComputedStyle(element).gridTemplateColumns, "none"); 201 assert_equals(getComputedStyle(element).gridTemplateRows, "none"); 202 document.body.removeChild(element); 203 }, `Test the default value`); 204 } 205 206 function testWrongCSSValue() 207 { 208 test(function(){ 209 var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto"); 210 assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateColumns, "none"); 211 assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateRows, "none"); 212 213 var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed"); 214 assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateColumns, "none"); 215 assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateRows, "none"); 216 }, `Test setting wrong/invalid values through CSS`); 217 } 218 219 function testInherit() 220 { 221 test(function(){ 222 var parentElement = document.createElement("div"); 223 document.body.appendChild(parentElement); 224 parentElement.style.display = "grid"; 225 parentElement.style.width = "800px"; 226 parentElement.style.height = "600px"; 227 parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently. 228 parentElement.style.gridTemplateColumns = "50px 1fr [last]"; 229 parentElement.style.gridTemplateRows = "2em [middle] 45px"; 230 assert_equals(getComputedStyle(parentElement).gridTemplateColumns, "50px 750px [last]"); 231 assert_equals(getComputedStyle(parentElement).gridTemplateRows, "20px [middle] 45px"); 232 233 element = document.createElement("div"); 234 parentElement.appendChild(element); 235 element.style.display = "grid"; 236 element.style.gridTemplateColumns = "inherit"; 237 element.style.gridTemplateRows = "inherit"; 238 assert_equals(getComputedStyle(element).gridTemplateColumns, "50px 0px [last]"); 239 assert_equals(getComputedStyle(element).gridTemplateRows, "20px [middle] 45px"); 240 241 document.body.removeChild(parentElement); 242 }, `Test setting grid-template-columns and grid-template-rows to 'inherit' through JS`); 243 } 244 245 function testInitial() 246 { 247 test(function(){ 248 element = document.createElement("div"); 249 document.body.appendChild(element); 250 element.style.display = "grid"; 251 element.style.width = "800px"; 252 element.style.height = "600px"; 253 element.style.gridTemplateColumns = "150% [middle] 55px"; 254 element.style.gridTemplateRows = "1fr [line] 2fr [line]"; 255 assert_equals(getComputedStyle(element).gridTemplateColumns, "1200px [middle] 55px"); 256 assert_equals(getComputedStyle(element).gridTemplateRows, "200px [line] 400px [line]"); 257 258 element.style.gridTemplateColumns = "initial"; 259 element.style.gridTemplateRows = "initial"; 260 assert_equals(getComputedStyle(element).gridTemplateColumns, "none"); 261 assert_equals(getComputedStyle(element).gridTemplateRows, "none"); 262 263 document.body.removeChild(element); 264 }, `Test setting grid-template-columns and grid-template-rows to 'initial' through JS`); 265 } 266 267 setup({ explicit_done: true }); 268 document.fonts.ready.then(() => { 269 testGridDefinitionsValues("gridWithFixedElement", "7px 11px", "17px 2px"); 270 testGridDefinitionsValues("gridWithPercentElement", "400px 800px", "150px 450px"); 271 testGridDefinitionsValues("gridWithPercentWithoutSize", "3.5px 7px", "4px 12px"); 272 testGridDefinitionsValues("gridWithAutoElement", "0px 17px", "0px 3px"); 273 testGridDefinitionsValues("gridWithEMElement", "100px 120px", "150px 170px"); 274 testGridDefinitionsValues("gridWithThreeItems", "15px 0px 100px", "120px 18px 0px"); 275 testGridDefinitionsValues("gridWithFitContentAndFitAvailable", "none", "none"); 276 testGridDefinitionsValues("gridWithMinMaxContent", "0px 0px", "0px 0px"); 277 testGridDefinitionsValues("gridWithMinMaxContentWithChildrenElement", "7px 17px", "16px 3px"); 278 testGridDefinitionsValues("gridWithMinMaxAndFixed", "240px 15px", "120px 210px"); 279 testGridDefinitionsValues("gridWithMinMaxAndMinMaxContent", "240px 15px", "120px 210px"); 280 testGridDefinitionsValues("gridWithFractionFraction", "320px 480px", "225px 375px"); 281 testGridDefinitionsValues("gridWithFractionMinMax", "45px 755px", "586px 14px"); 282 testGridDefinitionsValues("gridWithCalcCalc", "200px 100px", "150px 75px"); 283 testGridDefinitionsValues("gridWithCalcAndFixed", "400px 80px", "88px 150px"); 284 testGridDefinitionsValues("gridWithCalcAndMinMax", "190px 80px", "150px 53px"); 285 testGridDefinitionsValues("gridWithCalcInsideMinMax", "400px 120px", "150px 175px"); 286 testGridDefinitionsValues("gridWithAutoInsideMinMax", "0px 30px", "132px 60px"); 287 288 testGridDefinitionsSetJSValues("18px 22px", "66px 70px"); 289 testGridDefinitionsSetJSValues("55% 80%", "40% 63%", "440px 640px", "240px 378px"); 290 testGridDefinitionsSetJSValues("auto auto", "auto auto", "0px 0px", "0px 0px"); 291 testGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "0px 160px 22px", "336px 100px 0px"); 292 testGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px 20px", "90px 0px"); 293 testGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 640px", "600px 0px"); 294 testGridDefinitionsSetJSValues("calc(25px) calc(2em)", "auto calc(10%)", "25px 20px", "0px 60px", "calc(25px) calc(2em)", "auto calc(10%)"); 295 // This test failing in Chromium is caused by https://bugs.chromium.org/p/chromium/issues/detail?id=1050968 296 testGridDefinitionsSetJSValues("calc(25px + 40%) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto", "345px 92px", "100px 0px", "calc(40% + 25px) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto"); 297 298 testWrongCSSValue(); 299 300 testGridDefinitionsSetBadJSValues("none auto", "none auto"); 301 testGridDefinitionsSetBadJSValues("none 16em", "none 56%"); 302 testGridDefinitionsSetBadJSValues("none none", "none none"); 303 testGridDefinitionsSetBadJSValues("auto none", "auto none"); 304 testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none"); 305 testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available"); 306 // Negative values are not allowed. 307 testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw"); 308 testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 10vw"); 309 // Invalid expressions with calc 310 testGridDefinitionsSetBadJSValues("10px calc(16px 30px)", "calc(25px + auto) 2em"); 311 testGridDefinitionsSetBadJSValues("minmax(min-content, calc() 250px", "calc(2em("); 312 313 testInherit(); 314 315 testDefaultValue() 316 317 testInitial(); 318 319 done(); 320 }); 321 </script>