third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.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: 300px;
  15     height: 200px;
  16 }
  17
  18 .cell {
  19     width: 20px;
  20     height: 40px;
  21 }
  22
  23 .alignContentStart {
  24     align-content: start;
  25 }
  26
  27 .alignContentEnd {
  28     align-content: end;
  29 }
  30
  31 .alignContentCenter {
  32     align-content: center;
  33 }
  34
  35 .alignContentLeft {
  36     align-content: left;
  37 }
  38
  39 .alignContentRight {
  40     align-content: right;
  41 }
  42
  43 .alignContentFlexStart {
  44     align-content: flex-start;
  45 }
  46
  47 .alignContentFlexEnd {
  48     align-content: flex-end;
  49 }
  50 </style>
  51 </head>
  52 <body onload="checkLayout('.grid')">
  53
  54 <p>This test checks that the align-content property is applied correctly in vertical-lr grids.</p>
  55
  56 <div style="position: relative">
  57     <p>direction: LTR | align-content: 'center'</p>
  58     <div class="grid verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200">
  59         <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  60         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  61         <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  62         <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
  63     </div>
  64 </div>
  65
  66 <div style="position: relative">
  67     <p>direction: LTR | align-content: 'left'</p>
  68     <div class="grid verticalLR alignContentLeft" data-expected-width="300" data-expected-height="200">
  69         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  70         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  71         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  72         <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
  73     </div>
  74 </div>
  75
  76 <div style="position: relative">
  77     <p>direction: LTR | align-content: 'right'</p>
  78     <div class="grid verticalLR alignContentRight" data-expected-width="300" data-expected-height="200">
  79         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  80         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  81         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  82         <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
  83     </div>
  84 </div>
  85
  86 <div style="position: relative">
  87     <p>direction: LTR | align-content: 'start'</p>
  88     <div class="grid verticalLR alignContentStart" data-expected-width="300" data-expected-height="200">
  89         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  90         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  91         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  92         <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
  93     </div>
  94 </div>
  95
  96 <div style="position: relative">
  97     <p>direction: LTR | align-content: 'end'</p>
  98     <div class="grid verticalLR alignContentEnd" data-expected-width="300" data-expected-height="200">
  99         <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 100         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 101         <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 102         <div class="cell secondRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
 103     </div>
 104 </div>
 105
 106 <!-- RTL direction. -->
 107 <div style="position: relative">
 108     <p>direction: RTL | align-content: 'center'</p>
 109     <div class="grid directionRTL verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200">
 110         <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 111         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 112         <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 113         <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 114     </div>
 115 </div>
 116
 117 <div style="position: relative">
 118     <p>direction: RTL | align-content: 'left'</p>
 119     <div class="grid directionRTL verticalLR alignContentLeft" data-expected-width="300" data-expected-height="200">
 120         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 121         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 122         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 123         <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 124     </div>
 125 </div>
 126
 127 <div style="position: relative">
 128     <p>direction: RTL | align-content: 'right'</p>
 129     <div class="grid directionRTL verticalLR alignContentRight" data-expected-width="300" data-expected-height="200">
 130         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 131         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 132         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 133         <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 134     </div>
 135 </div>
 136
 137 <div style="position: relative">
 138     <p>direction: RTL | align-content: 'start'</p>
 139     <div class="grid directionRTL verticalLR alignContentStart" data-expected-width="300" data-expected-height="200">
 140         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 141         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 142         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 143         <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 144     </div>
 145 </div>
 146
 147 <div style="position: relative">
 148     <p>direction: RTL | align-content: 'end'</p>
 149     <div class="grid directionRTL verticalLR alignContentEnd" data-expected-width="300" data-expected-height="200">
 150         <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 151         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 152         <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 153         <div class="cell secondRowSecondColumn" data-offset-x="200" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 154     </div>
 155 </div>
 156
 157 </body>
 158 </html>