Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
113 lines (103 sloc) 3.08 KB
<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">
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
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" ]
}
];
const kExpectedResults = [ "none", "0s", "ease", "0s", "1", "normal", "none" ];
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;
if (window.testRunner)
testRunner.notifyDone();
}
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>
Jump to Line
Something went wrong with that request. Please try again.