third_party/WebKit/ManualTests/win/milliondollar.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4 <head>
   5 <title>Million dollar test</title>
   6 <style type="text/css" media="screen">
   7     body {
   8         padding: 0px; margin: 0px; font-size: 12px; font-family:"Lucida Grande", Verdana, Arial, sans-serif;
   9         background:#303030;
  10     }
  11     .ie {text-align: left; width:1000px;position:relative;visibility:hidden;z-index:1;}
  12     .grid {height: 1000px; width:1000px; position:relative;z-index:153;xoverflow:hidden;}
  13     .row {background:url(100grid_inv.png) #000;height: 100px; text-align: left; position:relative;width:1000px;z-index:10;}
  14     #lq {width:1000px;position:relative;z-index:0;text-align:left;}
  15     .bz {-webkit-perspective: 1500;-webkit-perspective-origin: 50% 325px;}
  16     .fc {-webkit-transform-style: preserve-3d;transform:  rotateY(0deg) ;opacity: 1.0;}
  17     @-webkit-keyframes spin_3d {
  18     0%    { transform: rotateY(0)       rotateZ(0); }
  19     33%   { transform: rotateY(-20deg)  rotateZ(-20deg); }
  20     65%   { transform: rotateY(20deg) rotateZ(20deg); }
  21     100%  { transform: rotateY(0deg) rotateZ(0deg); }
  22     }
  23     .plane > a {display:block;height:100%;width:100%;}
  24     .plane {
  25         position: absolute;
  26         opacity:0.5;
  27         background-repeat:no-repeat;
  28         -webkit-transition: -webkit-transform 0.3s, opacity 0s;-webkit-backface-visibility: visible;}
  29 </style>
  30
  31 <script type="text/javascript">
  32 function loadBlocks() {
  33     document.getElementById("ie").style.visibility = "visible";
  34     document.getElementById("ie").className = document.getElementById("ie").className + " bz";
  35     document.getElementById("grid").className = document.getElementById("grid").className + " fc";
  36     document.getElementById("lq").style.display = "none";
  37
  38     var cubes;
  39
  40     cubify(200,0,250,50);
  41     cubify(800,500,900,600);
  42     cubify(250,350,300,400);
  43     cubify(600,600,650,650);
  44     cubify(850,0,900,50);
  45     cubify(650,450,700,500);
  46     cubify(100,500,250,650);
  47     cubify(400,600,500,700);
  48     cubify(700,600,800,700);
  49     cubify(350,0,500,150);
  50     cubify(450,200,500,250);
  51     cubify(550,250,600,300);
  52     cubify(0,400,100,450);
  53     cubify(600,150,650,200);
  54     cubify(600,700,650,750);
  55     cubify(150,850,450,950);
  56     cubify(200,100,300,200);
  57     cubify(750,200,950,400);
  58     cubify(250,700,350,800);
  59     cubify(600,800,700,900);
  60     cubify(100,300,150,350);
  61     cubify(0,300,50,350);
  62     cubify(850,650,950,700);
  63     cubify(900,100,950,150);
  64     cubify(200,400,250,450);
  65     cubify(200,250,250,300);
  66     cubify(300,600,350,650);
  67     cubify(50,200,100,250);
  68     cubify(100,100,150,150);
  69     cubify(0,0,5,5);
  70     cubify(470,430,475,435);
  71     cubify(520,480,525,485);
  72     cubify(570,380,575,385);
  73     cubify(550,0,600,50);
  74     cubify(650,0,700,50);
  75     cubify(425,390,455,400);
  76     cubify(435,400,445,430);
  77     cubify(525,425,530,430);
  78     cubify(450,500,465,515);
  79     cubify(650,100,750,200);
  80     cubify(0,0,50,50);
  81     cubify(700,750,900,800);
  82     cubify(495,390,510,405);
  83     cubify(495,445,500,450);
  84     cubify(560,450,565,455);
  85     cubify(460,460,465,465);
  86     cubify(525,370,530,375);
  87     cubify(490,420,495,425);
  88     cubify(520,440,525,445);
  89     cubify(510,420,515,425);
  90     cubify(495,465,500,470);
  91     cubify(475,405,480,410);
  92     cubify(545,400,550,405);
  93     cubify(485,370,490,375);
  94     cubify(430,365,435,370);
  95
  96     document.getElementById("grid").innerHTML = cubes + document.getElementById("grid").innerHTML;
  97
  98     function cubify(x1, y1, x2, y2)
  99     {
 100         var width, height,dw;
 101         width = x2 - x1;
 102         height = y2 - y1;
 103         if (width < height) {
 104             dw = width;
 105         } else {
 106             dw = height;
 107         }
 108         cubes += addBlock(x1,y1,width,height,dw);
 109     }
 110
 111     function addBlock(x1,y1,xf,qp,dw)
 112     {
 113        return "<div class='a_cube'><div class='plane one' style='background-color: red;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;transform:rotateY(90deg) rotateZ(-90deg) translateX(0px) translateY(-"+(dw/2)+"px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane two' style='background-color: blue;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;transform:rotateY(90deg) rotateX(180deg) rotateZ(-90deg) translateX(0px) translateY(-"+(dw/2)+"px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane three' style='background-color: green;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;transform:rotateX(-90deg) translateX(0px) translateZ("+(dw/2)+"px) translateY(-"+(dw/2)+"px);position:absolute;'></div><div class='plane four' style='background-color: yellow;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;transform:rotateY(90deg) rotateX(90deg) rotateZ(-90deg) translateY(-"+(dw/2)+"px) translateX(0px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane five' style='background-color: gray;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;transform:rotateY(0deg) translateX(0px) translateZ("+(dw)+"px) translateY(0px);position:absolute;'></div></div>";
 114     }
 115
 116     document.getElementById("grid").style.webkitAnimation = "spin_3d 36s infinite linear";
 117 };
 118
 119 </script>
 120 </head>
 121 <body onload="loadBlocks()">
 122 <center>
 123     <div id="lq">
 124         <div style="top: 252px; left: 203px; width: 196px; height: 196px; position: relative;
 125             z-index: 0; text-align: left; border: 0px solid #999; padding: 0px; background: #333;
 126             -moz-border-radius: 0px; -webkit-border-radius: 0px; text-align: center;">
 127             $1 a pixel
 128         </div>
 129     </div>
 130     <div class="ie" id="ie">
 131         <div class="grid" id="grid">
 132             <div class="row" id="row0"></div><div class="row" id="row1"></div><div class="row" id="row2"></div><div class="row" id="row3"></div><div class="row" id="row4"></div><div class="row" id="row5"></div><div class="row" id="row6"></div><div class="row" id="row7"></div><div class="row" id="row8"></div><div class="row" id="row9"></div>
 133         </div>
 134     </div>
 135 </center>
 136 </body>
 137 </html>