third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/check-layout.js"></script>
   5 <style>
   6 body {
   7     margin: 0px;
   8 }
   9
  10 .grid {
  11     display: grid;
  12     background-color: grey;
  13     position: relative;
  14     align-content: stretch;
  15     justify-content: stretch;
  16     align-items: start;
  17     justify-items: start;
  18 }
  19
  20 .definiteSize {
  21     width: 200px;
  22     height: 300px;
  23 }
  24
  25 .item {
  26     width: 40px;
  27     height: 80px;
  28 }
  29
  30 .content {
  31     width: 20px;
  32     height: 40px;
  33 }
  34
  35 .firstRowFirstColumn {
  36     background-color: blue;
  37     grid-column: 1;
  38     grid-row: 1;
  39 }
  40 .firstRowSecondColumn {
  41     background-color: lime;
  42     grid-column: 2;
  43     grid-row: 1;
  44 }
  45 .secondRowFirstColumn {
  46     background-color: purple;
  47     grid-column: 1;
  48     grid-row: 2;
  49 }
  50 .secondRowSecondColumn {
  51     background-color: orange;
  52     grid-column: 2;
  53     grid-row: 2;
  54 }
  55
  56 /* track sizes allowed to be stetched */
  57 .autoTracks { grid: auto auto / auto auto; }
  58 .autoMaxTracks { grid: minmax(20px, auto) minmax(20px, auto) / minmax(40px, auto) minmax(40px, auto); }
  59
  60 /* content-sized tracks disallowed to be stetched */
  61 .minContentTracks { grid: min-content min-content / min-content min-content; }
  62 .maxContentTracks { grid: max-content max-content / max-content max-content; }
  63 .minMaxWithMaxContentTracks { grid: minmax(20px, max-content) minmax(20px, max-content) / minmax(20px, max-content) minmax(20px, max-content); }
  64 .minMaxWithMinContentTracks { grid: minmax(20px, min-content) minmax(20px, min-content) / minmax(20px, min-content) minmax(20px, min-content); }
  65 .minMaxWithMinAutoTracks { grid: minmax(auto, max-content) minmax(auto, max-content) / minmax(auto, max-content) minmax(auto, max-content); }
  66
  67 </style>
  68 </head>
  69 <body onload="checkLayout('.grid')">
  70
  71 <p>This test checks that 'stretch' value for Content Alignment properties is applied only on  'auto-sized' tracks, which are the ones with an 'auto' max sizing function.</p>
  72
  73 <div style="position: relative">
  74     <p>cols: 'auto' | rows: 'auto' | definite-sized container | definite-sized items </p>
  75     <div class="grid definiteSize autoTracks" data-expected-width="200" data-expected-height="300">
  76         <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
  77         <div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
  78         <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
  79         <div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
  80     </div>
  81 </div>
  82
  83 <div style="position: relative">
  84     <p>cols: 'minmax(20px, auto)' | rows: 'minmax(40px, auto)' | definite-sized container | definite-sized items </p>
  85     <div class="grid definiteSize autoMaxTracks" data-expected-width="200" data-expected-height="300">
  86         <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
  87         <div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
  88         <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
  89         <div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
  90     </div>
  91 </div>
  92
  93 <div style="position: relative">
  94     <p>cols: 'min-content' | rows: 'min-content' | definite-sized container | definite-sized items </p>
  95     <div class="grid definiteSize minContentTracks" data-expected-width="200" data-expected-height="300">
  96         <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
  97         <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
  98         <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
  99         <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 100     </div>
 101 </div>
 102
 103 <div style="position: relative">
 104     <p>cols: 'max-content' | rows: 'max-content' | definite-sized container | definite-sized items </p>
 105     <div class="grid definiteSize maxContentTracks" data-expected-width="200" data-expected-height="300">
 106         <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
 107         <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
 108         <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 109         <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 110     </div>
 111 </div>
 112
 113 <div style="position: relative">
 114     <p>cols: 'minmax(20px, max-content)' | rows: 'minmax(20px, max-content)' | definite-sized container | definite-sized items </p>
 115     <div class="grid definiteSize minMaxWithMaxContentTracks" data-expected-width="200" data-expected-height="300">
 116         <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
 117         <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
 118         <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 119         <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 120     </div>
 121 </div>
 122
 123 <div style="position: relative">
 124     <p>cols: 'minmax(20px, min-content)' | rows: 'minmax(20px, min-content)' | definite-sized container | definite-sized items </p>
 125     <div class="grid definiteSize minMaxWithMinContentTracks" data-expected-width="200" data-expected-height="300">
 126         <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
 127         <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
 128         <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 129         <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 130     </div>
 131 </div>
 132
 133 <div style="position: relative">
 134     <p>cols: 'minmax(auto, max-content)' | rows: 'minmax(auto, max-content)' | definite-sized container | definite-sized items </p>
 135     <div class="grid definiteSize minMaxWithMinAutoTracks" data-expected-width="200" data-expected-height="300">
 136         <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
 137         <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
 138         <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 139         <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
 140     </div>
 141 </div>
 142
 143 </body>
 144 </html>