page_load_test/dhtml/colorfade.html
author Alice Nodelman <alice@mozilla.com>
Mon, 29 Aug 2011 11:44:25 -0400
changeset 250 ba94d2a40f17b499539e8724b8ae41ae9d55671e
parent 40 6686b3cbf7304e609111f784f089100426b6f749
child 251 a676cec0840e733b2d674fc516a6f9064369265e
permissions -rw-r--r--
bug 682683 (Addon test failure - TypeError: descriptor 'lower' requires a 'str' object but received a 'unicode') p=anodelman r=jmaher

<html><head>
<!-- MOZ_INSERT_CONTENT_HOOK -->
<title>DOM, CSS and Fonts - Sample Code: Animating Fonts with DOM</title>

<script>
cc=20;
aa=255;
tt=0;
el=0;

var startTime;
function mzDhtmlStart()
{
  startTime = Date.now();
  colorfade();
}

function colorfade()
{
  var s = Date.now();
  if (cc > 0)
  {
    tt+=cc;
    document.getElementById("text"+el).style.left=tt+"px";
    aa-=5;
    document.getElementById("text"+el).style.color="rgb("+aa+","+aa+","+aa+")";
    cc--;
    setTimeout("colorfade()", 0);
  }
  else
  {
    cc=20;
    aa=255;
    tt=0;
    if(el<5)
    {
      el++;
      setTimeout("colorfade()", 0);
    }
    else
      tpRecordTime(Date.now() - startTime);
  }
}
</script></head>

<body onload="mzDhtmlStart()" bgcolor="white">
<div id="text0" style="position: absolute; top: 0px; font-size: 16pt; left: -210px; color: rgb(155,155,155);">Gecko</div>
<div id="text1" style="position: absolute; top: 20px; font-size: 16pt; left: -210px; color: rgb(155,155,155);">Technology</div>
<div id="text2" style="position: absolute; top: 40px; font-size: 16pt; left: -210px; color: rgb(155,155,155);">Text</div>
<div id="text3" style="position: absolute; top: 60px; font-size: 16pt; left: -210px; color: rgb(155,155,155);">Transitions</div>
<div id="text4" style="position: absolute; top: 80px; font-size: 16pt; left: -210px; color: rgb(155,155,155);">Fades</div>
<div id="text5" style="position: absolute; top: 100px; font-size: 16pt; left: -210px; color: rgb(155,155,155);">without opacity</div>
</body></html>