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 src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  31     <script type="text/javascript" charset="utf-8">
  32
  33     const expectedValues = [
  34       // [animation-name, time, element-id, property, expected-value, tolerance]
  35       ["anim", 0.333, "box", "width", 133, 10],
  36     ];
  37
  38     runAnimationTest(expectedValues);
  39
  40   </script>
  41 </head>
  42 <body>
  43 This test performs an animation of the width property using 'em' units. It tests whether or not we are properly
  44 getting the default font-size.
  45 <div id="box">
  46 Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
  47 </div>
  48 <div id="result">
  49 </div>
  50 </body>
  51 </html>