third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-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: 50px 50px;
  13     grid-template-rows: 100px 100px;
  14 }
  15
  16 .overflowWidth {
  17     width: 60px;
  18     height: 300px;
  19 }
  20
  21 .overflowHeight {
  22     width: 200px;
  23     height: 150px;
  24 }
  25
  26 .center {
  27     align-content: center;
  28     justify-content: center;
  29 }
  30
  31 .centerSafe {
  32     align-content: center safe;
  33     justify-content: center safe;
  34 }
  35
  36 .centerTrue {
  37     align-content: center true;
  38     justify-content: center true;
  39 }
  40
  41 .end {
  42     align-content: end;
  43     justify-content: end;
  44 }
  45
  46 .endSafe {
  47     align-content: end safe;
  48     justify-content: end safe;
  49 }
  50
  51 .endTrue {
  52     align-content: end true;
  53     justify-content: end true;
  54 }
  55
  56 </style>
  57 </head>
  58 <body onload="checkLayout('.grid')">
  59
  60 <p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p>
  61
  62 <div style="position: relative">
  63     <div class="grid overflowWidth center" data-expected-width="60" data-expected-height="300">
  64         <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  65         <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
  66         <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  67         <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
  68     </div>
  69 </div>
  70
  71 <div style="position: relative">
  72     <div class="grid overflowHeight centerTrue" data-expected-width="200" data-expected-height="150">
  73         <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
  74         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
  75         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
  76         <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
  77     </div>
  78 </div>
  79
  80 <div style="position: relative">
  81     <div class="grid overflowWidth centerSafe" data-expected-width="60" data-expected-height="300">
  82         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  83         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
  84         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  85         <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
  86     </div>
  87 </div>
  88
  89 <div style="position: relative">
  90     <div class="grid overflowHeight centerSafe" data-expected-width="200" data-expected-height="150">
  91         <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
  92         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
  93         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
  94         <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
  95     </div>
  96 </div>
  97
  98 <div style="position: relative">
  99     <div class="grid overflowWidth end" data-expected-width="60" data-expected-height="300">
 100         <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 101         <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
 102         <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 103         <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
 104     </div>
 105 </div>
 106
 107 <div style="position: relative">
 108     <div class="grid overflowHeight endTrue" data-expected-width="200" data-expected-height="150">
 109         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
 110         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 111         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
 112         <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 113     </div>
 114 </div>
 115
 116 <div style="position: relative">
 117     <div class="grid overflowWidth endSafe" data-expected-width="60" data-expected-height="300">
 118         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 119         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
 120         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 121         <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
 122     </div>
 123 </div>
 124
 125 <div style="position: relative">
 126     <div class="grid overflowHeight endSafe" data-expected-width="200" data-expected-height="150">
 127         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 128         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 129         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 130         <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 131     </div>
 132 </div>
 133
 134 </body>
 135 </html>