<!DOCTYPE html>

<html>
<head>
  <style>
    #container {
      position: relative;
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
    #box {
      position: absolute;
      left: 0px;
      height: 100px;
      width: 100px;
      background-color: blue;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: linear;
    }
  </style>
  <script>
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }

    var id;

    function startTransition()
    {
      var box = document.getElementById('box');

      box.style.left = '300px';
      box.offsetTop; // force transition start

      box.style.left = '0px'
      box.offsetTop; // force transition interruption

      // Force at least one timing update and recalc after the interruption.
      id = requestAnimationFrame(function() {
        cancelAnimationFrame(id);
        var current = document.getAnimations().length;
        document.getElementById('result').innerHTML = (current == 0) ? "PASS" : "FAIL";
        if (window.testRunner)
            testRunner.notifyDone();
      });
    }
    window.addEventListener('load', startTransition, false)
  </script>
</head>
<body>

<p>Box should stay left as style is reset immediately</p>
<div id="container">
  <div id="box">
  </div>
</div>
<div id="result">
</div>
</body>
</html>