1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77


content / test / data / event-latency-animation.html [blame]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>EventLatency vs. Animation</title>
    <style>
      #raf-box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: blue;
      }

      #main-box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }

      .pulse-width {
        animation: pulse-width 1s infinite;
      }

      @keyframes pulse-width {
        0% {
          width: 100px;
        }
        100% {
          width: 200px;
        }
      }
    </style>
  </head>

  <body>
    <button id="button">Press here with space</button>
    <input id="input" placeholder="Type something here">
    <div>
      <div id="raf-box"></div>
      <div id="main-box"></div>
    </div>
    <script>
      var button = document.getElementById('button');
      var input = document.getElementById('input');
      var rafBox = document.getElementById('raf-box');
      var mainBox = document.getElementById('main-box');

      var rafId = null;
      var rafStart = null;

      var focusButton = function() {
        button.focus();
      };

      var focusInput = function() {
        input.focus();
      };

      var rafAnimate = function(time) {
        if (rafStart === null)
          rafStart = time;
        var w = Math.floor((time - rafStart) / 10) % 100 + 100;
        rafBox.style.width = w + 'px';
        rafId = requestAnimationFrame(rafAnimate);
      };

      var startAnimations = function() {
        if (rafId === null)
          rafId = requestAnimationFrame(rafAnimate);
        if (!mainBox.classList.contains('pulse-width'))
          mainBox.classList.add('pulse-width');
      };
    </script>
  </body>
</html>