<!DOCTYPE html>
<html>    
<head>
<style type="text/css">
p {
    display: inline-block;
    background-color: #000;
    color: #fff;
    font-family: Ahem;
    font-size: 10px;
    line-height: 120%;
}
</style>
</head>
<body onload="runTest()">
<p id="test">text of font-size 10px with 120% line height.</p>
<script src="../../resources/js-test-pre.js"></script>
<script>

if (window.testRunner)
    testRunner.dumpAsText();

description('This tests that page zoom and getComputedStyle of line-height works well together.\n'
    + 'To test manually, open this page in a browser window, and zoom-in and reload repeatedly.\n'
    + 'This text should get bigger at each step proportionately but the line-height value should stay constant.');

function runTest()
{
    var testElement = document.getElementById('test');

    if (!window.eventSender) {
        log("Line height is" + " : " + parseFloat(document.defaultView.getComputedStyle(testElement, null).lineHeight).toFixed(2));
        return;
    }

    for (var i = 0; i < 10; i++) {
        eventSender.zoomPageIn();
        var lineHeight = parseFloat(document.defaultView.getComputedStyle(testElement, null).lineHeight).toFixed(2);
        shouldBe(lineHeight, '12.00');
    }
}

</script>
</body>
</html>