OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>Differing writing modes test for positioned elements and their containing
blocks</title> | 3 <title>Differing writing modes test for positioned elements and their containing
blocks</title> |
4 <style> | 4 <style> |
5 .htb { -webkit-writing-mode: horizontal-tb } | 5 .htb { -webkit-writing-mode: horizontal-tb } |
6 .hbt { -webkit-writing-mode: horizontal-bt } | |
7 .vlr { -webkit-writing-mode: vertical-lr } | 6 .vlr { -webkit-writing-mode: vertical-lr } |
8 .vrl { -webkit-writing-mode: vertical-rl } | 7 .vrl { -webkit-writing-mode: vertical-rl } |
9 | 8 |
10 .tl { top: 0; left: 0 } | 9 .tl { top: 0; left: 0 } |
11 .tr { top: 0; right: 0 } | 10 .tr { top: 0; right: 0 } |
12 .bl { bottom: 0; left: 0 } | 11 .bl { bottom: 0; left: 0 } |
13 .br { bottom: 0; right: 0 } | 12 .br { bottom: 0; right: 0 } |
14 | 13 |
15 .container { margin:5px; display: inline-block; position: relative; width:50px;
height:50px; border-top:1px solid black; border-right:2px solid black; border-bo
ttom:3px solid black; border-left:4px solid black; padding:1px 2px 3px 4px } | 14 .container { margin:5px; display: inline-block; position: relative; width:50px;
height:50px; border-top:1px solid black; border-right:2px solid black; border-bo
ttom:3px solid black; border-left:4px solid black; padding:1px 2px 3px 4px } |
16 .child { position:absolute; width:20px; height:20px; background-color:green } | 15 .child { position:absolute; width:20px; height:20px; background-color:green } |
(...skipping 15 matching lines...) Expand all Loading... |
32 | 31 |
33 <br> | 32 <br> |
34 | 33 |
35 The test boxes: | 34 The test boxes: |
36 | 35 |
37 <br> | 36 <br> |
38 <div class="container htb"> | 37 <div class="container htb"> |
39 <div class="child htb tl"></div> | 38 <div class="child htb tl"></div> |
40 <div class="child vlr tr"></div> | 39 <div class="child vlr tr"></div> |
41 <div class="child vrl bl"></div> | 40 <div class="child vrl bl"></div> |
42 <div class="child hbt br"></div> | 41 <div class="child htb br"></div> |
43 </div> | 42 </div> |
44 | 43 |
45 <div class="container vlr"> | 44 <div class="container vlr"> |
46 <div class="child htb tl"></div> | 45 <div class="child htb tl"></div> |
47 <div class="child vlr tr"></div> | 46 <div class="child vlr tr"></div> |
48 <div class="child vrl bl"></div> | 47 <div class="child vrl bl"></div> |
49 <div class="child hbt br"></div> | 48 <div class="child htb br"></div> |
50 </div> | |
51 | |
52 <div class="container hbt"> | |
53 <div class="child htb tl"></div> | |
54 <div class="child vlr tr"></div> | |
55 <div class="child vrl bl"></div> | |
56 <div class="child hbt br"></div> | |
57 </div> | 49 </div> |
58 | 50 |
59 <div class="container vrl"> | 51 <div class="container vrl"> |
60 <div class="child htb tl"></div> | 52 <div class="child htb tl"></div> |
61 <div class="child vlr tr"></div> | 53 <div class="child vlr tr"></div> |
62 <div class="child vrl bl"></div> | 54 <div class="child vrl bl"></div> |
63 <div class="child hbt br"></div> | 55 <div class="child htb br"></div> |
64 </div> | 56 </div> |
65 | 57 |
66 <br> | 58 <br> |
67 | 59 |
68 <div class="container htb"> | 60 <div class="container htb"> |
69 <div class="child htb tr"></div> | 61 <div class="child htb tr"></div> |
70 <div class="child vlr bl"></div> | 62 <div class="child vlr bl"></div> |
71 <div class="child vrl br"></div> | 63 <div class="child vrl br"></div> |
72 <div class="child hbt tl"></div> | 64 <div class="child htb tl"></div> |
73 </div> | 65 </div> |
74 | 66 |
75 <div class="container vlr"> | 67 <div class="container vlr"> |
76 <div class="child htb tr"></div> | 68 <div class="child htb tr"></div> |
77 <div class="child vlr bl"></div> | 69 <div class="child vlr bl"></div> |
78 <div class="child vrl br"></div> | 70 <div class="child vrl br"></div> |
79 <div class="child hbt tl"></div> | 71 <div class="child htb tl"></div> |
80 </div> | |
81 | |
82 <div class="container hbt"> | |
83 <div class="child htb tr"></div> | |
84 <div class="child vlr bl"></div> | |
85 <div class="child vrl br"></div> | |
86 <div class="child hbt tl"></div> | |
87 </div> | 72 </div> |
88 | 73 |
89 <div class="container vrl"> | 74 <div class="container vrl"> |
90 <div class="child htb tr"></div> | 75 <div class="child htb tr"></div> |
91 <div class="child vlr bl"></div> | 76 <div class="child vlr bl"></div> |
92 <div class="child vrl br"></div> | 77 <div class="child vrl br"></div> |
93 <div class="child hbt tl"></div> | 78 <div class="child htb tl"></div> |
94 </div> | 79 </div> |
95 | 80 |
96 <br> | 81 <br> |
97 | 82 |
98 <div class="container htb"> | 83 <div class="container htb"> |
99 <div class="child htb bl"></div> | 84 <div class="child htb bl"></div> |
100 <div class="child vlr br"></div> | 85 <div class="child vlr br"></div> |
101 <div class="child vrl tl"></div> | 86 <div class="child vrl tl"></div> |
102 <div class="child hbt tr"></div> | 87 <div class="child htb tr"></div> |
103 </div> | 88 </div> |
104 | 89 |
105 <div class="container vlr"> | 90 <div class="container vlr"> |
106 <div class="child htb bl"></div> | 91 <div class="child htb bl"></div> |
107 <div class="child vlr br"></div> | 92 <div class="child vlr br"></div> |
108 <div class="child vrl tl"></div> | 93 <div class="child vrl tl"></div> |
109 <div class="child hbt tr"></div> | 94 <div class="child htb tr"></div> |
110 </div> | |
111 | |
112 <div class="container hbt"> | |
113 <div class="child htb bl"></div> | |
114 <div class="child vlr br"></div> | |
115 <div class="child vrl tl"></div> | |
116 <div class="child hbt tr"></div> | |
117 </div> | 95 </div> |
118 | 96 |
119 <div class="container vrl"> | 97 <div class="container vrl"> |
120 <div class="child htb bl"></div> | 98 <div class="child htb bl"></div> |
121 <div class="child vlr br"></div> | 99 <div class="child vlr br"></div> |
122 <div class="child vrl tl"></div> | 100 <div class="child vrl tl"></div> |
123 <div class="child hbt tr"></div> | 101 <div class="child htb tr"></div> |
124 </div> | 102 </div> |
125 | 103 |
126 <br> | 104 <br> |
127 | 105 |
128 <div class="container htb"> | 106 <div class="container htb"> |
129 <div class="child htb br"></div> | 107 <div class="child htb br"></div> |
130 <div class="child vlr tl"></div> | 108 <div class="child vlr tl"></div> |
131 <div class="child vrl tr"></div> | 109 <div class="child vrl tr"></div> |
132 <div class="child hbt bl"></div> | 110 <div class="child htb bl"></div> |
133 </div> | 111 </div> |
134 | 112 |
135 <div class="container vlr"> | 113 <div class="container vlr"> |
136 <div class="child htb br"></div> | 114 <div class="child htb br"></div> |
137 <div class="child vlr tl"></div> | 115 <div class="child vlr tl"></div> |
138 <div class="child vrl tr"></div> | 116 <div class="child vrl tr"></div> |
139 <div class="child hbt bl"></div> | 117 <div class="child htb bl"></div> |
140 </div> | |
141 | |
142 <div class="container hbt"> | |
143 <div class="child htb br"></div> | |
144 <div class="child vlr tl"></div> | |
145 <div class="child vrl tr"></div> | |
146 <div class="child hbt bl"></div> | |
147 </div> | 118 </div> |
148 | 119 |
149 <div class="container vrl"> | 120 <div class="container vrl"> |
150 <div class="child htb br"></div> | 121 <div class="child htb br"></div> |
151 <div class="child vlr tl"></div> | 122 <div class="child vlr tl"></div> |
152 <div class="child vrl tr"></div> | 123 <div class="child vrl tr"></div> |
153 <div class="child hbt bl"></div> | 124 <div class="child htb bl"></div> |
154 </div> | 125 </div> |
155 | 126 |
156 </body> | 127 </body> |
157 </html> | 128 </html> |
158 | 129 |
159 | 130 |
OLD | NEW |