<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Line Height Test</title>
  <style type="text/css" media="screen">
    #box {
        position: absolute;
        left: 0;
        top: 100px;
        height: 250px;
        width: 400px;
        font-family: "arial";
        font-size: 10px;
        border: 1px solid black;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-name: "anim";
    }
    @-webkit-keyframes "anim" {
        from { line-height: 1em; }
        to   { line-height: 2em; }
    }
    </style>
    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    
    const expectedValues = [
      // [animation-name, time, element-id, property, expected-value, tolerance]
      ["anim", 0.1, "box", "lineHeight", 10, 1],
    ];
    
    runAnimationTest(expectedValues);
    
  </script>
</head>
<body>
This test performs an animation of the line-height property. It tests whether or not we are properly getting the 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>