[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-painting-rtl-expected.html
1 <!DOCTYPE html>
2
3 <p>This test verifies grid layout painting using RTL direction.</p>
4 <p>This test passes if it matches the reference. You should see green and blue boxes but not red.</p>
5
6 <iframe height="120px" width="300px" srcdoc="
7     <style>
8     .grid {
9         position: relative;
10         width: 500px;
11         height: 50px;
12     }
13     </style>
14
15     <div class='grid'>
16         <div style='background: green; position: absolute; width: 50px; height: 50px; left: 150px'></div>
17         <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 200px'></div>
18     </div>
19 ">
20 </iframe>
21
22 <iframe height="120px" width="300px" srcdoc="
23     <style>
24     .grid {
25         position: relative;
26         width: 500px;
27         height: 50px;
28         border: 5px solid;
29     }
30     </style>
31
32     <div class='grid'>
33         <div style='background: green; position: absolute; width: 50px; height: 50px; left: 150px'></div>
34         <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 200px'></div>
35     </div>
36 ">
37 </iframe>
38
39 <iframe height="120px" width="300px" srcdoc="
40     <style>
41     .grid {
42         position: relative;
43         width: 500px;
44         height: 50px;
45         border: 5px solid;
46         padding: 10px;
47     }
48     </style>
49
50     <div class='grid'>
51         <div style='background: green; position: absolute; width: 50px; height: 50px; left: 160px'></div>
52         <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 210px'></div>
53     </div>
54 ">
55 </iframe>
56
57 <iframe height="120px" width="300px" srcdoc="
58     <style>
59     .grid {
60         position: relative;
61         width: 500px;
62         height: 50px;
63         border: 5px solid;
64         border-right: 100px solid;
65         padding: 10px;
66         padding-right: 200px;
67     }
68     </style>
69
70     <div class='grid'>
71         <div style='background: green; position: absolute; width: 50px; height: 50px; left: 160px'></div>
72         <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 210px'></div>
73     </div>
74 ">
75 </iframe>