third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.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.</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" data-expected-width="375" data-expected-height="450">
  73         <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
  74         <div class="cell firstRowSecondColumn"  data-offset-x="146" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
  75         <div class="cell secondRowFirstColumn"  data-offset-x="46"  data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
  76         <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" 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 itemsCenter" data-expected-width="375" data-expected-height="450">
  84         <div class="firstRowFirstColumn cell"     data-offset-x="74"  data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
  85         <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
  86         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
  87         <div class="cell secondRowSecondColumn"   data-offset-x="224" data-offset-y="286" 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 itemsEnd" data-expected-width="375" data-expected-height="450">
  95         <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
  96         <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
  97         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
  98         <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" 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 itemsLeft" data-expected-width="375" data-expected-height="450">
 106         <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 107         <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 108         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 109         <div class="cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" 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 itemsRight" data-expected-width="375" data-expected-height="450">
 117         <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 118         <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 119         <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 120         <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" 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 itemsSelfStart" data-expected-width="375" data-expected-height="450">
 128         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 129         <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 130         <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 131         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" 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 itemsSelfEnd" data-expected-width="375" data-expected-height="450">
 139         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
 140         <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 141         <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 142         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="358" 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 itemsSelfStart" data-expected-width="375" data-expected-height="450">
 150         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 151         <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 152         <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 153         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" 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 itemsSelfEnd" data-expected-width="375" data-expected-height="450">
 161         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="102"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
 162         <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 163         <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 164         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
 165     </div>
 166 </div>
 167
 168 <!-- RTL direction. -->
 169 <div>
 170     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 171         direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
 172     <div class="grid directionRTL" data-expected-width="375" data-expected-height="450">
 173         <div class="cell firstRowFirstColumn"   data-offset-x="302" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
 174         <div class="cell firstRowSecondColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
 175         <div class="cell secondRowFirstColumn"  data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
 176         <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
 177     </div>
 178 </div>
 179
 180 <div>
 181     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 182         direction: RTL | align-items: 'center' | justify-items: 'center'</p>
 183     <div class="grid directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
 184         <div class="cell firstRowFirstColumn"     data-offset-x="274" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
 185         <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 186         <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 187         <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="286" data-expected-width="20"  data-expected-height="40"></div>
 188     </div>
 189 </div>
 190
 191 <div>
 192     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 193         direction: RTL | align-items: 'end' | justify-items: 'end'</p>
 194     <div class="grid directionRTL itemsEnd"       data-expected-width="375" data-expected-height="450">
 195         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
 196         <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 197         <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 198         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
 199     </div>
 200 </div>
 201
 202 <div>
 203     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 204         direction: RTL | align-items: 'left' | justify-items: 'left'</p>
 205     <div class="grid directionRTL itemsLeft"      data-expected-width="375" data-expected-height="450">
 206         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 207         <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 208         <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 209         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
 210     </div>
 211 </div>
 212
 213 <div>
 214     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 215         direction: RTL | align-items: 'right' | justify-items: 'right'</p>
 216     <div class="grid directionRTL itemsRight"     data-expected-width="375" data-expected-height="450">
 217         <div class="cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 218         <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 219         <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 220         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
 221     </div>
 222 </div>
 223
 224 <div>
 225     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 226         direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
 227     <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
 228         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 229         <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 230         <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 231         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
 232     </div>
 233 </div>
 234
 235 <div>
 236     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 237         direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
 238     <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
 239         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
 240         <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 241         <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 242         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
 243     </div>
 244 </div>
 245
 246 <div>
 247     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 248         direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
 249     <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
 250         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
 251         <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 252         <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 253         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
 254     </div>
 255 </div>
 256
 257 <div>
 258     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
 259         direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
 260     <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
 261         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
 262         <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
 263         <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
 264         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
 265     </div>
 266 </div>
 267
 268 </body>
 269 </html>