[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / scrolled-grid-painting-overflow.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: purple;
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: 2; border-bottom: 100px green solid;"></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: 4; grid-row: 5; border-right: 100px green solid;"></div>
41     </div>
42 </div>
43
44 <!-- Bottom-right corner of the grid. -->
45 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
46     <div class="grid fit-content">
47         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-left: 100px purple solid; background-color: green;"></div>
48     </div>
49 </div>
50
51 <div>Flipped writing mode (vertical-rl)</div>
52
53 <!-- An item in the middle of the grid. -->
54 <div class="scrolledDiv" data-scroll-top="100" data-scroll-left="200">
55     <div class="grid fit-content verticalLR">
56         <div class="gridItem" style="grid-column: 2; grid-row: 2; border-right: 100px green solid;"></div>
57     </div>
58 </div>
59
60 <!-- Bottom-right corner of the grid. -->
61 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
62     <div class="grid fit-content verticalLR">
63         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-bottom: 100px green solid;"></div>
64     </div>
65 </div>
66
67 <!-- Bottom-right corner of the grid. -->
68 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
69     <div class="grid fit-content verticalLR">
70         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-top: 100px purple solid; background-color: green;"></div>
71     </div>
72 </div>
73
74
75 <script>
76     var scrolledDivs = document.getElementsByClassName("scrolledDiv");
77     for (i = 0; i < scrolledDivs.length; ++i) {
78         scrolledDiv = scrolledDivs[i];
79         scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top");
80         scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left");
81     }
82 </script>
83 </body>
84 </html>