<!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>