2010-05-11 00:44:58 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test removal of animation shorthand property</title>
|
|
|
|
|
<style type="text/css" media="screen">
|
|
|
|
|
.box {
|
|
|
|
|
height: 10px;
|
|
|
|
|
width: 10px;
|
|
|
|
|
background-color: blue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes anim1 { }
|
|
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
2012-06-11 17:22:07 +00:00
|
|
|
if (window.testRunner) {
|
|
|
|
|
testRunner.dumpAsText();
|
|
|
|
|
testRunner.waitUntilDone();
|
2010-05-11 00:44:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const kProperties = [
|
|
|
|
|
"webkitAnimationName",
|
|
|
|
|
"webkitAnimationDuration",
|
|
|
|
|
"webkitAnimationTimingFunction",
|
|
|
|
|
"webkitAnimationDelay",
|
|
|
|
|
"webkitAnimationIterationCount",
|
|
|
|
|
"webkitAnimationDirection",
|
|
|
|
|
"webkitAnimationFillMode"
|
|
|
|
|
];
|
|
|
|
|
const kElements = [
|
|
|
|
|
{ id: "a",
|
|
|
|
|
values: [ ]
|
|
|
|
|
},
|
|
|
|
|
{ id: "b",
|
|
|
|
|
values: [ "none", "0s", "ease", "0s", "1", "normal", "none" ]
|
|
|
|
|
},
|
|
|
|
|
{ id: "c",
|
|
|
|
|
values: [ "anim1", "10s" ]
|
|
|
|
|
},
|
|
|
|
|
{ id: "d",
|
|
|
|
|
values: [ "anim1", "10s", "linear" ]
|
|
|
|
|
},
|
|
|
|
|
{ id: "e",
|
|
|
|
|
values: [ "anim1", "10s", "linear", "5s" ]
|
|
|
|
|
},
|
|
|
|
|
{ id: "f",
|
|
|
|
|
values: [ "anim1", "10s", "linear", "5s", "3" ]
|
|
|
|
|
},
|
|
|
|
|
{ id: "g",
|
|
|
|
|
values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate" ]
|
|
|
|
|
},
|
|
|
|
|
{ id: "h",
|
|
|
|
|
values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "forwards" ]
|
|
|
|
|
}
|
|
|
|
|
];
|
2013-01-03 20:22:47 +00:00
|
|
|
const kExpectedResults = [ "none", "0s", "ease", "0s", "1", "normal", "none" ];
|
2010-05-11 00:44:58 +00:00
|
|
|
|
|
|
|
|
function start() {
|
|
|
|
|
kElements.forEach(function(curEl) {
|
|
|
|
|
var el = document.getElementById(curEl.id);
|
|
|
|
|
for (var i=0; i < curEl.values.length; i++) {
|
|
|
|
|
el.style[kProperties[i]] = curEl.values[i];
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
setTimeout(remove, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function remove() {
|
|
|
|
|
kElements.forEach(function(curEl) {
|
|
|
|
|
var el = document.getElementById(curEl.id);
|
|
|
|
|
el.style.removeProperty("-webkit-animation");
|
|
|
|
|
});
|
|
|
|
|
setTimeout(test, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test() {
|
|
|
|
|
var resultsString = "";
|
|
|
|
|
kElements.forEach(function(curEl) {
|
|
|
|
|
var el = document.getElementById(curEl.id);
|
|
|
|
|
var elStyle = window.getComputedStyle(el);
|
|
|
|
|
|
|
|
|
|
for (var i=0; i < kProperties.length; i++) {
|
|
|
|
|
var computedValue = elStyle[kProperties[i]];
|
|
|
|
|
var expectedValue = kExpectedResults[i];
|
|
|
|
|
if (computedValue == expectedValue)
|
|
|
|
|
resultsString += "Testing " + kProperties[i] + " on " + curEl.id + ": PASS" + "<br>";
|
|
|
|
|
else
|
|
|
|
|
resultsString += "Testing " + kProperties[i] + " on " + curEl.id + " expected <code>" + expectedValue + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>";
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var results = document.getElementById('result');
|
|
|
|
|
results.innerHTML = resultsString;
|
2012-06-11 17:22:07 +00:00
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.notifyDone();
|
2010-05-11 00:44:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener('load', start, false);
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="a" class="box"></div>
|
|
|
|
|
<div id="b" class="box"></div>
|
|
|
|
|
<div id="c" class="box"></div>
|
|
|
|
|
<div id="d" class="box"></div>
|
|
|
|
|
<div id="e" class="box"></div>
|
|
|
|
|
<div id="f" class="box"></div>
|
|
|
|
|
<div id="g" class="box"></div>
|
|
|
|
|
<div id="h" class="box"></div>
|
|
|
|
|
<div id="result">
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
