[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-painting-respect-dom-order.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <link href="resources/grid.css" rel="stylesheet">
5     <style>
6         .grid {
7             display: grid;
8             grid-template-columns: 50px;
9             grid-template-rows: 50px 50px;
10             width: 300px;
11             height: 175px;
12             background-color: transparent;
13             float: left;
14         }
15
16         .item {
17             width: 100px;
18             height: 100px;
19         }
20
21         .grid :nth-child(1) {
22             background-color: #CCC;
23         }
24
25         .grid :nth-child(2) {
26             background-color: #999;
27         }
28
29         .grid :nth-child(3) {
30             background-color: #333;
31         }
32
33         .secondRowFirstColumn {
34             margin-left: 10px;
35             margin-top: 10px;
36         }
37
38         .bothRowFirstColumn {
39             margin-left: 20px;
40             margin-top: 20px;
41         }
42     </style>
43 </head>
44 <body>
45     <div>
46         The test shows 6 grids each of them with 3 items sorted differently in the DOM.<br>
47         Grid items should be painted from lighter (bottom) to darker (top) according to DOM ordering.
48     </div>
49     <div class="grid">
50         <div class="item firstRowFirstColumn"></div>
51         <div class="item secondRowFirstColumn"></div>
52         <div class="item bothRowFirstColumn"></div>
53     </div>
54     <div class="grid">
55         <div class="item secondRowFirstColumn"></div>
56         <div class="item bothRowFirstColumn"></div>
57         <div class="item firstRowFirstColumn"></div>
58     </div>
59     <div class="grid">
60         <div class="item bothRowFirstColumn"></div>
61         <div class="item firstRowFirstColumn"></div>
62         <div class="item secondRowFirstColumn"></div>
63     </div>
64     <div class="grid">
65         <div class="item secondRowFirstColumn"></div>
66         <div class="item firstRowFirstColumn"></div>
67         <div class="item bothRowFirstColumn"></div>
68     </div>
69     <div class="grid">
70         <div class="item firstRowFirstColumn"></div>
71         <div class="item bothRowFirstColumn"></div>
72         <div class="item secondRowFirstColumn"></div>
73     </div>
74     <div class="grid">
75         <div class="item bothRowFirstColumn"></div>
76         <div class="item secondRowFirstColumn"></div>
77         <div class="item firstRowFirstColumn"></div>
78     </div>
79 </body>
80 </html>