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

   1 <html>
   2 <head>
   3   <title>Removing inline style for transition, animation and transform origin</title>
   4   <style type="text/css" media="screen">
   5     #box {
   6       height: 100px;
   7       width: 100px;
   8       background-color: blue;
   9     }
  10
  11     @-webkit-keyframes test {
  12       from { background-color: blue; }
  13       to { background-color: gray; }
  14     }
  15
  16   </style>
  17   <script type="text/javascript" charset="utf-8">
  18     if (window.layoutTestController)
  19       layoutTestController.dumpAsText();
  20
  21     function doTest()
  22     {
  23       var console = document.getElementById('console');
  24       var box = document.getElementById('box');
  25
  26       console.innerHTML += 'transition (before): ' + box.style.webkitTransition + '<br>';
  27       console.innerHTML += 'transition property (before): ' + box.style.webkitTransitionProperty + '<br>';
  28       console.innerHTML += 'transition duration (before): ' + box.style.webkitTransitionDuration + '<br>';
  29       console.innerHTML += 'transition timing function (before): ' + box.style.webkitTransitionTimingFunction + '<br>';
  30       box.style.webkitTransition = "";
  31       console.innerHTML += 'transition (after): ' + box.style.webkitTransition + '<br>';
  32       console.innerHTML += 'transition property (after): ' + box.style.webkitTransitionProperty + '<br>';
  33       console.innerHTML += 'transition duration (after): ' + box.style.webkitTransitionDuration + '<br>';
  34       console.innerHTML += 'transition timing function (after): ' + box.style.webkitTransitionTimingFunction + '<br>';
  35       console.innerHTML += "<br>";
  36
  37       console.innerHTML += 'transform origin (before): ' + box.style.webkitTransformOrigin + '<br>';
  38       console.innerHTML += 'transform origin X (before): ' + box.style.webkitTransformOriginX + '<br>';
  39       console.innerHTML += 'transform origin Y (before): ' + box.style.webkitTransformOriginY + '<br>';
  40       box.style.webkitTransformOrigin = "";
  41       console.innerHTML += 'transform origin (after): ' + box.style.webkitTransformOrigin + '<br>';
  42       console.innerHTML += 'transform origin X (after): ' + box.style.webkitTransformOriginX + '<br>';
  43       console.innerHTML += 'transform origin Y (after): ' + box.style.webkitTransformOriginY + '<br>';
  44       console.innerHTML += "<br>";
  45
  46       console.innerHTML += 'animation (before): ' + box.style.webkitAnimation + '<br>';
  47       console.innerHTML += 'animation name (before): ' + box.style.webkitAnimationName + '<br>';
  48       console.innerHTML += 'animation duration (before): ' + box.style.webkitAnimationDuration + '<br>';
  49       console.innerHTML += 'animation timing function (before): ' + box.style.webkitAnimationTimingFunction + '<br>';
  50       console.innerHTML += 'animation direction (before): ' + box.style.webkitAnimationDirection + '<br>';
  51       console.innerHTML += 'animation iteration count (before): ' + box.style.webkitAnimationIterationCount + '<br>';
  52       box.style.webkitAnimation = "";
  53       console.innerHTML += 'animation (after): ' + box.style.webkitAnimation + '<br>';
  54       console.innerHTML += 'animation name (after): ' + box.style.webkitAnimationName + '<br>';
  55       console.innerHTML += 'animation duration (after): ' + box.style.webkitAnimationDuration + '<br>';
  56       console.innerHTML += 'animation timing function (after): ' + box.style.webkitAnimationTimingFunction + '<br>';
  57       console.innerHTML += 'animation direction (after): ' + box.style.webkitAnimationDirection + '<br>';
  58       console.innerHTML += 'animation iteration count (after): ' + box.style.webkitAnimationIterationCount + '<br>';
  59       console.innerHTML += "<br>";
  60     }
  61   </script>
  62 </head>
  63 <body onload="doTest()">
  64   <p>Tests Removing inline style for transition, animation and transform origin<br>
  65     <a href="https://bugs.webkit.org/show_bug.cgi?id=22605">https://bugs.webkit.org/show_bug.cgi?id=22605</a>
  66   </p>
  67   <p>All "after" results should be null/empty</p>
  68     <div id="box" style="border: 1px black;
  69                          -webkit-transition: all 1s ease, none 2s ease-in, left 3s cubic-bezier(0.2, 0.3, 0.6, 0.8) 2s;
  70                          -webkit-transform-origin: left 30%;
  71                          -webkit-animation: test 5s ease-in-out alternate infinite;">
  72     </div>
  73     <div id="console"></div>
  74 </body>
  75 </html>