LayoutTests/animations/width-using-ems.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Test of width Animation Using em Units</title>
   8   <style type="text/css" media="screen">
   9     body {
  10         font-family: "arial";
  11         font-size: 10px;
  12     }
  13
  14     #box {
  15         position: absolute;
  16         left: 0;
  17         top: 100px;
  18         height: 100px;
  19         width: 100px;
  20         border: 1px solid black;
  21         -webkit-animation-duration: 1s;
  22         -webkit-animation-timing-function: linear;
  23         -webkit-animation-name: "anim";
  24     }
  25     @-webkit-keyframes "anim" {
  26         from { width: 10em; }
  27         to   { width: 20em; }
  28     }
  29     </style>
  30     <script type="text/javascript" charset="utf-8">
  31     if (window.layoutTestController) {
  32         layoutTestController.dumpAsText();
  33         layoutTestController.waitUntilDone();
  34     }
  35
  36     result = "PASS";
  37     const defaultTolerance = 10;
  38
  39     function isEqual(actual, desired, tolerance)
  40     {
  41         if (tolerance == undefined || tolerance == 0)
  42             tolerance = defaultTolerance;
  43         var diff = Math.abs(actual - desired);
  44         return diff < tolerance;
  45     }
  46
  47     function snapshot(expected)
  48     {
  49         if (result != "PASS")
  50             return;
  51
  52         var width = parseInt(window.getComputedStyle(document.getElementById('box')).width);
  53         if (!isEqual(width, expected)) {
  54             result = "FAIL(was:"+width+", expected:"+expected+")";
  55         }
  56     }
  57
  58     function start()
  59     {
  60         setTimeout("snapshot(133)", 333);
  61
  62         window.setTimeout(function() {
  63             document.getElementById('result').innerHTML = result;
  64             if (window.layoutTestController)
  65                 layoutTestController.notifyDone();
  66         }, 400);
  67     }
  68
  69     document.addEventListener('webkitAnimationStart', start, false);
  70
  71   </script>
  72 </head>
  73 <body>
  74 This test performs an animation of the width property using 'em' units. It tests whether or not we are properly
  75 getting the default font-size.
  76 <div id="box">
  77 Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
  78 </div>
  79 <div id="result">
  80 </div>
  81 </body>
  82 </html>