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