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');
37      centerEl.addEventListener('transitionend', function() {
38        console.timeEnd('Interaction.CenterAnimation');
39        var drawerEl = document.querySelector('#drawer');
40        drawerEl.style.webkitTransform = 'translate3D(0, 0, 0)';
41        console.time('Interaction.DrawerAnimation');
42        drawerEl.addEventListener('transitionend', function() {
43          console.timeEnd('Interaction.DrawerAnimation');
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');
65      waitMs(jankMs);
66      console.timeEnd('Interaction.JankThreadJSRun');
67      window.jankScriptDone = true;
68    }
69    function makeSlow() {
70      console.time('Interaction.SlowThreadJsRun');
71      waitMs(slowMs);
72      console.timeEnd('Interaction.SlowThreadJsRun');
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