| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2018 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0"> |
| |
| <style> |
| |
| |
| .quad{ |
| float:left; |
| background: blue; |
| margin: 2px; |
| -webkit-transform: translateZ(0) |
| } |
| |
| .quad > p { |
| font-family: 'Georgia', serif; |
| font-size: 6px; |
| font-weight: bold; |
| text-align: center; |
| } |
| |
| .padding_quad{ |
| float:left; |
| margin: 2px; |
| } |
| |
| </style> |
| </head> |
| <script type="text/javascript" src="bench.js"></script> |
| <script type="text/javascript"> |
| |
| var qs = (function(a) { |
| if (a == "") return {}; |
| var b = {}; |
| for (var i = 0; i < a.length; ++i) |
| { |
| var p=a[i].split('=', 2); |
| if (p.length == 1) |
| b[p[0]] = ""; |
| else |
| b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); |
| } |
| return b; |
| })(window.location.search.substr(1).split('&')); |
| |
| function init() { |
| var body = document.getElementById('body'); |
| var layer_size = 20; |
| var layer_count = qs['layer_count']; |
| var visible_layers = qs['visible_layers']; |
| |
| for (var i = 0; i < layer_count; i ++) { |
| if (i == visible_layers) { |
| var div = body.appendChild(document.createElement('div')); |
| div.className = 'padding_quad' |
| div.style.width = '100%'; |
| div.style.height = (window.innerHeight * 2) + 'px'; |
| } |
| |
| var div = body.appendChild(document.createElement('div')); |
| div.id = 'myDiv' + i; |
| div.className = 'quad'; |
| div.style.width = layer_size + 'px' |
| div.style.height= layer_size + 'px' |
| var number = div.appendChild(document.createElement('p')); |
| number.textContent = i + 1; |
| number.style.marginTop = (layer_size/2 - 3) + 'px'; |
| } |
| |
| bench.run(draw); |
| } |
| |
| // call init once the document is fully loaded |
| window.addEventListener('load', init, false); |
| |
| function draw() { |
| document.getElementById("myDiv0").style.opacity = Math.random() * 0.5 + 0.5; |
| }; |
| </script> |
| <body id="body"></body> |
| </html> |
