src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.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 100px;
  13     grid-template-rows: 200px 200px;
  14     width: -webkit-fit-content;
  15     margin-bottom: 20px;
  16 }
  17
  18 .widthAndHeightSet {
  19     width: 20px;
  20     height: 40px;
  21 }
  22
  23 .onlyWidthSet {
  24     width: 20px;
  25 }
  26
  27 .onlyHeightSet {
  28     height: 40px;
  29 }
  30
  31 .maxHeight {
  32     max-height: 160px;
  33 }
  34
  35 .maxWidth {
  36     max-width: 90px;
  37 }
  38
  39 .alignItemsAuto {
  40     align-items: auto;
  41 }
  42
  43 .alignItemsStretch {
  44     align-items: stretch;
  45 }
  46
  47 .alignItemsStart {
  48     align-items: start;
  49 }
  50
  51 .alignSelfAuto {
  52     align-self: auto;
  53 }
  54
  55 .alignSelfStretch {
  56     align-self: stretch;
  57 }
  58
  59 .alignSelfStart {
  60     align-self: start;
  61 }
  62
  63 .justifyItemsAuto {
  64     justify-items: auto;
  65 }
  66
  67 .justifyItemsStretch {
  68     justify-items: stretch;
  69 }
  70
  71 .justifyItemsStart {
  72     justify-items: start;
  73 }
  74
  75 .justifySelfAuto {
  76     justify-self: auto;
  77 }
  78
  79 .justifySelfStretch {
  80     justify-self: stretch;
  81 }
  82
  83 .justifySelfStart {
  84     justify-self: start;
  85 }
  86 </style>
  87 </head>
  88 <body onload="checkLayout('.grid')">
  89
  90 <p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
  91
  92 <div style="position: relative">
  93     <div class="grid" data-expected-width="200" data-expected-height="400">
  94         <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
  95         <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
  96         <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
  97         <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
  98     </div>
  99 </div>
 100
 101 <div style="position: relative">
 102     <div class="grid" data-expected-width="200" data-expected-height="400">
 103         <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
 104         <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 105         <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
 106         <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 107     </div>
 108 </div>
 109
 110 <div style="position: relative">
 111     <div class="grid" data-expected-width="200" data-expected-height="400">
 112         <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
 113         <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 114         <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
 115         <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStart secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="90" data-expected-height="40"></div>
 116     </div>
 117 </div>
 118
 119 <div style="position: relative">
 120     <div class="grid" data-expected-width="200" data-expected-height="400">
 121         <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 122         <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 123         <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
 124         <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 125     </div>
 126 </div>
 127
 128 <div style="position: relative">
 129     <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400">
 130         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 131         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 132         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
 133         <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 134     </div>
 135 </div>
 136
 137 <div style="position: relative">
 138     <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400">
 139         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
 140         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 141         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
 142         <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 143     </div>
 144 </div>
 145
 146 <div style="position: relative">
 147     <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
 148         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 149         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 150         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
 151         <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 152     </div>
 153 </div>
 154
 155 <div style="position: relative">
 156     <div class="grid alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400">
 157         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 158         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 159         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
 160         <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 161     </div>
 162 </div>
 163
 164 <div style="position: relative">
 165     <div class="grid" data-expected-width="200" data-expected-height="400">
 166         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 167         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 168         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
 169         <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 170     </div>
 171 </div>
 172
 173 <div style="position: relative">
 174     <div class="grid" data-expected-width="200" data-expected-height="400">
 175         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 176         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 177         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div>
 178         <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div>
 179     </div>
 180 </div>
 181
 182 <!-- RTL direction (it should not affect the block-flow direction). -->
 183 <div style="position: relative">
 184     <div class="grid directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
 185         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 186         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 187         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
 188         <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 189     </div>
 190 </div>
 191
 192 <!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
 193 <div style="position: relative">
 194     <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
 195         <div class="firstRowFirstColumn  directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 196         <div class="widthAndHeightSet firstRowSecondColumn  directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
 197         <div class="onlyWidthSet secondRowFirstColumn  directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
 198         <div class="onlyHeightSet secondRowSecondColumn  directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
 199     </div>
 200 </div>
 201
 202 <!-- Vertical RL writing mode. -->
 203 <div style="position: relative">
 204     <div class="grid verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
 205         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 206         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 207         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
 208         <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div>
 209     </div>
 210 </div>
 211
 212 <div style="position: relative">
 213     <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
 214         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 215         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
 216         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 217         <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
 218     </div>
 219 </div>
 220
 221 <!-- Vertical LR writing mode. -->
 222 <div style="position: relative">
 223     <div class="grid verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
 224         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 225         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
 226         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
 227         <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div>
 228     </div>
 229 </div>
 230
 231 <div style="position: relative">
 232     <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
 233         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 234         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
 235         <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 236         <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
 237     </div>
 238 </div>
 239
 240 </body>
 241 </html>