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 26function 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> 54