content/test/data/gpu/pixel_css3d.html

   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.py. 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 #container {
  14   -webkit-perspective: 500;
  15 }
  16
  17 #container > div {
  18   position: relative;
  19   margin: 50px;
  20   width: 125px;
  21   height: 75px;
  22 }
  23
  24 #container > :first-child {
  25   background-color: blue;
  26   -webkit-transform: rotateY(45deg);
  27 }
  28 </style>
  29 <script>
  30 var g_swapsBeforeAck = 15;
  31
  32 function main()
  33 {
  34   waitForFinish();
  35 }
  36
  37 function waitForFinish()
  38 {
  39   if (g_swapsBeforeAck == 0) {
  40     domAutomationController.setAutomationId(1);
  41     domAutomationController.send("SUCCESS");
  42   } else {
  43     g_swapsBeforeAck--;
  44     document.getElementById('blue_box').style.zIndex = g_swapsBeforeAck + 1;
  45     window.webkitRequestAnimationFrame(waitForFinish);
  46   }
  47 }
  48 </script>
  49 </head>
  50 <body onload="main()">
  51 <div style="position:relative; width:200px; height:200px; background-color:black; zindex-0">
  52 </div>
  53 <div id="container" style="position:absolute; top:0px; left:0px">
  54   <div id="blue_box"></div>
  55 </div>
  56 </body>
  57 </html>