grid-align-justify-margin-border-padding.html (18592B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout test: box model parts and alignment properties</title> 4 <link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> 6 <meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties, in both LTR and RTL directions."> 7 <meta name="flags" content="ahem"> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <link rel="stylesheet" href="/css/support/alignment.css"> 10 <link rel="stylesheet" href="/css/support/width-keyword-classes.css"> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 13 <style> 14 15 .grid { 16 grid-template-columns: 100px 200px; 17 grid-template-rows: 200px 200px; 18 padding: 10px 15px 20px 30px; 19 border-width: 5px 10px 15px 20px; 20 border-style: dotted; 21 border-color: blue; 22 position: relative; 23 } 24 25 .cell { 26 width: 20px; 27 height: 40px; 28 margin: 4px 8px 12px 16px; 29 } 30 </style> 31 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 <script type="text/javascript"> 36 setup({ explicit_done: true }); 37 </script> 38 39 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 40 41 <p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p> 42 43 <div> 44 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 45 direction: LTR | align-items: 'auto' | justify-items: 'auto'</p> 46 <div class="grid fit-content" data-expected-width="375" data-expected-height="450"> 47 <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 48 <div class="cell firstRowSecondColumn" data-offset-x="146" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 49 <div class="cell secondRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 50 <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 51 </div> 52 </div> 53 54 <div> 55 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 56 direction: LTR | align-items: 'center' | justify-items: 'center'</p> 57 <div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450"> 58 <div class="firstRowFirstColumn cell" data-offset-x="74" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div> 59 <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 60 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 61 <div class="cell secondRowSecondColumn" data-offset-x="224" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div> 62 </div> 63 </div> 64 65 <div> 66 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 67 direction: LTR | align-items: 'end' | justify-items: 'end'</p> 68 <div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450"> 69 <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 70 <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 71 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 72 <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> 73 </div> 74 </div> 75 76 <div> 77 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 78 direction: LTR | align-items: 'start' | justify-items: 'left'</p> 79 <div class="grid fit-content alignItemsStart justifyItemsLeft" data-expected-width="375" data-expected-height="450"> 80 <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 81 <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 82 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 83 <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 84 </div> 85 </div> 86 87 <div> 88 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 89 direction: LTR | align-items: 'start' | justify-items: 'right'</p> 90 <div class="grid fit-content alignItemsStart justifyItemsRight" data-expected-width="375" data-expected-height="450"> 91 <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 92 <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 93 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 94 <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 95 </div> 96 </div> 97 98 <div> 99 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 100 direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p> 101 <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450"> 102 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 103 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 104 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 105 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 106 </div> 107 </div> 108 109 <div> 110 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 111 direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p> 112 <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450"> 113 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 114 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 115 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 116 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="146" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> 117 </div> 118 </div> 119 120 <div> 121 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 122 direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> 123 <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450"> 124 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 125 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 126 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 127 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 128 </div> 129 </div> 130 131 <div> 132 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 133 direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> 134 <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450"> 135 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 136 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 137 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 138 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> 139 </div> 140 </div> 141 142 <!-- RTL direction. --> 143 <div> 144 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 145 direction: RTL | align-items: 'auto' | justify-items: 'auto'</p> 146 <div class="grid fit-content directionRTL" data-expected-width="375" data-expected-height="450"> 147 <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 148 <div class="cell firstRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 149 <div class="cell secondRowFirstColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 150 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 151 </div> 152 </div> 153 154 <div> 155 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 156 direction: RTL | align-items: 'center' | justify-items: 'center'</p> 157 <div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450"> 158 <div class="cell firstRowFirstColumn" data-offset-x="274" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div> 159 <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 160 <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 161 <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div> 162 </div> 163 </div> 164 165 <div> 166 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 167 direction: RTL | align-items: 'end' | justify-items: 'end'</p> 168 <div class="grid fit-content directionRTL itemsEnd" data-expected-width="375" data-expected-height="450"> 169 <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 170 <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 171 <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 172 <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> 173 </div> 174 </div> 175 176 <div> 177 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 178 direction: RTL | align-items: 'start' | justify-items: 'left'</p> 179 <div class="grid fit-content directionRTL alignItemsStart justifyItemsLeft" data-expected-width="375" data-expected-height="450"> 180 <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 181 <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 182 <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 183 <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 184 </div> 185 </div> 186 187 <div> 188 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 189 direction: RTL | align-items: 'start' | justify-items: 'right'</p> 190 <div class="grid fit-content directionRTL alignItemsStart justifyItemsRight" data-expected-width="375" data-expected-height="450"> 191 <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 192 <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 193 <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 194 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 195 </div> 196 </div> 197 198 <div> 199 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 200 direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p> 201 <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450"> 202 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 203 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 204 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 205 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 206 </div> 207 </div> 208 209 <div> 210 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 211 direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p> 212 <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450"> 213 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="302" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 214 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 215 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 216 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> 217 </div> 218 </div> 219 220 <div> 221 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 222 direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> 223 <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450"> 224 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 225 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 226 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 227 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 228 </div> 229 </div> 230 231 <div> 232 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 233 direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> 234 <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450"> 235 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 236 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 237 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> 238 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> 239 </div> 240 </div> 241 242 </body>