tools/telemetry/unittest_data/interaction_enabled_page.html

   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>