third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style type="text/css">
   4 .grid {
   5     display: grid;
   6     grid-template-columns: 1fr;
   7     grid-template-rows: auto;
   8
   9     grid-template-areas: "one"
  10                          "two"
  11                          "three";
  12 }
  13
  14 .one {
  15     grid-area: one;
  16     background-color: beige;
  17 }
  18
  19 .two {
  20     grid-area: two;
  21     background-color: antiquewhite;
  22 }
  23
  24 .three {
  25     grid-area: three;
  26     background-color: bisque;
  27 }
  28
  29 .one, .two, .three { min-height: 100px; }
  30
  31 @media screen and (min-width: 500px) {
  32     .grid {
  33        grid-template-columns: 1fr 1fr;
  34        grid-template-areas: "one one"
  35                             "two three";
  36   }
  37 }
  38
  39 @media screen and (min-width: 700px) {
  40     .grid {
  41        grid-template-columns: 2fr 1fr 1fr;
  42        grid-template-areas: "one two three";
  43     }
  44 }
  45 </style>
  46 </head>
  47 <body>
  48 <p>The test passes if you see 3 blocks bellow arranged on a single row</p>
  49 <div class="grid">
  50     <div class="one"></div>
  51     <div class="two"></div>
  52     <div class="three"></div>
  53 </div>
  54 </body>
  55 </html>