1 <!doctype html> 2 <html> 3 <head> 4 <meta name="viewport" content="user-scalable:no"> 5 <style type="text/css"> 6 body { height: 1500px; } 7 #center { 8 position: fixed; 9 left: 40%;; 10 width: 50%; 11 height: 250px; 12 top: 25%; 13 background-color: grey; 14 -webkit-transform: scale(0.25, 0.25); 15 -webkit-transition: -webkit-transform 1s; 16 } 17 18 #drawer { 19 position: fixed; 20 top: 0; 21 left: 0; 22 height: 100%; 23 width: 120px; 24 background-color: red; 25 -webkit-transform: translate3d(-1000px, 0, 0); 26 -webkit-transition: -webkit-transform 1s; 27 } 28 29 </style> 30 <script> 31 'use strict'; 32 window.animationDone = false; 33 function makeAnimation() { 34 var centerEl = document.querySelector('#center'); 35 centerEl.style.webkitTransform = 'scale(1.0, 1.0)'; 36 console.time('Interaction.CenterAnimation/is_smooth'); 37 centerEl.addEventListener('transitionend', function() { 38 console.timeEnd('Interaction.CenterAnimation/is_smooth'); 39 var drawerEl = document.querySelector('#drawer'); 40 drawerEl.style.webkitTransform = 'translate3D(0, 0, 0)'; 41 console.time('Interaction.DrawerAnimation/is_smooth'); 42 drawerEl.addEventListener('transitionend', function() { 43 console.timeEnd('Interaction.DrawerAnimation/is_smooth'); 44 window.animationDone = true; 45 }); 46 }); 47 } 48 </script> 49 50 <script> 51 'use strict'; 52 var jankMs = 100; 53 var slowMs = 200; 54 window.jankScriptDone = false; 55 window.slowScriptDone = false; 56 function waitMs(ms) { 57 var startTime = window.performance.now(); 58 var currTime = startTime; 59 while (currTime - startTime < ms) { 60 var currTime = window.performance.now(); 61 } 62 } 63 function makeJank() { 64 console.time('Interaction.JankThreadJSRun/is_responsive'); 65 waitMs(jankMs); 66 console.timeEnd('Interaction.JankThreadJSRun/is_responsive'); 67 window.jankScriptDone = true; 68 } 69 function makeSlow() { 70 console.time('Interaction.SlowThreadJsRun/is_fast'); 71 waitMs(slowMs); 72 console.timeEnd('Interaction.SlowThreadJsRun/is_fast'); 73 window.slowScriptDone = true; 74 } 75 </script> 76 77 </head> 78 <body> 79 <div id="center"> 80 This is something in the middle. 81 </div> 82 <div id="drawer"> 83 This is a drawer. 84 </div> 85 <button type="button" id="animating-button" onclick="makeAnimation()"> 86 Click or tap this to trigger an animation. 87 </div> 88 <button type="button" id="jank-button" onclick="makeJank()"> 89 Click or tap this to make jank of 100ms (approximately). 90 </div> 91 <button type="button" id="slow-button" onclick="makeSlow()"> 92 Click or tap this to make wait 200ms (approximately). 93 </div> 94 95 </body> 96 </html> 97
