fast/css/transform-inline-style-remove.html

<html>
<head>
  <title>Removing inline style for transition, animation and transform origin</title>
  <style type="text/css" media="screen">
    #box {
      height: 100px;
      width: 100px;
      background-color: blue;
    }

    @-webkit-keyframes test {
      from { background-color: blue; }
      to { background-color: gray; }
    }

  </style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner)
      testRunner.dumpAsText();

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

      console.innerHTML += 'transition (before): ' + box.style.webkitTransition + '<br>';
      console.innerHTML += 'transition property (before): ' + box.style.webkitTransitionProperty + '<br>';
      console.innerHTML += 'transition duration (before): ' + box.style.webkitTransitionDuration + '<br>';
      console.innerHTML += 'transition timing function (before): ' + box.style.webkitTransitionTimingFunction + '<br>';
      box.style.webkitTransition = "";
      console.innerHTML += 'transition (after): ' + box.style.webkitTransition + '<br>';
      console.innerHTML += 'transition property (after): ' + box.style.webkitTransitionProperty + '<br>';
      console.innerHTML += 'transition duration (after): ' + box.style.webkitTransitionDuration + '<br>';
      console.innerHTML += 'transition timing function (after): ' + box.style.webkitTransitionTimingFunction + '<br>';
      console.innerHTML += "<br>";

      console.innerHTML += 'transform origin (before): ' + box.style.webkitTransformOrigin + '<br>';
      console.innerHTML += 'transform origin X (before): ' + box.style.webkitTransformOriginX + '<br>';
      console.innerHTML += 'transform origin Y (before): ' + box.style.webkitTransformOriginY + '<br>';
      box.style.webkitTransformOrigin = "";
      console.innerHTML += 'transform origin (after): ' + box.style.webkitTransformOrigin + '<br>';
      console.innerHTML += 'transform origin X (after): ' + box.style.webkitTransformOriginX + '<br>';
      console.innerHTML += 'transform origin Y (after): ' + box.style.webkitTransformOriginY + '<br>';
      console.innerHTML += "<br>";

      console.innerHTML += 'animation (before): ' + box.style.webkitAnimation + '<br>';
      console.innerHTML += 'animation name (before): ' + box.style.webkitAnimationName + '<br>';
      console.innerHTML += 'animation duration (before): ' + box.style.webkitAnimationDuration + '<br>';
      console.innerHTML += 'animation timing function (before): ' + box.style.webkitAnimationTimingFunction + '<br>';
      console.innerHTML += 'animation direction (before): ' + box.style.webkitAnimationDirection + '<br>';
      console.innerHTML += 'animation iteration count (before): ' + box.style.webkitAnimationIterationCount + '<br>';
      box.style.webkitAnimation = "";
      console.innerHTML += 'animation (after): ' + box.style.webkitAnimation + '<br>';
      console.innerHTML += 'animation name (after): ' + box.style.webkitAnimationName + '<br>';
      console.innerHTML += 'animation duration (after): ' + box.style.webkitAnimationDuration + '<br>';
      console.innerHTML += 'animation timing function (after): ' + box.style.webkitAnimationTimingFunction + '<br>';
      console.innerHTML += 'animation direction (after): ' + box.style.webkitAnimationDirection + '<br>';
      console.innerHTML += 'animation iteration count (after): ' + box.style.webkitAnimationIterationCount + '<br>';
      console.innerHTML += "<br>";
    }
  </script>
</head>
<body onload="doTest()">
  <p>Tests Removing inline style for transition, animation and transform origin<br>
    <a href="https://bugs.webkit.org/show_bug.cgi?id=22605">https://bugs.webkit.org/show_bug.cgi?id=22605</a>
  </p>
  <p>All "after" results should be null/empty</p>
    <div id="box" style="border: 1px black;
                         -webkit-transition: all 1s ease, none 2s ease-in, left 3s cubic-bezier(0.2, 0.3, 0.6, 0.8) 2s;
                         -webkit-transform-origin: left 30%;
                         -webkit-animation: test 5s ease-in-out alternate infinite;">
    </div>
    <div id="console"></div>
</body>
</html>