2012-03-02 21:40:54 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test animation shorthand property</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
@-webkit-keyframes circle {
|
|
|
|
|
from { -webkit-transform:rotate(0deg); }
|
|
|
|
|
to { -webkit-transform:rotate(360deg); }
|
|
|
|
|
}
|
|
|
|
|
@-webkit-keyframes inner-circle {
|
|
|
|
|
from { -webkit-transform:rotate(0deg); }
|
|
|
|
|
to { -webkit-transform:rotate(-360deg); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div > div {
|
|
|
|
|
-webkit-animation: 5s linear normal none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
margin: 20px auto 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div > div {
|
|
|
|
|
width:100px;
|
|
|
|
|
height:100px;
|
|
|
|
|
background-color:black;
|
|
|
|
|
font-size:100px;
|
|
|
|
|
line-height:1;
|
|
|
|
|
-webkit-animation-name: inner-circle;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
2012-06-11 17:22:07 +00:00
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.dumpAsText();
|
2012-03-02 21:40:54 +00:00
|
|
|
|
|
|
|
|
const kProperties = [
|
|
|
|
|
"webkitAnimationName",
|
|
|
|
|
"webkitAnimationDuration",
|
|
|
|
|
"webkitAnimationTimingFunction",
|
|
|
|
|
"webkitAnimationDelay",
|
|
|
|
|
"webkitAnimationIterationCount",
|
|
|
|
|
"webkitAnimationDirection",
|
|
|
|
|
"webkitAnimationFillMode"
|
|
|
|
|
];
|
|
|
|
|
const kExpectedResult = { id: 'a', values: [ "inner-circle", "5s", "linear", "0s", "1", "normal", "none" ] };
|
|
|
|
|
|
|
|
|
|
function start()
|
|
|
|
|
{
|
|
|
|
|
var resultsString = " ";
|
|
|
|
|
var el = document.getElementById(kExpectedResult.id);
|
|
|
|
|
var elStyle = window.getComputedStyle(el);
|
|
|
|
|
|
|
|
|
|
for (var i=0; i < kProperties.length; i++) {
|
|
|
|
|
var computedValue = elStyle[kProperties[i]];
|
|
|
|
|
var expectedValue = kExpectedResult.values[i];
|
|
|
|
|
if (computedValue == expectedValue)
|
|
|
|
|
resultsString += "Testing " + kProperties[i] + " on " + kExpectedResult.id + ": PASS" + "<br>";
|
|
|
|
|
else
|
|
|
|
|
resultsString += "Testing " + kProperties[i] + " on " + kExpectedResult.id + " expected <code>" + expectedValue + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var results = document.getElementById('result');
|
|
|
|
|
results.innerHTML = resultsString;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener('load', start, false);
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div><div id="a"></div></div>
|
|
|
|
|
<div id="result"/>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
