REGRESSION (r238212): WebKit.BackgroundColor* API test failures.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-grid / grid-model / grid-container-scrollbar-vertical-lr-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-vertical-lr-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     writing-mode: vertical-lr;
13   }
14
15   .scrollX {
16     overflow-x: scroll;
17   }
18
19   .scrollY {
20     overflow-y: scroll;
21   }
22
23   .fixedSize {
24     width: 200px;
25     height: 50px;
26   }
27
28   .grid > div {
29     background: cyan;
30   }
31 </style>
32
33 <p>The test passes if it has the same output than the reference.</p>
34
35 <div style="float: left; width: 350px;">
36
37   <h2>direction: ltr;</h2>
38
39   <div class="grid scrollX">
40     <div>item</div>
41   </div>
42
43   <div class="grid scrollY">
44     <div>item</div>
45   </div>
46
47   <div class="grid scrollX scrollY">
48     <div>item</div>
49   </div>
50
51   <div class="grid fixedSize scrollX">
52     <div>item</div>
53   </div>
54
55   <div class="grid fixedSize scrollY">
56     <div>item</div>
57   </div>
58
59   <div class="grid fixedSize scrollX scrollY">
60     <div>item</div>
61   </div>
62
63 </div>
64
65 <div style="float: left; width: 350px;">
66
67   <h2>direction: rtl;</h2>
68
69   <div class="directionRTL grid scrollX">
70     <div>item</div>
71   </div>
72
73   <div class="directionRTL grid scrollY">
74     <div>item</div>
75   </div>
76
77   <div class="directionRTL grid scrollX scrollY">
78     <div>item</div>
79   </div>
80
81   <div class="directionRTL grid fixedSize scrollX">
82     <div>item</div>
83   </div>
84
85   <div class="directionRTL grid fixedSize scrollY">
86     <div>item</div>
87   </div>
88
89   <div class="directionRTL grid fixedSize scrollX scrollY">
90     <div>item</div>
91   </div>
92
93 </div>