client-rects-crossing-boundaries.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>body { margin:0; }</style>
<div style="columns:4; column-gap:10px; column-fill:auto; width:430px; height:100px;">
    <div id="outer" style="margin-top:10px; height:450px;">
        <div style="height:10px;"></div>
        <div id="first" style="height:100px;"></div>
        <div id="rightFloat" style="float:right; width:50px; height:90px;"></div>
        <div id="tableCell" style="display:table-cell; width:20px; height:180px;"></div>
        <div id="fullSingleColumn" style="height:100px;"></div>
    </div>
</div>
<script>
    test(function() {
        var rects = document.getElementById("outer").getClientRects();
        assert_equals(rects.length, 5);
        assert_equals(rects[0].left, 0);
        assert_equals(rects[0].top, 10);
        assert_equals(rects[0].right, 100);
        assert_equals(rects[0].bottom, 100);
        assert_equals(rects[1].left, 110);
        assert_equals(rects[1].top, 0);
        assert_equals(rects[1].right, 210);
        assert_equals(rects[1].bottom, 100);
        assert_equals(rects[2].left, 220);
        assert_equals(rects[2].top, 0);
        assert_equals(rects[2].right, 320);
        assert_equals(rects[2].bottom, 100);
        assert_equals(rects[3].left, 330);
        assert_equals(rects[3].top, 0);
        assert_equals(rects[3].right, 430);
        assert_equals(rects[3].bottom, 100);
        assert_equals(rects[4].left, 440);
        assert_equals(rects[4].top, 0);
        assert_equals(rects[4].right, 540);
        assert_equals(rects[4].bottom, 60);
    }, "#outer");

    test(function() {
        var rects = document.getElementById("first").getClientRects();
        assert_equals(rects.length, 2);
        assert_equals(rects[0].left, 0);
        assert_equals(rects[0].top, 20);
        assert_equals(rects[0].right, 100);
        assert_equals(rects[0].bottom, 100);
        assert_equals(rects[1].left, 110);
        assert_equals(rects[1].top, 0);
        assert_equals(rects[1].right, 210);
        assert_equals(rects[1].bottom, 20);
    }, "#first");

    test(function() {
        var rects = document.getElementById("rightFloat").getClientRects();
        assert_equals(rects.length, 2);
        assert_equals(rects[0].left, 160);
        assert_equals(rects[0].top, 20);
        assert_equals(rects[0].right, 210);
        assert_equals(rects[0].bottom, 100);
        assert_equals(rects[1].left, 270);
        assert_equals(rects[1].top, 0);
        assert_equals(rects[1].right, 320);
        assert_equals(rects[1].bottom, 10);
    }, "#rightFloat");

    test(function() {
        var rects = document.getElementById("tableCell").getClientRects();
        assert_equals(rects.length, 2);
        assert_equals(rects[0].left, 110);
        assert_equals(rects[0].top, 20);
        assert_equals(rects[0].right, 130);
        assert_equals(rects[0].bottom, 100);
        assert_equals(rects[1].left, 220);
        assert_equals(rects[1].top, 0);
        assert_equals(rects[1].right, 240);
        assert_equals(rects[1].bottom, 100);
    }, "#tableCell");

    test(function() {
        var rects = document.getElementById("fullSingleColumn").getClientRects();
        assert_equals(rects.length, 1);
        assert_equals(rects[0].left, 330);
        assert_equals(rects[0].top, 0);
        assert_equals(rects[0].right, 430);
        assert_equals(rects[0].bottom, 100);
    }, "#fullSingleColumn");
</script>
chromium/third_party/blink/web_tests/fast/multicol/client-rects-crossing-boundaries.html
