Make color-filter affect caret-color
[WebKit-https.git] / LayoutTests / css3 / flexbox / border-and-padding-abspos.html
1 <!DOCTYPE html>
2
3 <style>
4 .rect {
5   position: absolute;
6   width: 50px;
7   height: 50px;
8   background-color: green;
9 }
10
11 .flexbox {
12   position: relative;
13   width: 100px;
14   height: 100px;
15   outline: 3px solid black;
16 }
17 </style>
18
19 <link rel="stylesheet" href="resources/flexbox.css">
20
21 <script src="../../resources/testharness.js"></script>
22 <script src="../../resources/testharnessreport.js"></script>
23 <script src="../../resources/check-layout-th.js"></script>
24
25 <body onload="checkLayout('.rect')">
26 <div id=log></div>
27
28 <div class="flexbox" style="padding-top: 10px; padding-left: 20px;">
29   <div class="rect" data-offset-x="20" data-offset-y="10"></div>
30 </div>
31
32 <div class="flexbox column" style="padding-top: 10px; padding-left: 20px;">
33   <div class="rect" data-offset-x="20" data-offset-y="10"></div>
34 </div>
35
36 <div class="flexbox" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;">
37   <div class="rect" data-offset-x="20" data-offset-y="10"></div>
38 </div>
39
40 <div class="flexbox column" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;">
41   <div class="rect" data-offset-x="20" data-offset-y="10"></div>
42 </div>
43
44 <div class="flexbox" style="direction: rtl; padding-top: 10px; padding-right: 20px;">
45   <div class="rect" data-offset-x="50" data-offset-y="10"></div>
46 </div>
47
48 <div class="flexbox column" style="direction: rtl; padding-top: 10px; padding-right: 20px;">
49   <div class="rect" data-offset-x="50" data-offset-y="10"></div>
50 </div>
51
52 <div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;">
53   <div class="rect" data-offset-x="20" data-offset-y="50"></div>
54 </div>
55
56 <div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;">
57   <div class="rect" data-offset-x="20" data-offset-y="50"></div>
58 </div>
59
60 <hr>
61 <div class="flexbox" style="border-top: 10px solid; border-left: 20px solid;">
62   <div class="rect" data-offset-x="0" data-offset-y="0"></div>
63 </div>
64
65 <div class="flexbox column" style="border-top: 10px solid; border-left: 20px solid;">
66   <div class="rect" data-offset-x="0" data-offset-y="0"></div>
67 </div>
68
69 <div class="flexbox" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;">
70   <div class="rect" data-offset-x="0" data-offset-y="0"></div>
71 </div>
72
73 <div class="flexbox column" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;">
74   <div class="rect" data-offset-x="0" data-offset-y="0"></div>
75 </div>
76
77 <div class="flexbox" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;">
78   <div class="rect" data-offset-x="50" data-offset-y="0"></div>
79 </div>
80
81 <div class="flexbox column" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;">
82   <div class="rect" data-offset-x="50" data-offset-y="0"></div>
83 </div>
84
85 <div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;">
86   <div class="rect" data-offset-x="0" data-offset-y="50"></div>
87 </div>
88
89 <div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;">
90   <div class="rect" data-offset-x="0" data-offset-y="50"></div>
91 </div>