<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Test of font-size Animation Using em Units</title>
  <style type="text/css" media="screen">
    body {
        font-family: "arial";
        font-size: 10px;    
    }
    
    #box {
        position: absolute;
        left: 0;
        top: 100px;
        height: 250px;
        width: 400px;
        border: 1px solid black;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-name: "anim";
    }
    @-webkit-keyframes "anim" {
        from { font-size: 1em; }
        to   { font-size: 2em; }
    }
    </style>
    <script type="text/javascript" charset="utf-8">
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }
    
    result = "PASS";
    const defaultTolerance = 1;
    
    function isEqual(actual, desired, tolerance)
    {
        if (tolerance == undefined || tolerance == 0)
            tolerance = defaultTolerance;
        var diff = Math.abs(actual - desired);
        return diff < tolerance;
    }
    
    function snapshot(expected)
    {
        if (result != "PASS")
            return;
            
        var fontSize = parseInt(window.getComputedStyle(document.getElementById('box')).fontSize);
        if (!isEqual(fontSize, expected)) {
            result = "FAIL(was:"+fontSize+", expected:"+expected+")";
        }
    }

    function start()
    {
        setTimeout("snapshot(13)", 333);
        
        window.setTimeout(function() {
            document.getElementById('result').innerHTML = result;
            if (window.testRunner)
                testRunner.notifyDone();
        }, 400);
    }
    
    document.addEventListener('webkitAnimationStart', start, false);
    
  </script>
</head>
<body>
This test performs an animation of the font-size property using 'em' units. It tests whether or not we are properly 
getting the default font-size.
<div id="box">
Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. 
Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. 
</div>
<div id="result">
</div>
</body>
</html>