OLD | NEW |
| (Empty) |
1 <html style="-webkit-writing-mode: vertical-rl;"> | |
2 <head> | |
3 <style type="text/css"> | |
4 /* Make sure the console and the description don't interfere wit
h the rest of the layout. */ | |
5 #description { | |
6 position: absolute; | |
7 left: 0px; | |
8 } | |
9 | |
10 #console { | |
11 position: absolute; | |
12 left: 100px; | |
13 } | |
14 | |
15 #divMain1 { | |
16 -webkit-flow-into: flow1; | |
17 border: 2px solid blue; | |
18 width: 160px; | |
19 margin: 10px; | |
20 padding: 5px; | |
21 } | |
22 | |
23 #divMain2 { | |
24 border: 2px solid blue; | |
25 width: 135px; | |
26 margin: 5px; | |
27 -webkit-flow-into: flow2; | |
28 } | |
29 | |
30 .divText { | |
31 border: 1px solid green; | |
32 color: green; | |
33 font-size: 14px; | |
34 padding: 5px; | |
35 } | |
36 | |
37 #divText1 { | |
38 width: 60px; | |
39 height: 240px; | |
40 margin: 10px; | |
41 padding-left: 5px; | |
42 float: right; | |
43 } | |
44 | |
45 #divText2 { | |
46 width: 60px; | |
47 height: 190px; | |
48 float: left; | |
49 margin: 10px; | |
50 } | |
51 | |
52 #region1 { | |
53 -webkit-flow-from: flow1; | |
54 border: 1px solid red; | |
55 position: absolute; | |
56 top: 78px; | |
57 left: 608px; | |
58 height: 400px; | |
59 width: 190px; | |
60 } | |
61 | |
62 #region2 { | |
63 -webkit-flow-from: flow2; | |
64 border: 1px solid red; | |
65 position: absolute; | |
66 left: 338px; | |
67 top: 182px; | |
68 width: 150px; | |
69 height: 400px; | |
70 } | |
71 | |
72 .grid { | |
73 position: absolute; | |
74 top: 650px; | |
75 width: 100px; | |
76 height: 100px; | |
77 border-right: 1px solid blue; | |
78 text-align: right; | |
79 font-size: 14px; | |
80 color: blue; | |
81 } | |
82 | |
83 .vgrid { | |
84 position: absolute; | |
85 left: 900px; | |
86 width: 100px; | |
87 height: 100px; | |
88 border-bottom: 1px solid blue; | |
89 text-align: bottom; | |
90 font-size: 14px; | |
91 color: blue; | |
92 } | |
93 | |
94 #grid1 { | |
95 left: 0px; | |
96 } | |
97 #grid2 { | |
98 left: 100px; | |
99 } | |
100 #grid3 { | |
101 left: 200px; | |
102 } | |
103 #grid4 { | |
104 left: 300px; | |
105 } | |
106 #grid5 { | |
107 left: 400px; | |
108 } | |
109 #grid6 { | |
110 left: 500px; | |
111 } | |
112 #grid7 { | |
113 left: 600px; | |
114 } | |
115 | |
116 #vgrid1 { | |
117 top: 0px; | |
118 } | |
119 #vgrid2 { | |
120 top: 100px; | |
121 } | |
122 #vgrid3 { | |
123 top: 200px; | |
124 } | |
125 #vgrid4 { | |
126 top: 300px; | |
127 } | |
128 #vgrid5 { | |
129 top: 400px; | |
130 } | |
131 #vgrid6 { | |
132 top: 500px; | |
133 } | |
134 #vgrid7 { | |
135 top: 600px; | |
136 } | |
137 #vgrid8 { | |
138 top: 700px; | |
139 border: none; | |
140 } | |
141 </style> | |
142 | |
143 <script src="../../../resources/js-test.js"></script> | |
144 </head> | |
145 | |
146 <body id="body"> | |
147 | |
148 <div id="divMain1"> | |
149 <div class="divText" id="divText1"><b>divText1</b></div> | |
150 <span class="mySpan" style="color: blue;">This text should flow
around the green div. This text should flow around the green div. This text shou
ld flow around the green div. This text should flow around the green div. This t
ext should flow around the green div.</span> | |
151 </div> | |
152 | |
153 <div id="divMain2"> | |
154 <div class="divText" id="divText2"><b>divText2</b></div> | |
155 <span class="mySpan" style="color: blue;">This text should flow
around the green div. This text should flow around the green div. This text shou
ld flow around the green div. This text should flow around the green div.</span> | |
156 </div> | |
157 | |
158 <div class="region" id="region1"></div> | |
159 <div class="region" id="region2"></div> | |
160 | |
161 <div id="grid1" class="grid">100px</div> | |
162 <div id="grid2" class="grid">200px</div> | |
163 <div id="grid3" class="grid">300px</div> | |
164 <div id="grid4" class="grid">400px</div> | |
165 <div id="grid5" class="grid">500px</div> | |
166 <div id="grid6" class="grid">600px</div> | |
167 <div id="grid7" class="grid">700px</div> | |
168 | |
169 <div id="vgrid1" class="vgrid"></div> | |
170 <div id="vgrid2" class="vgrid">100px</div> | |
171 <div id="vgrid3" class="vgrid">200px</div> | |
172 <div id="vgrid4" class="vgrid">300px</div> | |
173 <div id="vgrid5" class="vgrid">400px</div> | |
174 <div id="vgrid6" class="vgrid">500px</div> | |
175 <div id="vgrid7" class="vgrid">600px</div> | |
176 <div id="vgrid8" class="vgrid">700px</div> | |
177 | |
178 <script> | |
179 description("Test offsetLeft and offsetTop in a named flow with
floats in vertical-rl mode.") | |
180 | |
181 shouldBe("divText1.offsetParent", "document.body"); | |
182 shouldBe("divText1.offsetLeft", "700"); | |
183 shouldBe("divText1.offsetTop", "200"); | |
184 | |
185 shouldBe("divText2.offsetParent", "document.body"); | |
186 shouldBe("divText2.offsetLeft", "400"); | |
187 shouldBe("divText2.offsetTop", "200"); | |
188 | |
189 if (window.testRunner) { | |
190 var allGraphicElements = document.querySelectorAll(".reg
ion, .divText, .grid, .vgrid, .mySpan"); | |
191 for (var i=0; i<allGraphicElements.length; i++) | |
192 allGraphicElements[i].style.display = "none"; | |
193 } | |
194 | |
195 </script> | |
196 </body> | |
197 </html> | |
OLD | NEW |