third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <script src="../../resources/check-layout.js"></script>
   6 <style>
   7 body {
   8     margin: 0;
   9 }
  10
  11 .grid {
  12     grid-template-columns: 100px 200px;
  13     grid-template-rows: 200px 200px;
  14     padding: 10px 15px 20px 30px;
  15     border-width: 5px 10px 15px 20px;
  16     border-style: dotted;
  17     border-color: blue;
  18     width: -webkit-fit-content;
  19     position: relative;
  20 }
  21
  22 .cell {
  23     width: 20px;
  24     height: 40px;
  25     margin: 4px 8px 12px 16px;
  26 }
  27
  28 .itemsCenter {
  29     align-items: center;
  30     justify-items: center;
  31 }
  32
  33 .itemsEnd {
  34     align-items: end;
  35     justify-items: end;
  36 }
  37
  38 .itemsLeft {
  39     align-items: left;
  40     justify-items: left;
  41 }
  42
  43 .itemsRight {
  44     align-items: right;
  45     justify-items: right;
  46 }
  47
  48 .itemsSelfStart {
  49     align-items: self-start;
  50     justify-items: self-start;
  51 }
  52
  53 .itemsSelfEnd {
  54     align-items: self-end;
  55     justify-items: self-end;
  56 }
  57
  58 .stretch {
  59     align-self: stretch;
  60     justify-self: stretch;
  61 }
  62
  63 </style>
  64 </head>
  65 <body onload="checkLayout('.grid')">
  66
  67 <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>
  68
  69 <div>
  70     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
  71         direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
  72     <div class="grid verticalRL" data-expected-width="475" data-expected-height="350">
  73         <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
  74         <div class="cell firstRowSecondColumn"  data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
  75         <div class="cell secondRowFirstColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
  76         <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
  77     </div>
  78 </div>
  79
  80 <div>
  81     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
  82         direction: LTR | align-items: 'center' | justify-items: 'center'</p>
  83     <div class="grid verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
  84         <div class="firstRowFirstColumn cell"     data-offset-x="324" data-offset-y="36"  data-expected-width="20"  data-expected-height="40"></div>
  85         <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
  86         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
  87         <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="186" data-expected-width="20"  data-expected-height="40"></div>
  88     </div>
  89 </div>
  90
  91 <div>
  92     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
  93         direction: LTR | align-items: 'end' | justify-items: 'end'</p>
  94     <div class="grid verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
  95         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
  96         <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
  97         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
  98         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
  99     </div>
 100 </div>
 101
 102 <div>
 103     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 104         direction: LTR | align-items: 'left' | justify-items: 'left'</p>
 105     <div class="grid verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
 106         <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 107         <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
 108         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
 109         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
 110     </div>
 111 </div>
 112
 113 <div>
 114     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 115         direction: LTR | align-items: 'right' | justify-items: 'right'</p>
 116     <div class="grid verticalRL itemsRight" data-expected-width="475" data-expected-height="350">
 117         <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
 118         <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
 119         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
 120         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
 121     </div>
 122 </div>
 123
 124 <div>
 125     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 126         direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
 127     <div class="grid directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
 128         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
 129         <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
 130         <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
 131         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
 132     </div>
 133 </div>
 134
 135 <div>
 136     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 137         direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
 138     <div class="grid directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
 139         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 140         <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
 141         <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
 142         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
 143     </div>
 144 </div>
 145
 146 <div>
 147     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 148         direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
 149     <div class="grid directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
 150         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
 151         <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
 152         <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
 153         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
 154     </div>
 155 </div>
 156
 157 <div>
 158     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 159         direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
 160     <div class="grid directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
 161         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="58"  data-expected-width="20"  data-expected-height="40"></div>
 162         <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
 163         <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
 164         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
 165     </div>
 166 </div>
 167
 168
 169 <!-- RTL direction. -->
 170 <div>
 171     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 172         direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
 173     <div class="grid verticalRL directionRTL" data-expected-width="475" data-expected-height="350">
 174         <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
 175         <div class="cell firstRowSecondColumn"  data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
 176         <div class="cell secondRowFirstColumn"  data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
 177         <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
 178     </div>
 179 </div>
 180
 181 <div>
 182     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 183         direction: RTL | align-items: 'center' | justify-items: 'center'</p>
 184     <div class="grid verticalRL directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
 185         <div class="cell firstRowFirstColumn"     data-offset-x="324" data-offset-y="236" data-expected-width="20"  data-expected-height="40"></div>
 186         <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 187         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
 188         <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
 189     </div>
 190 </div>
 191
 192 <div>
 193     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 194         direction: RTL | align-items: 'end' | justify-items: 'end'</p>
 195     <div class="grid verticalRL directionRTL itemsEnd"       data-expected-width="475" data-expected-height="350">
 196         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
 197         <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 198         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
 199         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 200     </div>
 201 </div>
 202
 203 <div>
 204     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 205         direction: RTL | align-items: 'left' | justify-items: 'left'</p>
 206     <div class="grid verticalRL directionRTL itemsLeft"      data-expected-width="475" data-expected-height="350">
 207         <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
 208         <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 209         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
 210         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 211     </div>
 212 </div>
 213
 214 <div>
 215     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 216         direction: RTL | align-items: 'right' | justify-items: 'right'</p>
 217     <div class="grid verticalRL directionRTL itemsRight"     data-expected-width="475" data-expected-height="350">
 218         <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
 219         <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 220         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
 221         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
 222     </div>
 223 </div>
 224
 225 <div>
 226     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 227         direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
 228     <div class="grid verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
 229         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
 230         <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 231         <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
 232         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 233     </div>
 234 </div>
 235
 236 <div>
 237     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 238         direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
 239     <div class="grid verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
 240         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
 241         <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 242         <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
 243         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
 244     </div>
 245 </div>
 246
 247 <div>
 248     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 249         direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
 250     <div class="grid verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
 251         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
 252         <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 253         <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
 254         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="158"  data-expected-width="20"  data-expected-height="40"></div>
 255     </div>
 256 </div>
 257
 258 <div>
 259     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 260         direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
 261     <div class="grid verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
 262         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
 263         <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 264         <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
 265         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
 266     </div>
 267 </div>
 268
 269 </body>
 270 </html>