<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, 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>
Codebase Browser
chromium