src/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.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>