Home | History | Annotate | Download | only in gpu 
      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4 <title>CSS 3D Test: Projected Blue Box over Black Background</title>
      5 <style type="text/css">
      6 .nomargin {
      7   margin: 0px auto;
      8 }
      9 
     10 #container {
     11   -webkit-perspective: 500;
     12 }
     13 
     14 #container > div {
     15   position: relative;
     16   margin: 50px;
     17   width: 125px;
     18   height: 75px;
     19 }
     20 
     21 #container > :first-child {
     22   background-color: blue;
     23   -webkit-transform: rotateY(45deg);
     24 }
     25 </style>
     26 <script>
     27 var g_swapsBeforeAck = 15;
     28 
     29 function main()
     30 {
     31   waitForFinish();
     32 }
     33 
     34 function waitForFinish()
     35 {
     36   if (g_swapsBeforeAck == 0) {
     37     domAutomationController.setAutomationId(1);
     38     domAutomationController.send("SUCCESS");
     39   } else {
     40     g_swapsBeforeAck--;
     41     document.getElementById('blue_box').style.zIndex = g_swapsBeforeAck + 1;
     42     window.webkitRequestAnimationFrame(waitForFinish);
     43   }
     44 }
     45 </script>
     46 </head>
     47 <body onload="main()">
     48 <div style="position:relative; width:200px; height:200px; background-color:black; zindex-0">
     49 </div>
     50 <div id="container" style="position:absolute; top:0px; left:0px">
     51   <div id="blue_box"></div>
     52 </div>
     53 </body>
     54 </html>
     55