testing/performance/talos/page_load_test/dhtml/fadespacing.html

   1 <html><head>
   2 <!-- MOZ_INSERT_CONTENT_HOOK -->
   3 <title>DOM, CSS and Fonts - Sample Code: Animating Fonts with DOM</title>
   4 <script>
   5
   6   var count = 0;
   7   el=0;                 // Index of the element.
   8         anicounter=0;           // Frame counter.
   9         colorvalue=255;         // Aux color value.
  10
  11   var startTime;
  12   function mzDhtmlStart()
  13   {
  14     startTime = Date.now();
  15     fadein();
  16   }
  17
  18         function fadein()
  19         {
  20                 // This is a 20-steps animation procedure.
  21                 if (anicounter < 20)
  22                 {
  23                         anicounter++;
  24                         currentSpace=parseFloat(document.getElementById("text"+el).style.letterSpacing);
  25                         currentSpace+=.2;
  26                         document.getElementById("text"+el).style.letterSpacing=currentSpace+"px";
  27                         if(anicounter > 10)
  28                           colorvalue-=25;
  29
  30                         document.getElementById("text"+el).style.color="rgb("+colorvalue+","+colorvalue+","+colorvalue+")";
  31                         posleft=parseInt(document.getElementById("text"+el).style.left);
  32                         posleft-=1;
  33                         document.getElementById("text"+el).style.left=posleft+"px";
  34                         setTimeout("fadein()", 0);
  35                 }
  36                 else
  37                 {
  38                         anicounter=0;
  39                         ge_valopacity=0;
  40                         fadeout();
  41                 }
  42         }
  43
  44         function fadeout()
  45         {
  46           if (anicounter < 20)
  47           {
  48                         anicounter++;
  49                         currentSpace=parseFloat(document.getElementById("text"+el).style.letterSpacing);
  50                         currentSpace+=.2;
  51                         document.getElementById("text"+el).style.letterSpacing=currentSpace+"px";
  52                         if(anicounter>10)
  53                           colorvalue+=25;
  54
  55                         document.getElementById("text"+el).style.color="rgb("+colorvalue+","+colorvalue+","+colorvalue+")";
  56                         posleft=parseInt(document.getElementById("text"+el).style.left);
  57       posleft-=2;
  58                         document.getElementById("text"+el).style.left=posleft+"px";
  59                         setTimeout("fadeout()", 0);
  60           }
  61           else
  62           {
  63                         anicounter=0;
  64                         colorvalue=255;
  65                         el++;
  66
  67                         if (el < 5)
  68                           fadein();
  69                         else
  70                           tpRecordTime(Date.now() - startTime);
  71           }
  72         }
  73
  74 </script></head>
  75 <body onload="mzDhtmlStart();" bgcolor="white">
  76
  77 <div id="text0" style="position: absolute; top: 0px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 40px;">Netscape Communications</div>
  78 <div id="text1" style="position: absolute; top: 50px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 90px;">Gecko - Link Different</div>
  79 <div id="text2" style="position: absolute; top: 100px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 140px;">Cool Demos and Fades </div>
  80 <div id="text3" style="position: absolute; top: 150px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 190px;">Dynamic Font Spacing</div>
  81 <div id="text4" style="position: absolute; top: 200px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 240px;">Cool Gecko Technology</div>
  82
  83 </body></html>