content/test/data/gpu/mem_css3d.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>GPU Memory Test: Use N MB of GPU Memory with 3D CSS</title>
   5 <style>
   6 .block {
   7   background: #FF0000;
   8   font-size: 150px;
   9   height: 512px;
  10   position: absolute;
  11   width: 512px;
  12
  13 }
  14 .perspective
  15 {
  16   border: 1px solid black;
  17   height: 512px;
  18   text-align: center;
  19   width:  512px;
  20   -webkit-perspective: 600px;
  21   -webkit-perspective-origin: center center;
  22 }
  23 </style>
  24 <script type="text/javascript">
  25 // Generate n 3D CSS elements that are each about 1 MB in size
  26 function useGpuMemory(mb_to_use) {
  27   n = mb_to_use;
  28   var blocks = document.getElementById("blocks");
  29   var blockArray = document.getElementsByClassName("block");
  30   for (var i = 0; i < n; i++) {
  31     var block = document.createElement("div");
  32     var degrees = (90.0 * i)/n;
  33     block.className = "block";
  34     block.style.WebkitTransform = "translate3d(0px, 0px, " + (i-n+1) + "px) rotateZ(" + degrees + "deg)";
  35     block.style.opacity = 1;
  36     block.style.zIndex = i;
  37     block.style.background = "#00FF00";
  38     block.textContent = i;
  39     blocks.appendChild(block);
  40   }
  41
  42   // Touch offsetTop to trigger a layout.
  43   document.body.offsetTop;
  44
  45   // Signal back to the test runner that we're done allocating memory.
  46   domAutomationController.send("DONE_USE_GPU_MEMORY");
  47 }
  48 </script>
  49 </head>
  50 <body>
  51 <div id="blocks" class="perspective"/>
  52 </body>
  53 </html>