1b3c6eef691d9959b4bc899b3d88c9c7e3f57e28
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-grid / grid-model / grid-container-scrollbar-001.html
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <title>CSS Grid Layout Test: Grid container with scrollbars</title>
4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
6 <link rel="match" href="grid-container-scrollbar-001-ref.html">
7 <meta name="assert" content="This test verifes that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
8 <link href="support/grid.css" rel="stylesheet">
9 <style>
10   .grid {
11     margin: 10px;
12   }
13
14   .scrollX {
15     overflow-x: scroll;
16   }
17
18   .scrollY {
19     overflow-y: scroll;
20   }
21
22   .fixedSize {
23     width: 200px;
24     height: 50px;
25   }
26
27   .grid > div {
28     background: cyan;
29   }
30 </style>
31
32 <p>The test passes if it has the same output than the reference.</p>
33
34 <div style="float: left; width: 350px;">
35
36   <h2>direction: ltr;</h2>
37
38   <div class="grid scrollX">
39     <div>item</div>
40   </div>
41
42   <div class="grid scrollY">
43     <div>item</div>
44   </div>
45
46   <div class="grid scrollX scrollY">
47     <div>item</div>
48   </div>
49
50   <div class="grid fixedSize scrollX">
51     <div>item</div>
52   </div>
53
54   <div class="grid fixedSize scrollY">
55     <div>item</div>
56   </div>
57
58   <div class="grid fixedSize scrollX scrollY">
59     <div>item</div>
60   </div>
61
62 </div>
63
64 <div style="float: left; width: 350px;">
65
66   <h2>direction: rtl;</h2>
67
68   <div class="directionRTL grid scrollX">
69     <div>item</div>
70   </div>
71
72   <div class="directionRTL grid scrollY">
73     <div>item</div>
74   </div>
75
76   <div class="directionRTL grid scrollX scrollY">
77     <div>item</div>
78   </div>
79
80   <div class="directionRTL grid fixedSize scrollX">
81     <div>item</div>
82   </div>
83
84   <div class="directionRTL grid fixedSize scrollY">
85     <div>item</div>
86   </div>
87
88   <div class="directionRTL grid fixedSize scrollX scrollY">
89     <div>item</div>
90   </div>
91
92 </div>