third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-justify-content.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: 50px 50px / 100px 100px;
  13     position: relative;
  14     width: 200px;
  15     height: 300px;
  16 }
  17
  18 .cell {
  19     width: 20px;
  20     height: 40px;
  21 }
  22
  23 .justifyContentBaseline {
  24     justify-content: baseline;
  25 }
  26
  27 .justifyContentLastBaseline {
  28     justify-content: last-baseline;
  29 }
  30
  31 .justifyContentStart {
  32     justify-content: start;
  33 }
  34
  35 .justifyContentEnd {
  36     justify-content: end;
  37 }
  38
  39 .justifyContentCenter {
  40     justify-content: center;
  41 }
  42
  43 .justifyContentLeft {
  44     justify-content: left;
  45 }
  46
  47 .justifyContentRight {
  48     justify-content: right;
  49 }
  50
  51 .justifyContentFlexStart {
  52     justify-content: flex-start;
  53 }
  54
  55 .justifyContentFlexEnd {
  56     justify-content: flex-end;
  57 }
  58 </style>
  59 </head>
  60 <body onload="checkLayout('.grid')">
  61
  62 <p>This test checks that the justify-content property is applied correctly when using content-position values.</p>
  63
  64 <div style="position: relative">
  65     <p>direction: LTR | justify-content: 'center'</p>
  66     <div class="grid justifyContentCenter" data-expected-width="200" data-expected-height="300">
  67         <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  68         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
  69         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
  70         <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
  71     </div>
  72 </div>
  73
  74 <div style="position: relative">
  75     <p>direction: LTR | justify-content: 'left'</p>
  76     <div class="grid justifyContentLeft" data-expected-width="200" data-expected-height="300">
  77         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  78         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
  79         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
  80         <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
  81     </div>
  82 </div>
  83
  84 <div style="position: relative">
  85     <p>direction: LTR | justify-content: 'right'</p>
  86     <div class="grid justifyContentRight" data-expected-width="200" data-expected-height="300">
  87         <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  88         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
  89         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
  90         <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
  91     </div>
  92 </div>
  93
  94 <div style="position: relative">
  95     <p>direction: LTR | justify-content: 'start'</p>
  96     <div class="grid justifyContentStart" data-expected-width="200" data-expected-height="300">
  97         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  98         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
  99         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 100         <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 101     </div>
 102 </div>
 103
 104 <div style="position: relative">
 105     <p>direction: LTR | justify-content: 'end'</p>
 106     <div class="grid justifyContentEnd" data-expected-width="200" data-expected-height="300">
 107         <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 108         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 109         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 110         <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 111     </div>
 112 </div>
 113
 114 <div style="position: relative">
 115     <p>direction: LTR | justify-content: 'flex-start'</p>
 116     <div class="grid justifyContentFlexStart" data-expected-width="200" data-expected-height="300">
 117         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 118         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 119         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 120         <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 121     </div>
 122 </div>
 123
 124 <div style="position: relative">
 125     <p>direction: LTR | justify-content: 'flex-end'</p>
 126     <div class="grid justifyContentFlexEnd" data-expected-width="200" data-expected-height="300">
 127         <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 128         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 129         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 130         <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 131     </div>
 132 </div>
 133
 134 <!-- Default alignment and initial values. -->
 135 <div style="position: relative">
 136     <p>direction: LTR | justify-content: 'auto' (resolved to 'start')</p>
 137     <div class="grid" data-expected-width="200" data-expected-height="300">
 138         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 139         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 140         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 141         <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 142     </div>
 143 </div>
 144
 145 <!-- RTL direction. -->
 146 <div style="position: relative">
 147     <p>direction: RTL | justify-content: 'center'</p>
 148     <div class="grid directionRTL justifyContentCenter" data-expected-width="200" data-expected-height="300">
 149         <div class="cell firstRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 150         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 151         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 152         <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 153     </div>
 154 </div>
 155
 156 <div style="position: relative">
 157     <p>direction: RTL | justify-content: 'left'</p>
 158     <div class="grid directionRTL justifyContentLeft" data-expected-width="200" data-expected-height="300">
 159         <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 160         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 161         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 162         <div class="cell secondRowSecondColumn" data-offset-x="30" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 163     </div>
 164 </div>
 165
 166 <div style="position: relative">
 167     <p>direction: RTL | justify-content: 'right'</p>
 168     <div class="grid directionRTL justifyContentRight" data-expected-width="200" data-expected-height="300">
 169         <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 170         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 171         <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 172         <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 173     </div>
 174 </div>
 175
 176 <div style="position: relative">
 177     <p>direction: RTL | justify-content: 'start'</p>
 178     <div class="grid directionRTL justifyContentStart" data-expected-width="200" data-expected-height="300">
 179         <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 180         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 181         <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 182         <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 183     </div>
 184 </div>
 185
 186 <div style="position: relative">
 187     <p>direction: RTL | justify-content: 'end'</p>
 188     <div class="grid directionRTL justifyContentEnd" data-expected-width="200" data-expected-height="300">
 189         <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 190         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 191         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 192         <div class="cell secondRowSecondColumn" data-offset-x="30" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 193     </div>
 194 </div>
 195
 196 </body>
 197 </html>