| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| #backdrop { |
| float: left; |
| width: 512px; |
| height: 512px; |
| isolation: isolate; |
| background-image: linear-gradient(to bottom, |
| rgba(255, 255, 0, 0.9), |
| rgba(255, 0, 0, 0.9), |
| rgba(0, 255, 0, 0.9), |
| rgba(0, 0, 255, 0.9), |
| rgba(0, 0, 0, 0.9)); |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| } |
| |
| #backdrop div { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| border-radius: 2px; |
| transform-style: preserve-3d; |
| } |
| </style> |
| <script src="resources/perf_test_helper.js"></script> |
| <script type="text/javascript"> |
| var N = PerfTestHelper.getN(200); |
| var duration = 2000; |
| function randomColorGenerator() |
| { |
| return '#' + Math.floor(Math.random()*16777215).toString(16); |
| } |
| function makeKeyframes() { |
| var keyframes = []; |
| var numKeyframes = 2; |
| for (var i = 0; i < numKeyframes + 1; i++) { |
| var fraction = i / numKeyframes; |
| var t = (fraction * 0.6) + 0.1; |
| keyframes.push({opacity: t}); |
| } |
| return keyframes; |
| } |
| function startExperiment() |
| { |
| var keyframes = makeKeyframes(); |
| for (var i = 0; i < N; i++) { |
| var elem = document.createElement("div"); |
| elem.style.backgroundColor = randomColorGenerator(); |
| elem.style.transform = "rotateZ(" + ((i + 1) * 10.1).toString() + "deg)"; |
| backdrop.appendChild(elem); |
| elem.animate(keyframes, {duration: duration, iterations: Infinity, |
| direction: 'alternate', delay: -2 * duration * Math.random()}); |
| } |
| PerfTestHelper.signalReady(); |
| } |
| window.addEventListener('load', startExperiment, false); |
| </script> |
| </head> |
| <body> |
| <div id="backdrop"></div> |
| </body> |
| </html> |
