grid-minimum-size-grid-items-021.html (9111B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Minimum size of grid items</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items"> 6 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#algo-track-sizing" title="12.3. Track Sizing Algorithm"> 7 <meta name="assert" content="Checks how automatic minimum size of images affect to the calculation of the grid container size and the grid tracks. Verifies the sizing of the image in the different cases too."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 .grid { 13 display: inline-grid; 14 grid-template-rows: auto; 15 grid-template-columns: auto; 16 font: 25px/1 Ahem; 17 } 18 19 .grid2rows { 20 grid-template-rows: auto auto; 21 } 22 23 .constrainedGrid { 24 width: 10px; 25 height: 10px; 26 } 27 28 .item { 29 background: black; 30 width: 100px; 31 height: 25px; 32 } 33 34 .justifyContentStart { 35 justify-content: start; 36 } 37 38 .width200px { 39 width: 200px; 40 } 41 42 .width100percent { 43 width: 100%; 44 } 45 </style> 46 47 <script> 48 function checkGridSizeTracksAndImageSize(gridId, imgId, gridWidth, gridHeight, gridColumns, gridRows, imgWidth, imgHeight) { 49 const gridStyle = getComputedStyle(document.getElementById(gridId)); 50 const imgStyle = getComputedStyle(document.getElementById(imgId)); 51 52 test( 53 function() { 54 assert_equals(gridStyle.width, gridWidth); 55 }, gridId + ".width"); 56 test( 57 function() { 58 assert_equals(gridStyle.height, gridHeight); 59 }, gridId + ".height"); 60 test( 61 function() { 62 assert_equals(gridStyle.gridTemplateColumns, gridColumns); 63 }, gridId + ".gridTemplateColumns"); 64 test( 65 function() { 66 assert_equals(gridStyle.gridTemplateRows, gridRows); 67 }, gridId + ".gridTemplateRows"); 68 test( 69 function() { 70 assert_equals(imgStyle.width, imgWidth); 71 }, imgId + ".width"); 72 test( 73 function() { 74 assert_equals(imgStyle.height, imgHeight); 75 }, imgId + ".height"); 76 } 77 78 setup({ explicit_done: true }); 79 80 function runTests() { 81 checkGridSizeTracksAndImageSize("grid-1", "img-1", "200px", "200px", "200px", "200px", "200px", "200px"); 82 checkGridSizeTracksAndImageSize("grid-2", "img-2", "10px", "10px", "200px", "200px", "200px", "200px"); 83 checkGridSizeTracksAndImageSize("grid-3", "img-3", "200px", "200px", "200px", "200px", "200px", "200px"); 84 checkGridSizeTracksAndImageSize("grid-4", "img-4", "200px", "10px", "200px", "200px", "200px", "200px"); 85 checkGridSizeTracksAndImageSize("grid-5", "img-5", "200px", "50px", "50px", "50px", "50px", "50px"); 86 checkGridSizeTracksAndImageSize("grid-6", "img-6", "200px", "10px", "50px", "50px", "50px", "50px"); 87 checkGridSizeTracksAndImageSize("grid-7", "img-7", "200px", "225px", "200px", "200px 25px", "200px", "200px"); 88 checkGridSizeTracksAndImageSize("grid-8", "img-8", "10px", "10px", "200px", "200px 25px", "200px", "200px"); 89 checkGridSizeTracksAndImageSize("grid-9", "img-9", "200px", "225px", "200px", "200px 25px", "200px", "200px"); 90 checkGridSizeTracksAndImageSize("grid-10", "img-10", "200px", "10px", "200px", "200px 25px", "200px", "200px"); 91 checkGridSizeTracksAndImageSize("grid-11", "img-11", "200px", "125px", "100px", "100px 25px", "100px", "100px"); 92 checkGridSizeTracksAndImageSize("grid-12", "img-12", "200px", "10px", "100px", "100px 25px", "100px", "100px"); 93 checkGridSizeTracksAndImageSize("grid-13", "img-13", "200px", "200px", "200px", "200px", "200px", "200px"); 94 checkGridSizeTracksAndImageSize("grid-14", "img-14", "10px", "10px", "200px", "200px", "200px", "200px"); 95 checkGridSizeTracksAndImageSize("grid-15", "img-15", "200px", "200px", "200px", "200px", "200px", "200px"); 96 checkGridSizeTracksAndImageSize("grid-16", "img-16", "200px", "10px", "200px", "200px", "200px", "200px"); 97 checkGridSizeTracksAndImageSize("grid-17", "img-17", "200px", "200px", "200px", "200px", "200px", "200px"); 98 checkGridSizeTracksAndImageSize("grid-18", "img-18", "200px", "10px", "200px", "200px", "200px", "200px"); 99 checkGridSizeTracksAndImageSize("grid-19", "img-19", "200px", "225px", "200px", "200px 25px", "200px", "200px"); 100 checkGridSizeTracksAndImageSize("grid-20", "img-20", "10px", "10px", "200px", "200px 25px", "200px", "200px"); 101 checkGridSizeTracksAndImageSize("grid-21", "img-21", "200px", "225px", "200px", "200px 25px", "200px", "200px"); 102 checkGridSizeTracksAndImageSize("grid-22", "img-22", "200px", "10px", "200px", "200px 25px", "200px", "200px"); 103 checkGridSizeTracksAndImageSize("grid-23", "img-23", "200px", "225px", "200px", "200px 25px", "200px", "200px"); 104 checkGridSizeTracksAndImageSize("grid-24", "img-24", "200px", "10px", "200px", "200px 25px", "200px", "200px"); 105 106 done(); 107 } 108 </script> 109 110 <body onload="document.fonts.ready.then(() => { runTests(); })"> 111 <div id=log></div> 112 113 <!-- Grids with only a 50x50 image as grid item. --> 114 115 <div id="grid-1" class="grid"> 116 <img id="img-1" class="width200px" src="support/50x50-green.png"> 117 </div> 118 119 <div id="grid-2" class="grid constrainedGrid"> 120 <img id="img-2" class="width200px" src="support/50x50-green.png"> 121 </div> 122 123 <div id="grid-3" class="grid width200px"> 124 <img id="img-3" class="width100percent" src="support/50x50-green.png"> 125 </div> 126 127 <div id="grid-4" class="grid width200px constrainedGrid"> 128 <img id="img-4" class="width100percent" src="support/50x50-green.png"> 129 </div> 130 131 <div id="grid-5" class="grid width200px justifyContentStart"> 132 <img id="img-5" class="width100percent" src="support/50x50-green.png"> 133 </div> 134 135 <div id="grid-6" class="grid width200px constrainedGrid justifyContentStart"> 136 <img id="img-6" class="width100percent" src="support/50x50-green.png"> 137 </div> 138 139 <!-- Grids with a 50x50 image as grid item and a 100x25 text grid item. --> 140 141 <div id="grid-7" class="grid grid2rows"> 142 <img id="img-7" class="width200px" src="support/50x50-green.png"> 143 <span class="item"></span> 144 </div> 145 146 <div id="grid-8" class="grid grid2rows constrainedGrid"> 147 <img id="img-8" class="width200px" src="support/50x50-green.png"> 148 <span class="item"></span> 149 </div> 150 151 <div id="grid-9" class="grid grid2rows width200px"> 152 <img id="img-9" class="width100percent" src="support/50x50-green.png"> 153 <span class="item"></span> 154 </div> 155 156 <div id="grid-10" class="grid grid2rows width200px constrainedGrid"> 157 <img id="img-10" class="width100percent" src="support/50x50-green.png"> 158 <span class="item"></span> 159 </div> 160 161 <div id="grid-11" class="grid grid2rows width200px justifyContentStart"> 162 <img id="img-11" class="width100percent" src="support/50x50-green.png"> 163 <span class="item"></span> 164 </div> 165 166 <div id="grid-12" class="grid grid2rows width200px constrainedGrid justifyContentStart"> 167 <img id="img-12" class="width100percent" src="support/50x50-green.png"> 168 <span class="item"></span> 169 </div> 170 171 <!-- Grids with only a 500x500 image as grid item. --> 172 173 <div id="grid-13" class="grid"> 174 <img id="img-13" class="width200px" src="support/500x500-green.png"> 175 </div> 176 177 <div id="grid-14" class="grid constrainedGrid"> 178 <img id="img-14" class="width200px" src="support/500x500-green.png"> 179 </div> 180 181 <div id="grid-15" class="grid width200px"> 182 <img id="img-15" class="width100percent" src="support/500x500-green.png"> 183 </div> 184 185 <div id="grid-16" class="grid width200px constrainedGrid"> 186 <img id="img-16" class="width100percent" src="support/500x500-green.png"> 187 </div> 188 189 <div id="grid-17" class="grid width200px justifyContentStart"> 190 <img id="img-17" class="width100percent" src="support/500x500-green.png"> 191 </div> 192 193 <div id="grid-18" class="grid width200px constrainedGrid justifyContentStart"> 194 <img id="img-18" class="width100percent" src="support/500x500-green.png"> 195 </div> 196 197 <!-- Grids with a 500x500 image as grid item and a 100x25 text grid item. --> 198 199 <div id="grid-19" class="grid grid2rows"> 200 <img id="img-19" class="width200px" src="support/500x500-green.png"> 201 <span class="item"></span> 202 </div> 203 204 <div id="grid-20" class="grid grid2rows constrainedGrid"> 205 <img id="img-20" class="width200px" src="support/500x500-green.png"> 206 <span class="item"></span> 207 </div> 208 209 <div id="grid-21" class="grid grid2rows width200px"> 210 <img id="img-21" class="width100percent" src="support/500x500-green.png"> 211 <span class="item"></span> 212 </div> 213 214 <div id="grid-22" class="grid grid2rows width200px constrainedGrid"> 215 <img id="img-22" class="width100percent" src="support/500x500-green.png"> 216 <span class="item"></span> 217 </div> 218 219 <div id="grid-23" class="grid grid2rows width200px justifyContentStart"> 220 <img id="img-23" class="width100percent" src="support/500x500-green.png"> 221 <span class="item"></span> 222 </div> 223 224 <div id="grid-24" class="grid grid2rows width200px constrainedGrid justifyContentStart"> 225 <img id="img-24" class="width100percent" src="support/500x500-green.png"> 226 <span class="item"></span> 227 </div> 228 </body>