| <!doctype html> |
| <html> |
| <head> |
| <title>offsetLeft and offsetTop test for columns</title> |
| <style type="text/css"> |
| |
| .columns { |
| -webkit-column-count:2; |
| -webkit-column-gap:50px; |
| inline-size:250px; |
| block-size:145px; |
| margin: 20px; |
| border:2px solid black; |
| -webkit-column-rule: 1px solid maroon; |
| } |
| |
| #t1, #t6 { |
| -webkit-column-break-after: always; |
| } |
| |
| .columns div { block-size:50px; background-color:green; margin:5px; -webkit-margin-collapse:separate } |
| |
| .columns div.span { margin:0; block-size:25px; background-color:orange; -webkit-column-span:all; margin-inline-start: 5px; margin-inline-end: 5px } |
| |
| .fail #pass, .pass #fail { display: none; } |
| |
| .vertical { -webkit-writing-mode: vertical-lr } |
| .vertical-flipped { -webkit-writing-mode: vertical-rl } |
| </style> |
| </head> |
| |
| <body style="margin:10px"> |
| <div class="columns"> |
| <div id="t1"></div> |
| <div id="t2"></div> |
| <div class="span" id="t3"></div> |
| <div><span id="t4"></span></div> |
| <div><span id="t5"></span></div> |
| </div> |
| |
| <div class="columns vertical"> |
| <div id="t9"></div> |
| <div id="t10"></div> |
| <div class="span" id="t8"></div> |
| <div><span id="t6"></span></div> |
| <div><span id="t7"></span></div> |
| </div> |
| |
| <div class="columns vertical-flipped"> |
| <div id="t11"></div> |
| <div id="t12"></div> |
| <div class="span" id="t13"></div> |
| <div id="t14"></div> |
| <div id="t15"></div> |
| </div> |
| |
| <p id="output"></p> |
| |
| <script type="text/javascript"> |
| |
| function testOffsetTop(expected, id1, id2, number) { |
| var one = document.getElementById(id1) |
| var two = document.getElementById(id2) |
| var output = document.getElementById('output') |
| if (one.offsetTop != two.offsetTop) |
| output.innerHTML += "Failed Test #" + number + " because the offsetTop of " + id1 + " and " + id2 + " were not the same. " + one.offsetTop + " and " + two.offsetTop + ".<br>" |
| else if (one.offsetTop != expected) |
| output.innerHTML += "Failed Test #" + number + " because the offsetTop of " + id1 + " and " + id2 + " did not match the expected value of " + expected + ". They were " + one.offsetTop + " instead.<br>" |
| else |
| output.innerHTML += "Test #" + number + " Passed.<br>" |
| } |
| |
| function testOffsetLeft(expected, id1, id2, number) { |
| var one = document.getElementById(id1) |
| var two = document.getElementById(id2) |
| var output = document.getElementById('output') |
| if (one.offsetLeft != two.offsetLeft) |
| output.innerHTML += "Failed Test #" + number + " because the offsetLeft of " + id1 + " and " + id2 + " were not the same. " + one.offsetLeft + " and " + two.offsetLeft + ".<br>" |
| else if (one.offsetLeft != expected) |
| output.innerHTML += "Failed Test #" + number + " because the offsetLeft of " + id1 + " and " + id2 + " did not match the expected value of " + expected + ". They were " + one.offsetLeft + " instead.<br>" |
| else |
| output.innerHTML += "Test #" + number + " Passed.<br>" |
| } |
| |
| if(window.testRunner) |
| testRunner.dumpAsText(); |
| |
| testOffsetTop(27, "t1", "t2", 1); |
| testOffsetTop(112, "t4", "t5", 2); |
| testOffsetTop(82, "t3", "t3", 3); |
| |
| testOffsetLeft(37, "t1", "t4", 4); |
| testOffsetLeft(187, "t2", "t5", 5); |
| testOffsetLeft(37, "t3", "t3", 6); |
| |
| testOffsetTop(196, "t6", "t9", 7); |
| testOffsetTop(346, "t7", "t10", 8); |
| testOffsetTop(196, "t8", "t8", 9); |
| |
| testOffsetLeft(37, "t9", "t10", 10); |
| testOffsetLeft(122, "t6", "t7", 11); |
| testOffsetLeft(92, "t8", "t8", 12); |
| |
| testOffsetTop(470, "t11", "t14", 13); |
| testOffsetTop(620, "t12", "t15", 14); |
| testOffsetTop(470, "t13", "t13", 15); |
| |
| testOffsetLeft(37, "t14", "t15", 16); |
| testOffsetLeft(122, "t11", "t12", 17); |
| testOffsetLeft(92, "t13", "t13", 18); |
| </script> |
| </body> |
| </html> |
