| OLD | NEW |
| 1 <html> | 1 <!DOCTYPE html> |
| 2 <script src="../../resources/js-test.js"></script> |
| 3 <script> |
| 4 description("Test that getBoundingClientRect works as expected on a float in
the second column"); |
| 5 </script> |
| 2 <body> | 6 <body> |
| 3 <div id="tests" style="-webkit-column-count:2; -webkit-column-gap:0; column-coun
t:2; column-gap:0; column-fill:auto; height:300px; width:600px;"> | 7 <div id="multicol" style="-webkit-column-count:2; -webkit-column-gap:0; colu
mn-fill:auto; height:300px; width:600px;"> |
| 4 <div style="height:280px"></div> | 8 <div style="height:280px;"></div> |
| 5 <div id="f1" style="border:5px solid black; float:left"> | 9 <div id="f1" style="border:5px solid black; float:left;"> |
| 6 <img style="display:block;width:140px;height:80px;"> | 10 <img style="display:block; width:140px; height:80px;"> |
| 7 </div> | 11 </div> |
| 8 </div> | 12 </div> |
| 9 <div id="result"></div> | 13 <script> |
| 10 <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", 300, 0] | 22 shouldBe("result.left", "300"); |
| 20 ]; | 23 shouldBe("result.top", "0"); |
| 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 } | |
| 32 | |
| 33 if (window.testRunner) { | |
| 34 testRunner.dumpAsText(); | |
| 35 document.getElementById("tests").style.display = "none"; | |
| 36 } | |
| 37 | |
| 38 document.getElementById("result").innerText = failures ? "FAIL: " + failures
+ " cases failed" : "PASS"; | |
| 39 </script> | |
| 40 | |
| 41 | |
| 42 | |
| 43 </body> | 25 </body> |
| 44 </html> | |
| OLD | NEW |