[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / 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>