grid-box-sizing-001.html (6929B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid container and tracks sizes with box-sizing property</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#intrinsic-sizes"> 6 <link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> 7 <meta name="assert" content="The test checks the sizes of a grid container and its track depending on min-size constraints and the box-sizing property."> 8 <style> 9 .wrapper { 10 position: relative; 11 width: 200px; 12 height: 100px; 13 } 14 15 .grid { 16 position: absolute; 17 left: 0; 18 top: 0; 19 display: grid; 20 border-style: solid; 21 border-width: 5px 10px 15px 20px; 22 padding: 17px 13px 7px 3px; 23 } 24 25 .wholeWidth { 26 right: 0; 27 } 28 29 .wholeHeight { 30 bottom: 0; 31 } 32 .item { 33 background: cyan; 34 } 35 </style> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 40 <body onload="checkLayout('.grid')"> 41 42 <div id="log"></div> 43 44 <div class="wrapper"> 45 <div class="grid wholeWidth" style="height: 100px;" data-expected-width="200" data-expected-height="144"> 46 <div class="item" data-expected-width="154" data-expected-height="100"></div> 47 </div> 48 </div> 49 50 <div class="wrapper"> 51 <div class="grid wholeWidth" style="min-height: 100px;" data-expected-width="200" data-expected-height="144"> 52 <div class="item" data-expected-width="154" data-expected-height="100"></div> 53 </div> 54 </div> 55 56 <div class="wrapper"> 57 <div class="grid wholeWidth" style="height: 100px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 58 <div class="item" data-expected-width="154" data-expected-height="56"></div> 59 </div> 60 </div> 61 62 <div class="wrapper"> 63 <div class="grid wholeWidth" style="min-height: 100px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 64 <div class="item" data-expected-width="154" data-expected-height="56"></div> 65 </div> 66 </div> 67 68 <div class="wrapper"> 69 <div class="grid wholeWidth" style="bottom: 0;" data-expected-width="200" data-expected-height="100"> 70 <div class="item" data-expected-width="154" data-expected-height="56"></div> 71 </div> 72 </div> 73 74 <div class="wrapper"> 75 <div class="grid wholeWidth" style="bottom: 0;" data-expected-width="200" data-expected-height="100"> 76 <div class="item" data-expected-width="154" data-expected-height="56"></div> 77 </div> 78 </div> 79 80 <div class="wrapper"> 81 <div class="grid wholeWidth" style="bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 82 <div class="item" data-expected-width="154" data-expected-height="56"></div> 83 </div> 84 </div> 85 86 <div class="wrapper"> 87 <div class="grid wholeWidth" style="bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 88 <div class="item" data-expected-width="154" data-expected-height="56"></div> 89 </div> 90 </div> 91 92 <div class="wrapper"> 93 <div class="grid wholeWidth" style="height: 100px; bottom: 0;" data-expected-width="200" data-expected-height="144"> 94 <div class="item" data-expected-width="154" data-expected-height="100"></div> 95 </div> 96 </div> 97 98 <div class="wrapper"> 99 <div class="grid wholeWidth" style="min-height: 100px; bottom: 0;" data-expected-width="200" data-expected-height="144"> 100 <div class="item" data-expected-width="154" data-expected-height="100"></div> 101 </div> 102 </div> 103 104 <div class="wrapper"> 105 <div class="grid wholeWidth" style="height: 100px; bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 106 <div class="item" data-expected-width="154" data-expected-height="56"></div> 107 </div> 108 </div> 109 110 <div class="wrapper"> 111 <div class="grid wholeWidth" style="min-height: 100px; bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 112 <div class="item" data-expected-width="154" data-expected-height="56"></div> 113 </div> 114 </div> 115 116 <div class="wrapper"> 117 <div class="grid wholeHeight" style="width: 200px;" data-expected-width="246" data-expected-height="100"> 118 <div class="item" data-expected-width="200" data-expected-height="56"></div> 119 </div> 120 </div> 121 122 <div class="wrapper"> 123 <div class="grid wholeHeight" style="min-width: 200px;" data-expected-width="246" data-expected-height="100"> 124 <div class="item" data-expected-width="200" data-expected-height="56"></div> 125 </div> 126 </div> 127 128 <div class="wrapper"> 129 <div class="grid wholeHeight" style="width: 200px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 130 <div class="item" data-expected-width="154" data-expected-height="56"></div> 131 </div> 132 </div> 133 134 <div class="wrapper"> 135 <div class="grid wholeHeight" style="min-width: 200px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 136 <div class="item" data-expected-width="154" data-expected-height="56"></div> 137 </div> 138 </div> 139 140 <div class="wrapper"> 141 <div class="grid wholeHeight" style="right: 0;" data-expected-width="200" data-expected-height="100"> 142 <div class="item" data-expected-width="154" data-expected-height="56"></div> 143 </div> 144 </div> 145 146 <div class="wrapper"> 147 <div class="grid wholeHeight" style="right: 0;" data-expected-width="200" data-expected-height="100"> 148 <div class="item" data-expected-width="154" data-expected-height="56"></div> 149 </div> 150 </div> 151 152 <div class="wrapper"> 153 <div class="grid wholeHeight" style="right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 154 <div class="item" data-expected-width="154" data-expected-height="56"></div> 155 </div> 156 </div> 157 158 <div class="wrapper"> 159 <div class="grid wholeHeight" style="right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 160 <div class="item" data-expected-width="154" data-expected-height="56"></div> 161 </div> 162 </div> 163 164 <div class="wrapper"> 165 <div class="grid wholeHeight" style="width: 200px; right: 0;" data-expected-width="246" data-expected-height="100"> 166 <div class="item" data-expected-width="200" data-expected-height="56"></div> 167 </div> 168 </div> 169 170 <div class="wrapper"> 171 <div class="grid wholeHeight" style="min-width: 200px; right: 0;" data-expected-width="246" data-expected-height="100"> 172 <div class="item" data-expected-width="200" data-expected-height="56"></div> 173 </div> 174 </div> 175 176 <div class="wrapper"> 177 <div class="grid wholeHeight" style="width: 200px; right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 178 <div class="item" data-expected-width="154" data-expected-height="56"></div> 179 </div> 180 </div> 181 182 <div class="wrapper"> 183 <div class="grid wholeHeight" style="min-width: 200px; right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100"> 184 <div class="item" data-expected-width="154" data-expected-height="56"></div> 185 </div> 186 </div> 187 188 </body>