svg-glyph-extents.html (961B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <head> 5 <style type="text/css"> 6 @font-face { 7 font-family: foo; 8 src: url(resources/svg-glyph-extents.otf); 9 } 10 body { 11 font-family: foo; 12 font-size: 10px; 13 } 14 @keyframes test { 15 from { 16 font-size: 100px; 17 } 18 to { 19 font-size: 10px; 20 } 21 } 22 #start-animation div { 23 display: inline-block; 24 height: 100px; 25 width: 100px; 26 animation-duration: 3s; 27 animation-name: test; 28 } 29 </style> 30 <script type="text/javascript"> 31 function setup() { 32 var e = document.getElementById("watchme"); 33 e.addEventListener("animationend", listener); 34 35 // Start the animation after the animationend listener has been subscribed 36 // (See Bug 1543639 Comment 25 for a rationale). 37 document.body.id = "start-animation"; 38 } 39 function listener() { 40 document.documentElement.className = ""; 41 } 42 </script> 43 </head> 44 <body onload="setup()"> 45 <div>A</div> 46 <div id="watchme">B</div> 47 <div>C</div> 48 <div>D</div> 49 </body> 50 </html>