| OLD | NEW |
| (Empty) |
| 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 font-size 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: 250px; | |
| 19 width: 400px; | |
| 20 border: 1px solid black; | |
| 21 animation-duration: 1s; | |
| 22 animation-timing-function: linear; | |
| 23 animation-name: anim; | |
| 24 } | |
| 25 @keyframes anim { | |
| 26 from { font-size: 1em; } | |
| 27 to { font-size: 2em; } | |
| 28 } | |
| 29 </style> | |
| 30 <script type="text/javascript" charset="utf-8"> | |
| 31 if (window.testRunner) { | |
| 32 testRunner.dumpAsText(); | |
| 33 testRunner.waitUntilDone(); | |
| 34 } | |
| 35 | |
| 36 result = "PASS"; | |
| 37 const defaultTolerance = 1; | |
| 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 fontSize = parseInt(window.getComputedStyle(document.getElementById(
'box')).fontSize); | |
| 53 if (!isEqual(fontSize, expected)) { | |
| 54 result = "FAIL(was:"+fontSize+", expected:"+expected+")"; | |
| 55 } | |
| 56 } | |
| 57 | |
| 58 function start() | |
| 59 { | |
| 60 setTimeout("snapshot(13)", 333); | |
| 61 | |
| 62 window.setTimeout(function() { | |
| 63 document.getElementById('result').innerHTML = result; | |
| 64 if (window.testRunner) | |
| 65 testRunner.notifyDone(); | |
| 66 }, 400); | |
| 67 } | |
| 68 | |
| 69 document.addEventListener('animationstart', start, false); | |
| 70 | |
| 71 </script> | |
| 72 </head> | |
| 73 <body> | |
| 74 This test performs an animation of the font-size property using 'em' units. It t
ests 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 Here is some text. Here is some text. Here is some text. Here is some text. Here
is some text. Here is some text. | |
| 79 </div> | |
| 80 <div id="result"> | |
| 81 </div> | |
| 82 </body> | |
| 83 </html> | |
| OLD | NEW |