| <!DOCTYPE html> |
| <style>body { margin:0; }</style> |
| <div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:10px;"> |
| <div style="height:10px;"></div> |
| <div id="target"></div> |
| </div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| test(function() { |
| var rects = document.getElementById("target").getClientRects(); |
| assert_equals(rects.length, 1); |
| var rect = rects[0]; |
| assert_equals(rect.width, 50); |
| assert_equals(rect.height, 0); |
| |
| // Not sure about this. Should there be a second column here, to hold |
| // #target, which is 0 pixels tall? Currently we don't do that. We only |
| // have one column, so we let #target reside at the bottom of the first |
| // column. If we add more content after #target with some actual |
| // height, that's when we create a second column, and *then* #target |
| // will reside at the top of the second column - just because of what's |
| // put after it. |
| assert_equals(rect.left, 0); |
| assert_equals(rect.top, 10); |
| }, "getClientRects on empty last child at column boundary"); |
| </script> |
