| <!doctype html> |
| <html> |
| <head> |
| <meta name="viewport" content="user-scalable:no"> |
| <style type="text/css"> |
| body { height: 1500px; } |
| #center { |
| position: fixed; |
| left: 40%;; |
| width: 50%; |
| height: 250px; |
| top: 25%; |
| background-color: grey; |
| -webkit-transform: scale(0.25, 0.25); |
| -webkit-transition: -webkit-transform 1s; |
| } |
| |
| #drawer { |
| position: fixed; |
| top: 0; |
| left: 0; |
| height: 100%; |
| width: 120px; |
| background-color: red; |
| -webkit-transform: translate3d(-1000px, 0, 0); |
| -webkit-transition: -webkit-transform 1s; |
| } |
| |
| </style> |
| <script> |
| 'use strict'; |
| window.animationDone = false; |
| function makeAnimation() { |
| var centerEl = document.querySelector('#center'); |
| centerEl.style.webkitTransform = 'scale(1.0, 1.0)'; |
| console.time('Interaction.CenterAnimation'); |
| centerEl.addEventListener('transitionend', function() { |
| console.timeEnd('Interaction.CenterAnimation'); |
| var drawerEl = document.querySelector('#drawer'); |
| drawerEl.style.webkitTransform = 'translate3D(0, 0, 0)'; |
| console.time('Interaction.DrawerAnimation'); |
| drawerEl.addEventListener('transitionend', function() { |
| console.timeEnd('Interaction.DrawerAnimation'); |
| window.animationDone = true; |
| }); |
| }); |
| } |
| </script> |
| |
| <script> |
| 'use strict'; |
| var jankMs = 100; |
| var slowMs = 200; |
| window.jankScriptDone = false; |
| window.slowScriptDone = false; |
| function waitMs(ms) { |
| var startTime = window.performance.now(); |
| var currTime = startTime; |
| while (currTime - startTime < ms) { |
| var currTime = window.performance.now(); |
| } |
| } |
| function makeJank() { |
| console.time('Interaction.JankThreadJSRun'); |
| waitMs(jankMs); |
| console.timeEnd('Interaction.JankThreadJSRun'); |
| window.jankScriptDone = true; |
| } |
| function makeSlow() { |
| console.time('Interaction.SlowThreadJsRun'); |
| waitMs(slowMs); |
| console.timeEnd('Interaction.SlowThreadJsRun'); |
| window.slowScriptDone = true; |
| } |
| </script> |
| |
| </head> |
| <body> |
| <div id="center"> |
| This is something in the middle. |
| </div> |
| <div id="drawer"> |
| This is a drawer. |
| </div> |
| <button type="button" id="animating-button" onclick="makeAnimation()"> |
| Click or tap this to trigger an animation. |
| </div> |
| <button type="button" id="jank-button" onclick="makeJank()"> |
| Click or tap this to make jank of 100ms (approximately). |
| </div> |
| <button type="button" id="slow-button" onclick="makeSlow()"> |
| Click or tap this to make wait 200ms (approximately). |
| </div> |
| |
| </body> |
| </html> |
