third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.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: 0px;
   9 }
  10
  11 .grid {
  12     grid-auto-columns: 20px;
  13     grid-auto-rows: 40px;
  14     grid-template-areas: "a a b"
  15                          "c d b";
  16     position: relative;
  17     width: 300px;
  18     height: 200px;
  19 }
  20 .a {
  21     grid-area: a;
  22     background-color: blue;
  23 }
  24 .b {
  25     grid-area: b;
  26     background-color: lime;
  27 }
  28 .c {
  29     grid-area: c;
  30     background-color: purple;
  31 }
  32 .d {
  33     grid-area: d;
  34     background-color: orange;
  35 }
  36 .stretchedGrid {
  37     grid-auto-columns: auto;
  38     grid-auto-rows: auto;
  39 }
  40
  41 .spaceBetween {
  42     justify-content: space-between;
  43     align-content: space-between;
  44 }
  45
  46 .spaceAround {
  47     justify-content: space-around;
  48     align-content: space-around;
  49 }
  50
  51 .spaceEvenly {
  52     justify-content: space-evenly;
  53     align-content: space-evenly;
  54 }
  55
  56 .stretch {
  57     justify-content: stretch;
  58     align-content: stretch;
  59 }
  60 </style>
  61 </head>
  62 <body onload="checkLayout('.grid')">
  63
  64 <p>This test checks that Content Distribution alignment is applied correctly when items span more than one track.</p>
  65
  66 <div style="position: relative">
  67     <p>direction: LTR | distribution: 'space-between'</p>
  68     <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200">
  69         <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
  70         <div class="b" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
  71         <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
  72         <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
  73     </div>
  74 </div>
  75
  76 <div style="position: relative">
  77     <p>direction: LTR | distribution: 'space-around'</p>
  78     <div class="grid spaceAround" data-expected-width="300" data-expected-height="200">
  79         <div class="a" data-offset-x="40" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
  80         <div class="b" data-offset-x="240" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
  81         <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
  82         <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
  83     </div>
  84 </div>
  85
  86 <div style="position: relative">
  87     <p>direction: LTR | distribution: 'space-evenly'</p>
  88     <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200">
  89         <div class="a" data-offset-x="60" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
  90         <div class="b" data-offset-x="220" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
  91         <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
  92         <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
  93     </div>
  94 </div>
  95
  96 <div style="position: relative">
  97     <p>direction: LTR | distribution: 'stretch'</p>
  98     <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200">
  99         <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 100         <div class="b" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 101         <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
 102         <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
 103     </div>
 104 </div>
 105
 106 <!-- RTL direction. -->
 107 <div style="position: relative">
 108     <p>direction: RTL | distribution: 'space-between'</p>
 109     <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
 110         <div class="a" data-offset-x="140" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
 111         <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
 112         <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 113         <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
 114     </div>
 115 </div>
 116
 117 <div style="position: relative">
 118     <p>direction: RTL | distribution: 'space-around'</p>
 119     <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200">
 120         <div class="a" data-offset-x="140" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
 121         <div class="b" data-offset-x="40" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
 122         <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
 123         <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
 124     </div>
 125 </div>
 126
 127 <div style="position: relative">
 128     <p>direction: RTL | distribution: 'space-evenly''</p>
 129     <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
 130         <div class="a" data-offset-x="140" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
 131         <div class="b" data-offset-x="60" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
 132         <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
 133         <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
 134     </div>
 135 </div>
 136
 137 <div style="position: relative">
 138     <p>direction: RTL | distribution: 'stretch'</p>
 139     <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200">
 140         <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 141         <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
 142         <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
 143         <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
 144     </div>
 145 </div>
 146
 147 </body>
 148 </html>