OLD | NEW |
1 <html> | 1 <!DOCTYPE html> |
2 <body style="-webkit-writing-mode: vertical-rl"> | 2 <script src="../../../resources/js-test.js"></script> |
3 <div id="tests" style="-webkit-column-count:2; -webkit-column-gap:0; column-coun
t:2; column-gap:0; column-fill:auto; width:300px; height:600px;"> | |
4 <div style="width:280px"></div> | |
5 <div id="f1" style="border:5px solid black; float:left"> | |
6 <img style="display:block;height:140px;width:80px;"> | |
7 </div> | |
8 </div> | |
9 <div id="result"></div> | |
10 <script> | 3 <script> |
| 4 description("Test that getBoundingClientRect works as expected on a float in
the second column - writing-mode is vertical-rl."); |
| 5 </script> |
| 6 <body style="-webkit-writing-mode:vertical-rl;"> |
| 7 <div id="multicol" style="-webkit-column-count:2; -webkit-column-gap:0; colu
mn-fill:auto; width:300px; height:600px;"> |
| 8 <div style="width:280px;"></div> |
| 9 <div id="f1" style="border:5px solid black; float:left;"> |
| 10 <img style="display:block; height:140px; width:80px;"> |
| 11 </div> |
| 12 </div> |
| 13 <script> |
11 function floatOffset(float) | 14 function floatOffset(float) |
12 { | 15 { |
13 var parentRect = document.getElementById('tests').getBoundingClientRect(
); | 16 var parentRect = document.getElementById("multicol").getBoundingClientRe
ct(); |
14 var rect = float.getBoundingClientRect(); | 17 var rect = float.getBoundingClientRect(); |
15 return { width: rect.left - parentRect.left, height: rect.top - parentRe
ct.top }; | 18 return { left: rect.left - parentRect.left, top: rect.top - parentRect.t
op }; |
16 } | 19 } |
17 | 20 |
18 var tests = [ | 21 var result = floatOffset(document.getElementById("f1")); |
19 ["f1", 0, 300] | 22 shouldBe("result.left", "210"); |
20 ]; | 23 shouldBe("result.top", "300"); |
21 | 24 </script> |
22 var test; | |
23 var failures = 0; | |
24 while (test = tests.shift()) { | |
25 var float = document.getElementById(test[0]); | |
26 var result = floatOffset(float); | |
27 var passed = result.width === test[1] && result.height === test[2] | |
28 float.style.backgroundColor = passed ? "green" : "red"; | |
29 if (!passed) { | |
30 failures++ | |
31 alert(result.width + " " + result.height) | |
32 } | |
33 } | |
34 | |
35 if (window.testRunner) { | |
36 testRunner.dumpAsText(); | |
37 document.getElementById("tests").style.display = "none"; | |
38 } | |
39 | |
40 document.getElementById("result").innerText = failures ? "FAIL: " + failures
+ " cases failed" : "PASS"; | |
41 </script> | |
42 | |
43 | |
44 | |
45 </body> | 25 </body> |
46 </html> | |
OLD | NEW |