<html>
<head>
<title>Bug 29240: iframes keep getting scrollbars with scrolling=no</title>
<style>
    iframe {
        width: 220px;
        height: 200px;
    }
</style>
<script>
    
    function inject(frameId, scrolltype) {
        var content = 
            '<html><head><style type="text/css">' + scrolltype + ' { overflow:scroll; }</style></head>' +
            '<body><div style="width:380px; height:400px; background-color:green"></div></body></html>';

        var doc = document.getElementById(frameId).contentDocument;
        doc.open();
        doc.write(content);
        doc.close();        
    }
    
    function testDimensions(frameId) {
        var frame = document.getElementById(frameId);
        var body = frame.contentDocument.body;
        return (frame.clientWidth == body.clientWidth) && (frame.clientHeight == body.clientHeight);        
    }

    function reportMismatch(frameId) {
        var frame = document.getElementById(frameId);
        var body = frame.contentDocument.body;
        return frameId + ": expected (" + frame.clientWidth + "," + frame.clientHeight + "), " + 
               "actual (" + body.clientWidth + "," + body.clientHeight + ")";               
    }
    
    function test() {
        var htmlScrollSuccess = testDimensions("frame1");
        var bodyScrollSuccess = testDimensions("frame2");

        var output = document.getElementById('output');
        output.innerHTML = htmlScrollSuccess && bodyScrollSuccess ? 
            "PASSED" : 
            "FAILED: " + reportMismatch("frame1") + "; " + reportMismatch("frame2");

        if (window.testRunner)
            testRunner.dumpAsText();
    }
    
</script>
</head>
<body onload="test()">
<p>This page tests that there are no scrollbars with iframe elements which have scrolling=no, 
contain a page large enough to need to be scrolled and have overflow:scroll set on the html 
or body elements. If the page doesn't have a scrollbar, then the iframe's body's clientWidth 
should be equal to the iframe's clientWidth.</p>
<iframe id="frame1" scrolling="no" onload="inject('frame1', 'html')"></iframe>
<iframe id="frame2" scrolling="no" onload="inject('frame2', 'body')"></iframe>
<div id='output'></div>
</body>
</html>