| 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 <style> |
| 7 target { |
| 8 opacity: 0; |
| 9 } |
| 10 </style> |
| 11 |
| 12 <container id="container"></container> |
| 13 |
| 14 <script> |
| 15 var N = PerfTestHelper.getN(500); |
| 16 var duration = 1000; |
| 17 var keyframeValues = [0, 1]; |
| 18 var id = 0; |
| 19 |
| 20 for (var i = 0; i < N; i++) { |
| 21 var target = document.createElement('target'); |
| 22 target._keyframe = 0; |
| 23 target.style.transitionDelay = (-i / N * duration) + 'ms'; |
| 24 container.appendChild(target); |
| 25 target.addEventListener('transitionend', restartTransition); |
| 26 } |
| 27 |
| 28 function restartTransition(event) { |
| 29 event.target._keyframe ^= 1; |
| 30 addNewIDStyle(event.target); |
| 31 event.target.style.removeProperty('transition-delay'); |
| 32 } |
| 33 |
| 34 function addNewIDStyle(target) { |
| 35 id++; |
| 36 if (target._currentIDStyle) { |
| 37 target._currentIDStyle.remove(); |
| 38 } |
| 39 var style = document.createElement('style'); |
| 40 style.textContent = '#id' + id + ' { opacity: ' + keyframeValues[target._keyfr
ame] + ';}'; |
| 41 container.appendChild(style); |
| 42 target.id = 'id' + id; |
| 43 target._currentIDStyle = style; |
| 44 } |
| 45 |
| 46 requestAnimationFrame(function() { |
| 47 var styleRule = document.styleSheets[2].rules[0].style; |
| 48 styleRule.opacity = keyframeValues[1]; |
| 49 requestAnimationFrame(function() { |
| 50 styleRule.opacity = keyframeValues[0]; |
| 51 }); |
| 52 }); |
| 53 |
| 54 PerfTestHelper.signalReady(); |
| 55 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 399393002:
Add CSS Transitions performance tests (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src