<!DOCTYPE html>

<html>
<head>
  <style>
  #box {
    display: inline;
    font-size: 10px;
    font-family: sans-serif;
    -webkit-transition: font-size 2s linear;
  }
  
  #control {
    display: inline;
    font-size: 15px;
    font-family: sans-serif;
  }
  
  #box.changed {
    font-size: 20px;
  }
  </style>
  
  <script src="resources/transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [1, 'box', 'font-size', 15, 2, checkSize],
    ];

    function checkSize()
    {
      var boxWidth = document.getElementById('box').offsetWidth;
      var controlWidth = document.getElementById('control').offsetWidth;
      var result = "";
      if (isCloseEnough(boxWidth, controlWidth, 2))
        result = "PASS: width is close to control";
      else
        result = "FAIL: width was " + boxWidth + ", should have been " + controlWidth;

      return result;
    }
    
    function setupTest()
    {
      document.getElementById('box').className = 'changed';
    }

    runTransitionTest(expectedValues, setupTest, usePauseAPI);
  </script>
</head>
<body>
  <div id="box">Here is some text</div>
  <br>
  <div id="control">Here is some text</div>
  <div id="result"></div>
</body>
</html>