third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.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: 150px 150px;
  13     grid-template-rows: 120px 120px 120px;
  14     width: -webkit-fit-content;
  15     margin-bottom: 20px;
  16 }
  17
  18 .cellOverflowWidth {
  19     width: 180px;
  20     height: 40px;
  21 }
  22
  23 .cellOverflowHeight {
  24     width: 50px;
  25     height: 150px;
  26 }
  27
  28 .cellWithNoOverflow {
  29     width: 50px;
  30     height: 40px;
  31 }
  32
  33 .alignItemsCenter {
  34     align-items: center;
  35 }
  36
  37 .alignItemsCenterSafe {
  38     align-items: center safe;
  39 }
  40
  41 .alignItemsCenterTrue {
  42     align-items: center true;
  43 }
  44
  45 .alignItemsEnd {
  46     align-items: end;
  47 }
  48
  49 .alignItemsEndSafe {
  50     align-items: end safe;
  51 }
  52
  53 .alignItemsEndTrue {
  54     align-items: end true;
  55 }
  56
  57 .alignSelfCenter {
  58     align-self: center;
  59 }
  60
  61 .alignSelfCenterSafe {
  62     align-self: center safe;
  63 }
  64
  65 .alignSelfCenterTrue {
  66     align-self: center true;
  67 }
  68
  69 .alignSelfEnd {
  70     align-self: end;
  71 }
  72
  73 .alignSelfEndSafe {
  74     align-self: end safe;
  75 }
  76
  77 .alignSelfEndTrue {
  78     align-self: end true;
  79 }
  80
  81 .justifyItemsCenter {
  82     justify-items: center;
  83 }
  84
  85 .justifyItemsCenterSafe {
  86     justify-items: center safe;
  87 }
  88
  89 .justifyItemsCenterTrue {
  90     justify-items: center true;
  91 }
  92
  93 .justifyItemsEnd {
  94     justify-items: end;
  95 }
  96
  97 .justifyItemsEndSafe {
  98     justify-items: end safe;
  99 }
 100
 101 .justifyItemsEndTrue {
 102     justify-items: end true;
 103 }
 104
 105 .justifySelfCenter {
 106     justify-self: center;
 107 }
 108
 109 .justifySelfCenterSafe {
 110     justify-self: center safe;
 111 }
 112
 113 .justifySelfCenterTrue {
 114     justify-self: center true;
 115 }
 116
 117 .justifySelfEnd {
 118     justify-self: end;
 119 }
 120
 121 .thirdRowFirstColumn {
 122     background-color: green;
 123     grid-column: 1;
 124     grid-row: 3;
 125 }
 126 </style>
 127 </head>
 128 <body onload="checkLayout('.grid')">
 129
 130 <p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
 131
 132 <div style="position: relative">
 133     <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
 134         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
 135         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
 136         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
 137         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
 138         <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="135" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
 139         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
 140     </div>
 141 </div>
 142
 143 <div style="position: relative">
 144     <div class="grid alignItemsCenterTrue justifyItemsCenterTrue" data-expected-width="300" data-expected-height="360">
 145         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div>
 146         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
 147         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
 148         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
 149         <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div>
 150         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
 151     </div>
 152 </div>
 153
 154 <div style="position: relative">
 155     <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
 156         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
 157         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
 158         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
 159         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
 160         <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
 161         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
 162     </div>
 163 </div>
 164
 165 <div style="position: relative">
 166     <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
 167         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
 168         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
 169         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
 170         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
 171         <div class="cellOverflowHeight secondRowSecondColumn alignSelfCenterSafe justifySelfCenterSafe" data-offset-x="200" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
 172         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
 173     </div>
 174 </div>
 175
 176 <div style="position: relative">
 177     <div class="grid alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
 178         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
 179         <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
 180         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
 181         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
 182         <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="120" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
 183         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
 184     </div>
 185 </div>
 186
 187 <div style="position: relative">
 188     <div class="grid alignItemsEndTrue justifyItemsEndTrue" data-expected-width="300" data-expected-height="360">
 189         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div>
 190         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
 191         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
 192         <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
 193         <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div>
 194         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
 195     </div>
 196 </div>
 197
 198 <div style="position: relative">
 199     <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
 200         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
 201         <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterTrue" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
 202         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
 203         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
 204         <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
 205         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
 206     </div>
 207 </div>
 208
 209 <div style="position: relative">
 210     <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
 211         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
 212         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
 213         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
 214         <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenterTrue" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
 215         <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
 216         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
 217     </div>
 218 </div>
 219
 220 </body>
 221 </html>