contain-size-grid-003.html (7299B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Containment Test: Size containment on grid containers</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> 6 <meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents but taking into account the track sizes."> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 .grid { 10 display: inline-grid; 11 contain: size; 12 position: relative; 13 font: 10px/1 Ahem; 14 } 15 .wrapper { 16 width: 300px; 17 height: 150px; 18 } 19 </style> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <script src="/resources/check-layout-th.js"></script> 23 <body onload="checkLayout('.grid')"> 24 25 <div id="log"></div> 26 27 <div class="grid" style="grid: 50px / 100px;" 28 data-expected-width="100" data-expected-height="50"> 29 </div> 30 31 <div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px;" 32 data-expected-width="200" data-expected-height="100"> 33 </div> 34 35 <div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content;" 36 data-expected-width="100" data-expected-height="50"> 37 </div> 38 39 <div class="grid" style="grid: 50px / 100px; overflow: scroll;" 40 data-expected-width="115" data-expected-height="65"> 41 </div> 42 43 <div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px; overflow: scroll;" 44 data-expected-width="200" data-expected-height="100"> 45 </div> 46 47 <div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content; overflow: scroll;" 48 data-expected-width="115" data-expected-height="65"> 49 </div> 50 51 <div class="grid" style="grid: 50px / 100px; margin: 2px 4px;" 52 data-expected-width="100" data-expected-height="50"> 53 </div> 54 55 <div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px;" 56 data-expected-width="120" data-expected-height="60"> 57 </div> 58 59 <div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px; padding: 3px 6px;" 60 data-expected-width="132" data-expected-height="66"> 61 </div> 62 63 <div class="grid" style="grid: 60% / 50%;" 64 data-expected-width="0" data-expected-height="0"> 65 </div> 66 67 <div class="grid" style="grid: auto / auto;" 68 data-expected-width="0" data-expected-height="0"> 69 </div> 70 71 <div class="grid" style="grid: 1fr / 2fr;" 72 data-expected-width="0" data-expected-height="0"> 73 </div> 74 75 <div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);" 76 data-expected-width="0" data-expected-height="0"> 77 </div> 78 79 <div class="grid" style="grid: fit-content(50px) / fit-content(100px);" 80 data-expected-width="0" data-expected-height="0"> 81 </div> 82 83 <div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px);" 84 data-expected-width="100" data-expected-height="60"> 85 </div> 86 87 <div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px); width: min-content; height: min-content;" 88 data-expected-width="50" data-expected-height="60"> 89 </div> 90 91 <div class="grid" style="grid: auto 50px 20% 1fr / 100px auto 10% 2fr;" 92 data-expected-width="100" data-expected-height="50"> 93 </div> 94 95 <div class="grid" style="grid: repeat(3, 20px) / repeat(4, 25px);" 96 data-expected-width="100" data-expected-height="60"> 97 </div> 98 99 <div class="grid" style="grid: repeat(3, 20px 10px) / repeat(2, 25px auto 25px);" 100 data-expected-width="100" data-expected-height="90"> 101 </div> 102 103 <div class="grid" style="grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);" 104 data-expected-width="100" data-expected-height="50"> 105 </div> 106 107 <div class="grid" style="grid: repeat(auto-fill, 25px 25px) / repeat(auto-fill, 50px 50px);" 108 data-expected-width="100" data-expected-height="50"> 109 </div> 110 111 <div class="grid" style="grid: repeat(auto-fill, 25px 20% 25px) / repeat(auto-fill, 50px 10% 50px);" 112 data-expected-width="100" data-expected-height="50"> 113 </div> 114 115 <div class="grid" style="grid: repeat(auto-fit, 50px) / repeat(auto-fit, 100px);" 116 data-expected-width="0" data-expected-height="0"> 117 </div> 118 119 <div class="grid" style="grid: repeat(auto-fit, 25px 20% 25px) / repeat(auto-fit, 50px 10% 50px);" 120 data-expected-width="0" data-expected-height="0"> 121 </div> 122 123 <div class="grid" style="grid: 10px repeat(auto-fill, 20px) 10px / 25px repeat(auto-fill, 50px) 25px;" 124 data-expected-width="100" data-expected-height="40"> 125 </div> 126 127 <div class="grid" style="grid: 50px fit-content(20px) / 100px fit-content(50px);" 128 data-expected-width="100" data-expected-height="50"> 129 </div> 130 131 <div class="grid" style="grid: 50px / 100px; grid-gap: 10px 20px;" 132 data-expected-width="100" data-expected-height="50"> 133 </div> 134 135 <div class="grid" style="grid: 25px 25px / 50px 50px; grid-gap: 10px 20px;" 136 data-expected-width="120" data-expected-height="60"> 137 </div> 138 139 <div class="grid" style="grid: 10px repeat(2, 10px) / 20px repeat(4, 20px); grid-gap: 5px 10px;" 140 data-expected-width="140" data-expected-height="40"> 141 </div> 142 143 <div class="grid" style="grid: repeat(auto-fill, 10px 20% 10px) / repeat(auto-fill, 20px 10% 20px); grid-gap: 5px 10px;" 144 data-expected-width="60" data-expected-height="30"> 145 </div> 146 147 <div class="grid" style="grid: 50px repeat(auto-fill, 10px 10px) / 100px repeat(auto-fill, 20px 20px); grid-gap: 5px 10px;" 148 data-expected-width="160" data-expected-height="80"> 149 </div> 150 151 <div class="grid" style="grid: repeat(auto-fill, 10px 10px) 50px / repeat(auto-fill, 20px 20px) 100px; grid-gap: 5px 10px;" 152 data-expected-width="160" data-expected-height="80"> 153 </div> 154 155 <div class="grid" style="grid: 25px repeat(auto-fill, 10px 10px) 25px / 50px repeat(auto-fill, 20px 20px) 50px; grid-gap: 5px 10px;" 156 data-expected-width="170" data-expected-height="85"> 157 </div> 158 159 <div class="grid" style="grid: 25px repeat(auto-fit, 10px 10px) 25px / 50px repeat(auto-fit, 20px 20px) 50px; grid-gap: 5px 10px;" 160 data-expected-width="110" data-expected-height="55"> 161 </div> 162 163 <div class="wrapper"> 164 <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);" 165 data-expected-width="100" data-expected-height="75"> 166 </div> 167 </div> 168 169 <div class="wrapper"> 170 <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);" 171 data-expected-width="0" data-expected-height="0"> 172 </div> 173 </div> 174 175 <div class="wrapper"> 176 <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);" 177 data-expected-width="100" data-expected-height="75"> 178 <div></div> 179 </div> 180 </div> 181 182 <div class="wrapper"> 183 <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);" 184 data-expected-width="0" data-expected-height="0"> 185 <div></div> 186 </div> 187 </div> 188 189 <div class="grid" style="grid: auto 50px / 100px auto;" 190 data-expected-width="100" data-expected-height="50"> 191 <div data-expected-width="100" data-expected-height="10" 192 data-offset-x="0" data-offset-y="0">X</div> 193 <div data-expected-width="40" data-expected-height="10" 194 data-offset-x="100" data-offset-y="0">XX</div> 195 <div data-expected-width="100" data-expected-height="50" 196 data-offset-x="0" data-offset-y="10">XXX</div> 197 <div data-expected-width="40" data-expected-height="50" 198 data-offset-x="100" data-offset-y="10">XXXX</div> 199 </div> 200 201 </body>