Lollipop  |  5.0.1_r1
Html程序  |  54行  |  1.31 KB 

<!DOCTYPE HTML>
<html>
<head>
<title>GPU Memory Test: Use N MB of GPU Memory with 3D CSS</title>
<style>
.block {
  background: #FF0000;
  font-size: 150px;
  height: 512px;
  position: absolute;
  width: 512px;
  
}
.perspective
{
  border: 1px solid black;
  height: 512px;
  text-align: center;
  width:  512px;
  -webkit-perspective: 600px;
  -webkit-perspective-origin: center center;
}
</style>
<script type="text/javascript">
// Generate n 3D CSS elements that are each about 1 MB in size 
function useGpuMemory(mb_to_use) {
  n = mb_to_use;
  var blocks = document.getElementById("blocks");
  var blockArray = document.getElementsByClassName("block");
  for (var i = 0; i < n; i++) {
    var block = document.createElement("div");
    var degrees = (90.0 * i)/n;
    block.className = "block";
    block.style.WebkitTransform = "translate3d(0px, 0px, " + (i-n+1) + "px) rotateZ(" + degrees + "deg)";
    block.style.opacity = 1;
    block.style.zIndex = i;
    block.style.background = "#00FF00";
    block.textContent = i;
    blocks.appendChild(block);
  }

  // Touch offsetTop to trigger a layout.
  document.body.offsetTop;

  // Signal back to the test runner that we're done allocating memory.
  domAutomationController.send("DONE_USE_GPU_MEMORY");
}
</script>
</head>
<body>
<div id="blocks" class="perspective"/>
</body>
</html>