blob: 5cb41a93a693a34c1e3ce5cbc043295fc852602d [file] [log] [blame]
<html>
<head>
<title>Destroy and Hide Element in Animation End Event</title>
<style type="text/css" media="screen">
.box {
height: 100px;
width: 100px;
margin: 10px;
background-color: blue;
-webkit-animation-duration: 0.2s;
}
@-webkit-keyframes move {
from { -webkit-transform: translate(0px, 0px); }
to { -webkit-transform: translate(100px, 0px); }
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}
var numDone = 0;
function animationEnded()
{
++numDone;
if (numDone == 2) {
if (window.GCController)
GCController.collect();
document.getElementById('results').innerHTML = 'Did not crash, so PASSED';
if (window.layoutTestController)
layoutTestController.notifyDone();
}
}
function startTest()
{
var box1 = document.getElementById('box1');
box1.addEventListener('webkitAnimationEnd', function() {
box1.parentNode.removeChild(box1);
animationEnded();
}, false);
box1.style.webkitAnimationName = 'move';
var box2 = document.getElementById('box2');
box2.addEventListener('webkitAnimationEnd', function() {
box2.style.display = 'none';
animationEnded();
}, false);
box2.style.webkitAnimationName = 'move';
}
window.addEventListener('load', startTest, false);
</script>
</head>
<body>
<p>Tests element removal and hiding within the webkitAnimationEnd event handler. Should not crash.</p>
<div id="container">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
<div id="results"></div>
</body>
</html>