OLD | NEW |
(Empty) | |
| 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 -webkit-transform-style: preserve-3d; |
| 23 } |
| 24 </style> |
| 25 <script type="text/javascript"> |
| 26 // Generate n 3D CSS elements that are each about 1 MB in size |
| 27 function useGpuMemory(mb_to_use) { |
| 28 n = mb_to_use; |
| 29 var blocks = document.getElementById("blocks"); |
| 30 var blockArray = document.getElementsByClassName("block"); |
| 31 for (var i = 0; i < n; i++) { |
| 32 var block = document.createElement("div"); |
| 33 block.className = "block"; |
| 34 block.style.WebkitTransform = "translate3d(0px, 0px, " + (i-n+1) + "px)"; |
| 35 block.style.opacity = 0.1; |
| 36 block.style.background = "#00FF00"; |
| 37 block.textContent = i; |
| 38 blocks.appendChild(block); |
| 39 } |
| 40 |
| 41 // Touch offsetTop to trigger a layout. |
| 42 document.body.offsetTop; |
| 43 |
| 44 // Signal back to the test runner that we're done allocating memory. |
| 45 domAutomationController.send("DONE_USE_GPU_MEMORY"); |
| 46 } |
| 47 </script> |
| 48 </head> |
| 49 <body> |
| 50 <div id="blocks" class="perspective"/> |
| 51 </body> |
| 52 </html> |
OLD | NEW |