LayoutTests/transitions/text-indent-transition.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5   <title>Testing transitions of text-indent</title>
   6   <style type="text/css" media="screen">
   7     .box {
   8       width: 400px;
   9       height: 100px;
  10       margin: 10px;
  11       border: 1px solid blue;
  12       -webkit-transition-property: text-indent;
  13       -webkit-transition-duration: 1s;
  14       -webkit-transition-timing-function: linear;
  15     }
  16
  17     .indent {
  18       text-indent: 0;
  19     }
  20
  21     #container.final .indent {
  22       text-indent: 100px;
  23     }
  24
  25   </style>
  26   <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  27   <script type="text/javascript" charset="utf-8">
  28
  29     const expectedValues = [
  30       // [time, element-id, property, expected-value, tolerance]
  31       [0.5, 'box1', 'text-indent', 50, 2],
  32     ];
  33
  34     function setupTest()
  35     {
  36       document.getElementById('container').className = 'final';
  37     }
  38
  39     runTransitionTest(expectedValues, setupTest, true);
  40   </script>
  41 </head>
  42 <body>
  43
  44   <div id="container">
  45     <div id="box1" class='indent box'>Text is affected by transition of text-indent.</div>
  46   </div>
  47
  48   <div id="result"></div>
  49 </body>
  50 </html>