third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-content-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: 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
  51 </style>
  52 </head>
  53 <body onload="checkLayout('.grid')">
  54
  55 <p>This test checks that the align-content property is applied correctly in vertical-rl grids.</p>
  56
  57 <div style="position: relative">
  58     <p>direction: LTR | align-content: 'center'</p>
  59     <div class="grid verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
  60         <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  61         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  62         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  63         <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
  64     </div>
  65 </div>
  66
  67 <div style="position: relative">
  68     <p>direction: LTR | align-content: 'left'</p>
  69     <div class="grid verticalRL alignContentLeft" data-expected-width="300" data-expected-height="200">
  70         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  71         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  72         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  73         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
  74     </div>
  75 </div>
  76
  77 <div style="position: relative">
  78     <p>direction: LTR | align-content: 'right'</p>
  79     <div class="grid verticalRL alignContentRight" data-expected-width="300" data-expected-height="200">
  80         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  81         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  82         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  83         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
  84     </div>
  85 </div>
  86
  87 <div style="position: relative">
  88     <p>direction: LTR | align-content: 'start'</p>
  89     <div class="grid verticalRL alignContentStart" data-expected-width="300" data-expected-height="200">
  90         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  91         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  92         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  93         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
  94     </div>
  95 </div>
  96
  97 <div style="position: relative">
  98     <p>direction: LTR | align-content: 'end'</p>
  99     <div class="grid verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200">
 100         <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 101         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 102         <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 103         <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
 104     </div>
 105 </div>
 106
 107 <!-- RTL direction. -->
 108 <div style="position: relative">
 109     <p>direction: RTL | align-content: 'center'</p>
 110     <div class="grid directionRTL verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
 111         <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 112         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 113         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 114         <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 115     </div>
 116 </div>
 117
 118 <div style="position: relative">
 119     <p>direction: RTL | align-content: 'left'</p>
 120     <div class="grid directionRTL verticalRL alignContentLeft" data-expected-width="300" data-expected-height="200">
 121         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 122         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 123         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 124         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 125     </div>
 126 </div>
 127
 128 <div style="position: relative">
 129     <p>direction: RTL | align-content: 'right'</p>
 130     <div class="grid directionRTL verticalRL alignContentRight" data-expected-width="300" data-expected-height="200">
 131         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 132         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 133         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 134         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 135     </div>
 136 </div>
 137
 138 <div style="position: relative">
 139     <p>direction: RTL | align-content: 'start'</p>
 140     <div class="grid directionRTL verticalRL alignContentStart" data-expected-width="300" data-expected-height="200">
 141         <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 142         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 143         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 144         <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 145     </div>
 146 </div>
 147
 148 <div style="position: relative">
 149     <p>direction: RTL | align-content: 'end'</p>
 150     <div class="grid directionRTL verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200">
 151         <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 152         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 153         <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 154         <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
 155     </div>
 156 </div>
 157
 158 </body>
 159 </html>