Home | History | Annotate | Download | only in gpu 
      1 <!DOCTYPE HTML>
      2 
      3 <!-- READ BEFORE UPDATING:
      4 If this test is updated make sure to increment the "revision" value of the
      5 associated test in content/test/gpu/page_sets/pixel_tests.json. This will ensure
      6 that the baseline images are regenerated on the next run.
      7 -->
      8 
      9 <html>
     10 <head>
     11 <title>CSS 3D Test: Projected Blue Box over Black Background</title>
     12 <style type="text/css">
     13 .nomargin {
     14   margin: 0px auto;
     15 }
     16 
     17 #container {
     18   -webkit-perspective: 500;
     19 }
     20 
     21 #container > div {
     22   position: relative;
     23   margin: 50px;
     24   width: 125px;
     25   height: 75px;
     26 }
     27 
     28 #container > :first-child {
     29   background-color: blue;
     30   -webkit-transform: rotateY(45deg);
     31 }
     32 </style>
     33 <script>
     34 var g_swapsBeforeAck = 15;
     35 
     36 function main()
     37 {
     38   waitForFinish();
     39 }
     40 
     41 function waitForFinish()
     42 {
     43   if (g_swapsBeforeAck == 0) {
     44     domAutomationController.setAutomationId(1);
     45     domAutomationController.send("SUCCESS");
     46   } else {
     47     g_swapsBeforeAck--;
     48     document.getElementById('blue_box').style.zIndex = g_swapsBeforeAck + 1;
     49     window.webkitRequestAnimationFrame(waitForFinish);
     50   }
     51 }
     52 </script>
     53 </head>
     54 <body onload="main()">
     55 <div style="position:relative; width:200px; height:200px; background-color:black; zindex-0">
     56 </div>
     57 <div id="container" style="position:absolute; top:0px; left:0px">
     58   <div id="blue_box"></div>
     59 </div>
     60 </body>
     61 </html>
     62