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(n) { | |
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 block.className = "block"; | |
33 block.style.WebkitTransform = "rotateX(-" + i + "deg)"; | |
vangelis
2013/01/03 20:26:14
Does this actually put every one of these elements
ccameron
2013/01/04 21:52:35
Yes. I verify that the page uses about the expecte
| |
34 block.style.zIndex = -i; | |
35 var r = 16 + 240 * (i % 2); | |
36 var g = 16; | |
37 var b = 255 - i; | |
38 block.style.background = "#" + r.toString(16) + g.toString(16) + b.toString( 16); | |
39 block.innerHTML = i; | |
40 blocks.appendChild(block); | |
41 } | |
42 | |
43 // Signal back to the test runner that we're done allocating memory. | |
44 domAutomationController.send(true); | |
45 } | |
46 </script> | |
47 </head> | |
48 <body> | |
49 <div id="blocks" class="perspective"/> | |
50 </body> | |
51 </html> | |
OLD | NEW |