grid-positioned-items-padding-001.html (11648B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid positioned items padding</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/#abspos" title="9. Absolute Positioning"> 6 <meta name="assert" content="This test checks that positioned grid items can be placed directly on the padding."> 7 <link rel="stylesheet" href="/css/support/grid.css"> 8 <style> 9 10 .grid { 11 grid-template-columns: 100px 200px; 12 grid-template-rows: 50px 150px; 13 width: 500px; 14 height: 300px; 15 border: 5px solid black; 16 margin: 30px; 17 padding: 15px; 18 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 19 position: relative; 20 } 21 22 .autoFit { 23 grid-template-columns: repeat(auto-fit, 100px); 24 grid-template-rows: repeat(auto-fit, 100px); 25 } 26 27 .absolute { 28 position: absolute; 29 top: 0; 30 left: 0; 31 width: 100%; 32 height: 100%; 33 background: lime; 34 } 35 36 .gap { grid-gap: 10px; } 37 38 </style> 39 <script src="/resources/testharness.js"></script> 40 <script src="/resources/testharnessreport.js"></script> 41 <script src="/resources/check-layout-th.js"></script> 42 43 <body onload="checkLayout('.grid')"> 44 45 <div id="log"></div> 46 47 <div class="grid"> 48 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" 49 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 50 </div> 51 <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;" 52 data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15"> 53 </div> 54 <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;" 55 data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50"> 56 </div> 57 <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;" 58 data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> 59 </div> 60 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;" 61 data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115"> 62 </div> 63 <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;" 64 data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150"> 65 </div> 66 </div> 67 68 <div class="grid"> 69 <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;" 70 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 71 </div> 72 <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;" 73 data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15"> 74 </div> 75 <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;" 76 data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50"> 77 </div> 78 <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;" 79 data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> 80 </div> 81 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;" 82 data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115"> 83 </div> 84 <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;" 85 data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150"> 86 </div> 87 </div> 88 89 <div class="grid"> 90 <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;" 91 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 92 </div> 93 <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;" 94 data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15"> 95 </div> 96 <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;" 97 data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50"> 98 </div> 99 <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;" 100 data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> 101 </div> 102 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;" 103 data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115"> 104 </div> 105 <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;" 106 data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150"> 107 </div> 108 </div> 109 110 <div class="grid"> 111 <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;" 112 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> 113 </div> 114 <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;" 115 data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="315"> 116 </div> 117 <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;" 118 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="50"> 119 </div> 120 <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;" 121 data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> 122 </div> 123 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;" 124 data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115"> 125 </div> 126 <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;" 127 data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150"> 128 </div> 129 </div> 130 131 <div class="grid directionRTL"> 132 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" 133 data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 134 </div> 135 <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;" 136 data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15"> 137 </div> 138 <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;" 139 data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50"> 140 </div> 141 <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;" 142 data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> 143 </div> 144 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;" 145 data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115"> 146 </div> 147 <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;" 148 data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150"> 149 </div> 150 </div> 151 152 <div class="grid directionRTL"> 153 <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;" 154 data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 155 </div> 156 <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;" 157 data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15"> 158 </div> 159 <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;" 160 data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50"> 161 </div> 162 <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;" 163 data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> 164 </div> 165 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;" 166 data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115"> 167 </div> 168 <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;" 169 data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150"> 170 </div> 171 </div> 172 173 <div class="grid directionRTL"> 174 <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;" 175 data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 176 </div> 177 <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;" 178 data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15"> 179 </div> 180 <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;" 181 data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50"> 182 </div> 183 <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;" 184 data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> 185 </div> 186 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;" 187 data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115"> 188 </div> 189 <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;" 190 data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150"> 191 </div> 192 </div> 193 194 <div class="grid directionRTL"> 195 <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;" 196 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> 197 </div> 198 <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;" 199 data-offset-x="415" data-offset-y="15" data-expected-width="100" data-expected-height="315"> 200 </div> 201 <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;" 202 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="50"> 203 </div> 204 <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;" 205 data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> 206 </div> 207 <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;" 208 data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115"> 209 </div> 210 <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;" 211 data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150"> 212 </div> 213 </div> 214 215 <div class="grid autoFit gap"> 216 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" 217 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 218 </div> 219 <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;" 220 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> 221 </div> 222 </div> 223 224 <div class="grid autoFit gap"> 225 <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;" 226 data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 227 </div> 228 <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;" 229 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> 230 </div> 231 </div> 232 233 <div class="grid autoFit directionRTL gap"> 234 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" 235 data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 236 </div> 237 <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;" 238 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> 239 </div> 240 </div> 241 242 <div class="grid autoFit directionRTL gap"> 243 <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;" 244 data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> 245 </div> 246 <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;" 247 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> 248 </div> 249 </div> 250 251 </body>