grid-align-justify-margin-border-padding-vertical-rl.html (19046B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout test: box model parts and alignment properties, vertical-RL 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-RL 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-RL 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 verticalRL" data-expected-width="475" data-expected-height="350"> 48 <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 49 <div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> 50 <div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 51 <div class="cell secondRowSecondColumn" data-offset-x="202" 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 verticalRL itemsCenter" data-expected-width="475" data-expected-height="350"> 59 <div class="firstRowFirstColumn cell" data-offset-x="324" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div> 60 <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> 61 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> 62 <div class="cell secondRowSecondColumn" data-offset-x="124" 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 verticalRL itemsEnd" data-expected-width="475" data-expected-height="350"> 70 <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> 71 <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> 72 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> 73 <div class="cell secondRowSecondColumn" data-offset-x="46" 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 verticalRL itemsLeft" data-expected-width="475" data-expected-height="350"> 81 <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 82 <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> 83 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> 84 <div class="cell secondRowSecondColumn" data-offset-x="202" 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 verticalRL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350"> 92 <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> 93 <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> 94 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> 95 <div class="cell secondRowSecondColumn" data-offset-x="202" 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-rl) | justify-items: 'self-start' (direction: rtl)</p> 102 <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350"> 103 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> 104 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> 105 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> 106 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" 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-rl) | justify-items: 'self-end' (direction: rtl)</p> 113 <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> 114 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 115 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> 116 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> 117 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" 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 verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350"> 125 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 126 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> 127 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> 128 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" 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 verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> 136 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> 137 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> 138 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> 139 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> 140 </div> 141 </div> 142 143 144 <!-- RTL direction. --> 145 <div> 146 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 147 direction: RTL | align-items: 'auto' | justify-items: 'auto'</p> 148 <div class="grid fit-content directionRTL verticalRL" data-expected-width="475" data-expected-height="350"> 149 <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> 150 <div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 151 <div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> 152 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 153 </div> 154 </div> 155 156 <div> 157 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 158 direction: RTL | align-items: 'center' | justify-items: 'center'</p> 159 <div class="grid fit-content directionRTL verticalRL itemsCenter" data-expected-width="475" data-expected-height="350"> 160 <div class="cell firstRowFirstColumn" data-offset-x="324" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div> 161 <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 162 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> 163 <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div> 164 </div> 165 </div> 166 167 <div> 168 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 169 direction: RTL | align-items: 'end' | justify-items: 'end'</p> 170 <div class="grid fit-content directionRTL verticalRL itemsEnd" data-expected-width="475" data-expected-height="350"> 171 <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 172 <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 173 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> 174 <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 175 </div> 176 </div> 177 178 <div> 179 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 180 direction: RTL | align-items: 'start' | justify-items: 'left'</p> 181 <div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsLeft" data-expected-width="475" data-expected-height="350"> 182 <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 183 <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 184 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> 185 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 186 </div> 187 </div> 188 189 <div> 190 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 191 direction: RTL | align-items: 'start' | justify-items: 'right'</p> 192 <div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350"> 193 <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> 194 <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 195 <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> 196 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 197 </div> 198 </div> 199 200 <div> 201 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 202 direction: RTL (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: ltr)</p> 203 <div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350"> 204 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 205 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 206 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> 207 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 208 </div> 209 </div> 210 211 <div> 212 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 213 direction: RTL (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: ltr)</p> 214 <div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> 215 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> 216 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 217 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> 218 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 219 </div> 220 </div> 221 222 <div> 223 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 224 direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> 225 <div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350"> 226 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> 227 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 228 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> 229 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> 230 </div> 231 </div> 232 233 <div> 234 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> 235 direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> 236 <div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> 237 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> 238 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> 239 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> 240 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 241 </div> 242 </div> 243 244 </body>