[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / scrolled-grid-painting.html
1 <!DOCTYPE html>
2 <html>
3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
4 <link href="resources/grid.css" rel="stylesheet">
5 <body>
6 <style>
7     .grid {
8         grid-template-rows: repeat(5, 100px);
9         grid-template-columns: repeat(5, 100px);
10         background-color: red;
11     }
12
13     .gridItem {
14         height: 100%;
15         width: 100%;
16         background-color: green;
17     }
18
19     .scrolledDiv {
20         height: 100px;
21         width: 100px;
22         overflow: hidden;
23     }
24 </style>
25 <div>This test checks that we correctly paint scrolled grid container.</div>
26 <div>There should be no red below.</div>
27
28 <div>Default writing mode (horizontal-lr)</div>
29
30 <!-- An item in the middle of the grid. -->
31 <div class="scrolledDiv" data-scroll-top="200" data-scroll-left="100">
32     <div class="grid fit-content">
33         <div class="gridItem" style="grid-column: 2; grid-row: 3"></div>
34     </div>
35 </div>
36
37 <!-- Bottom-right corner of the grid. -->
38 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
39     <div class="grid fit-content">
40         <div class="gridItem" style="grid-column: 5; grid-row: 5"></div>
41     </div>
42 </div>
43
44 <!-- Scroll between 2 horizontal grid items. -->
45 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="150">
46     <div class="grid fit-content">
47         <div class="gridItem" style="grid-column: 2; grid-row: 5"></div>
48         <div class="gridItem" style="grid-column: 3; grid-row: 5"></div>
49     </div>
50 </div>
51
52 <!-- Scroll between 2 vertical grid items. -->
53 <div class="scrolledDiv" data-scroll-top="150" data-scroll-left="400">
54     <div class="grid fit-content">
55         <div class="gridItem" style="grid-column: 5; grid-row: 2"></div>
56         <div class="gridItem" style="grid-column: 5; grid-row: 3"></div>
57     </div>
58 </div>
59
60
61 <div>Flipped writing mode (vertical-rl)</div>
62
63
64 <!-- An item in the middle of the grid. -->
65 <div class="scrolledDiv" data-scroll-top="100" data-scroll-left="200">
66     <div class="grid fit-content verticalLR">
67         <div class="gridItem" style="grid-column: 2; grid-row: 3"></div>
68     </div>
69 </div>
70
71 <!-- Bottom-right corner of the grid. -->
72 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
73     <div class="grid fit-content verticalLR">
74         <div class="gridItem" style="grid-column: 5; grid-row: 5"></div>
75     </div>
76 </div>
77
78 <!-- Scroll between 2 vertical grid items. -->
79 <div class="scrolledDiv" data-scroll-top="150" data-scroll-left="400">
80     <div class="grid fit-content verticalLR">
81         <div class="gridItem" style="grid-column: 2; grid-row: 5"></div>
82         <div class="gridItem" style="grid-column: 3; grid-row: 5"></div>
83     </div>
84 </div>
85
86 <!-- Scroll between 2 horizontal grid items. -->
87 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="150">
88     <div class="grid fit-content verticalLR">
89         <div class="gridItem" style="grid-column: 5; grid-row: 2"></div>
90         <div class="gridItem" style="grid-column: 5; grid-row: 3"></div>
91     </div>
92 </div>
93
94 <script>
95     var scrolledDivs = document.getElementsByClassName("scrolledDiv");
96     for (i = 0; i < scrolledDivs.length; ++i) {
97         scrolledDiv = scrolledDivs[i];
98         scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top");
99         scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left");
100     }
101 </script>
102 </body>
103 </html>