| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta name="viewport" content="width=device-width, user-scalable=no"> |
| 3 <link rel="stylesheet" type="text/css" href="resources/tablet.css"> |
| 4 <link rel="stylesheet" type="text/css" href="resources/transition.css"> |
| 5 <script src="resources/perftesthelper.js"></script> |
| 6 |
| 7 <container id="container"></container> |
| 8 |
| 9 <script> |
| 10 var N = PerfTestHelper.getN(1000); |
| 11 var duration = 1000; |
| 12 var targets = []; |
| 13 var keyframeValues = [0, 1]; |
| 14 |
| 15 for (var i = 0; i < N; i++) { |
| 16 var target = document.createElement('target'); |
| 17 target._keyframe = 1; |
| 18 target.style.opacity = keyframeValues[target._keyframe]; |
| 19 container.appendChild(target); |
| 20 targets.push(target); |
| 21 } |
| 22 |
| 23 function startTransition(target, fastForward) { |
| 24 target._keyframe ^= 1; |
| 25 target.style.opacity = keyframeValues[target._keyframe]; |
| 26 target.style.transitionDelay = -fastForward + 'ms'; |
| 27 } |
| 28 |
| 29 requestAnimationFrame(function(time) { |
| 30 var startTime = time - duration; |
| 31 var step = 0; |
| 32 |
| 33 function staggeredStart(time) { |
| 34 var elapsed = time - startTime; |
| 35 var targetStep = Math.floor(N * elapsed / duration); |
| 36 step = Math.max(targetStep - N, step); |
| 37 for (; step < targetStep; step++) { |
| 38 startTransition(targets[step % N], elapsed - (step / N * duration)); |
| 39 } |
| 40 requestAnimationFrame(staggeredStart); |
| 41 } |
| 42 staggeredStart(time); |
| 43 }); |
| 44 |
| 45 PerfTestHelper.signalReady(); |
| 46 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 399393002:
Add CSS Transitions performance tests (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src