diff options
Diffstat (limited to 'WebCore/manual-tests/win/milliondollar.html')
| -rw-r--r-- | WebCore/manual-tests/win/milliondollar.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/WebCore/manual-tests/win/milliondollar.html b/WebCore/manual-tests/win/milliondollar.html new file mode 100644 index 0000000..e1d51ff --- /dev/null +++ b/WebCore/manual-tests/win/milliondollar.html @@ -0,0 +1,137 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Million dollar test</title> +<style type="text/css" media="screen"> + body { + padding: 0px; margin: 0px; font-size: 12px; font-family:"Lucida Grande", Verdana, Arial, sans-serif; + background:#303030; + } + .ie {text-align: left; width:1000px;position:relative;visibility:hidden;z-index:1;} + .grid {height: 1000px; width:1000px; position:relative;z-index:153;xoverflow:hidden;} + .row {background:url(100grid_inv.png) #000;height: 100px; text-align: left; position:relative;width:1000px;z-index:10;} + #lq {width:1000px;position:relative;z-index:0;text-align:left;} + .bz {-webkit-perspective: 1500;-webkit-perspective-origin: 50% 325px;} + .fc {-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg) ;opacity: 1.0;} + @-webkit-keyframes spin_3d { + 0% { -webkit-transform: rotateY(0) rotateZ(0); } + 33% { -webkit-transform: rotateY(-20deg) rotateZ(-20deg); } + 65% { -webkit-transform: rotateY(20deg) rotateZ(20deg); } + 100% { -webkit-transform: rotateY(0deg) rotateZ(0deg); } + } + .plane > a {display:block;height:100%;width:100%;} + .plane { + position: absolute; + opacity:0.5; + background-repeat:no-repeat; + -webkit-transition: -webkit-transform 0.3s, opacity 0s;-webkit-backface-visibility: visible;} +</style> + +<script type="text/javascript"> +function loadBlocks() { + document.getElementById("ie").style.visibility = "visible"; + document.getElementById("ie").className = document.getElementById("ie").className + " bz"; + document.getElementById("grid").className = document.getElementById("grid").className + " fc"; + document.getElementById("lq").style.display = "none"; + + var cubes; + + cubify(200,0,250,50); + cubify(800,500,900,600); + cubify(250,350,300,400); + cubify(600,600,650,650); + cubify(850,0,900,50); + cubify(650,450,700,500); + cubify(100,500,250,650); + cubify(400,600,500,700); + cubify(700,600,800,700); + cubify(350,0,500,150); + cubify(450,200,500,250); + cubify(550,250,600,300); + cubify(0,400,100,450); + cubify(600,150,650,200); + cubify(600,700,650,750); + cubify(150,850,450,950); + cubify(200,100,300,200); + cubify(750,200,950,400); + cubify(250,700,350,800); + cubify(600,800,700,900); + cubify(100,300,150,350); + cubify(0,300,50,350); + cubify(850,650,950,700); + cubify(900,100,950,150); + cubify(200,400,250,450); + cubify(200,250,250,300); + cubify(300,600,350,650); + cubify(50,200,100,250); + cubify(100,100,150,150); + cubify(0,0,5,5); + cubify(470,430,475,435); + cubify(520,480,525,485); + cubify(570,380,575,385); + cubify(550,0,600,50); + cubify(650,0,700,50); + cubify(425,390,455,400); + cubify(435,400,445,430); + cubify(525,425,530,430); + cubify(450,500,465,515); + cubify(650,100,750,200); + cubify(0,0,50,50); + cubify(700,750,900,800); + cubify(495,390,510,405); + cubify(495,445,500,450); + cubify(560,450,565,455); + cubify(460,460,465,465); + cubify(525,370,530,375); + cubify(490,420,495,425); + cubify(520,440,525,445); + cubify(510,420,515,425); + cubify(495,465,500,470); + cubify(475,405,480,410); + cubify(545,400,550,405); + cubify(485,370,490,375); + cubify(430,365,435,370); + + document.getElementById("grid").innerHTML = cubes + document.getElementById("grid").innerHTML; + + function cubify(x1, y1, x2, y2) + { + var width, height,dw; + width = x2 - x1; + height = y2 - y1; + if (width < height) { + dw = width; + } else { + dw = height; + } + cubes += addBlock(x1,y1,width,height,dw); + } + + function addBlock(x1,y1,xf,qp,dw) + { + 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;-webkit-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;-webkit-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;-webkit-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;-webkit-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;-webkit-transform:rotateY(0deg) translateX(0px) translateZ("+(dw)+"px) translateY(0px);position:absolute;'></div></div>"; + } + + document.getElementById("grid").style.webkitAnimation = "spin_3d 36s infinite linear"; +}; + +</script> +</head> +<body onload="loadBlocks()"> +<center> + <div id="lq"> + <div style="top: 252px; left: 203px; width: 196px; height: 196px; position: relative; + z-index: 0; text-align: left; border: 0px solid #999; padding: 0px; background: #333; + -moz-border-radius: 0px; -webkit-border-radius: 0px; text-align: center;"> + $1 a pixel + </div> + </div> + <div class="ie" id="ie"> + <div class="grid" id="grid"> + <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> + </div> + </div> +</center> +</body> +</html> |