<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes slide-right {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(800px);
      }
    }

    body {
      background-color: rgb(255, 255, 255);
    }

    #animated-box {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      background: blue;

      animation: slide-right 15s linear;
    }

    #container {
      position: absolute;
      left: 0;
      top: 300px;
      width: 800px;
      height: 200px;
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div id="animated-box"></div>
  <div id="container"></div>

  <script>
    function CreateSubContainer() {
      var subContainer = document.createElement('div');
      subContainer.className = 'sub-container';
      subContainer.style.width = '50%';
      subContainer.style.height = '50%';
      return subContainer;      
    }
    // Build a complicated scene in order to force a layout that takes a long
    // time.
    var container = document.getElementById('container');
    for (var i = 0; i < 1000; ++i) {
      var subContainer = CreateSubContainer();
      for (var j = 0; j < 20; ++j) {
        var subSubContainer = CreateSubContainer();
        subSubContainer.innerHTML = '-';
        subContainer.appendChild(subSubContainer);
      }
      container.appendChild(subContainer);
    }

    window.setTimeout(function() {
      // Trigger a very long layout...
      var container = document.getElementById('container');
      var animatedBox = document.getElementById('animated-box');
      container.style.width = '600px';
      animatedBox.style.background = 'green';

      window.setTimeout(function() {
        // Followed by a very quick layout.
        var container = document.getElementById('container');
        var animatedBox = document.getElementById('animated-box');
        animatedBox.style.background = 'red';

        // This really shouldn't be necessary, but Cobalt seems to want to
        // re-compute all used sizes on the above tiny style update without
        // this.
        container.style.display = 'none';

        window.setTimeout(function() {
          animatedBox.style.background = 'blue';
        }, 100);
      }, 100);
    }, 3000);
  </script>
</body>