<!DOCTYPE html>
<html>
<head>
    <title>layout zoom test</title>
    <style> 
        #test {
            width: 500px;
            height: 1500px;
            background: skyblue;
        }
        #test > div {
            background: navy;
            height: 15px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <div id="console">
        The box above should be navy blue with no banding effects.<br>
    </div>
</body>
<script>
    var testElement = document.getElementById('test');
    var consoleElement = document.getElementById('console');

    function init()
    {
        testElement.innerHTML = '';
        for (var i = 0; i < 100; i++)
            testElement.appendChild(document.createElement('div'));
    }

    function test(zoom)
    {
        testElement.style.zoom = zoom + '%';
        
        var lastElementBottom = testElement.lastChild.getBoundingClientRect().bottom;
        var containerBottom = testElement.getBoundingClientRect().bottom;
        
        var tolerance = Math.ceil(1 / (zoom / 100));
        if (Math.abs(lastElementBottom - containerBottom) <= tolerance)
            log('PASS: With zoom of ' + zoom + '% bottom edge of last child lines up with bottom edge of container.');
        else
            log('FAIL: With zoom of ' + zoom + '% bottom edge of last child at ' + lastElementBottom + ', container at ' + containerBottom + '.');
    }

    function log(str)
    {
        consoleElement.appendChild(document.createTextNode(str));
        consoleElement.appendChild(document.createElement('br'));
    }

    init();
    test(100);
    test(110);
    test(125);
    test(133);
    test(150);
    test(166);
    test(175);
    test(200);
    test(250);
    test(300);
    test(400);
    test(500);
    test(750);
    test(1000);
    test(90);
    test(80);
    test(75);
    test(66);
    test(50);
    test(33);
    test(25);
    test(10);
    test(5);
</script>
</html>