<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style> 
    span { font-size: 16px; }
    #control { line-height: 200%; }
    #calc-percent { line-height: calc(100% * 2); }
    #calc-percent-pixels { line-height: calc(100% + 16px); }
    #calc-percent-ems { line-height: calc(100% + 1em); }
</style>
<div id="test-container">
    <span id="control">The line height of these lines should be identical</span><hr/>
    <span id="calc-percent">The line height of these lines should be identical</span><hr/>
    <span id="calc-percent-pixels">The line height of these lines should be identical</span><hr/>
    <span id="calc-percent-ems">The line height of these lines should be identical</span><hr/>
</div>
<script>
    description("Tests that CSS3 calc() can be used for the line-height property");

    shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
    shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-pixels"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
    shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-ems"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');

    document.body.style.zoom = 1.75;

    shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
    shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-pixels"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
    shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-ems"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');

    if (window.testRunner) {
        var testContainer = document.getElementById("test-container");
        if (testContainer)
            document.body.removeChild(testContainer);   
    }    
</script>