LayoutTests/transitions/font-family-during-transition.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6   #box {
   7     display: inline;
   8     font-size: 10px;
   9     font-family: sans-serif;
  10     -webkit-transition: font-size 2s linear;
  11   }
  12
  13   #control {
  14     display: inline;
  15     font-size: 15px;
  16     font-family: sans-serif;
  17   }
  18
  19   #box.changed {
  20     font-size: 20px;
  21   }
  22   </style>
  23
  24   <script src="resources/transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  25   <script type="text/javascript" charset="utf-8">
  26     const expectedValues = [
  27       // [time, element-id, property, expected-value, tolerance]
  28       [1, 'box', 'font-size', 15, 2, checkSize],
  29     ];
  30
  31     function checkSize()
  32     {
  33       var boxWidth = document.getElementById('box').offsetWidth;
  34       var controlWidth = document.getElementById('control').offsetWidth;
  35       var result = "";
  36       if (isCloseEnough(boxWidth, controlWidth, 2))
  37         result = "PASS: width is close to control";
  38       else
  39         result = "FAIL: width was " + boxWidth + ", should have been " + controlWidth;
  40
  41       return result;
  42     }
  43
  44     function setupTest()
  45     {
  46       document.getElementById('box').className = 'changed';
  47     }
  48
  49     runTransitionTest(expectedValues, setupTest, usePauseAPI);
  50   </script>
  51 </head>
  52 <body>
  53   <div id="box">Here is some text</div>
  54   <br>
  55   <div id="control">Here is some text</div>
  56   <div id="result"></div>
  57 </body>
  58 </html>