line-height-rounding.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
</style>

<script>
if (window.testRunner)
    testRunner.dumpAsText();

function checkLineHeight(lineHeight, expectedLineHeight) {
    var testElement = document.getElementById('testElement');
    testElement.style.fontSize = '10px';
    testElement.style.lineHeight = lineHeight;

    var style = document.defaultView.getComputedStyle(testElement, null);
    var actualLineHeight = style.getPropertyValue('line-height');
    if (Math.abs(actualLineHeight - expectedLineHeight) > 0.0001) {
        return 'FAIL: font size: ' + fontSize +
               '; line height percent: ' + lineHeightPercent +
               '; expected line height: ' + expectedLineHeight +
               '; actual line height: ' + actualLineHeight + '<br>';
    }
    return "";
}

function test() {
    var message = checkLineHeight('calc(1.05 + 0.01px)', '10.51px');
    message += checkLineHeight('101%', '10.1px');
    message += checkLineHeight('10.01px', '10.01px');
    message += checkLineHeight('1.01', '10.1px');

    if (message != "")
        document.getElementById('results').innerHTML = 'Test failed:<br>' + message;
    else
        document.getElementById('results').innerHTML = 'Test passed.';

    document.getElementById('testElement').innerHTML = '';
}

</script>
</head>
<body onload='test()'>
    <p>This tests that non-integer line-height is not rounded to an integer.</p>
    <p id='testElement'>test data</p> 
    <div id='results'></div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/line-height-rounding.html
