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