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 49 50 51 52 53