third_party/WebKit/LayoutTests/transitions/position-background-transition.html

   1 <!DOCTYPE html>
   2 <style>
   3 #target {
   4 position: absolute;
   5 top: 0;
   6 width: 100px;
   7 height: 100px;
   8 background: red;
   9 -webkit-transition-property: top, background;
  10 -webkit-transition-duration: 200ms;
  11 transform: translateZ(0);
  12 }
  13 </style>
  14 <script>
  15 if (window.testRunner) {
  16   testRunner.waitUntilDone();
  17 }
  18 onload = function() {
  19   var target = document.getElementById('target');
  20   target.style.top = '100px';
  21   target.style.background = 'green';
  22 }
  23 if (window.testRunner) {
  24   document.addEventListener('transitionend', function() {
  25     testRunner.notifyDone();
  26   });
  27 }
  28 </script>
  29 <div id="target">This box should transition from red to green.</div>