<!doctype html>
<!--
This tests that location changes are sent when an element animates
using CSS transitions. The test animates the size of a button when
focused, then adds the magic text "Done" to the document when
the transition finishes. The WAIT-FOR directive below instructs
the test framework to keep waiting for accessibility events and
not diff the dump against the expectations until the text "Done"
appears in the dump.
@MAC-ALLOW:size=(400, 200)
@MAC-ALLOW:size=(600, 300)
@WIN-ALLOW:size=(400, 200)
@WIN-ALLOW:size=(600, 300)
@WAIT-FOR:Done
-->
<html>
<head>
<style>
body {
width: 800px;
height: 600px;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#growbutton {
width: 400px;
height: 200px;
margin: 0;
padding: 0;
}
#growbutton:focus {
width: 600px;
height: 300px;
transition: all 0.1s ease-in-out;
}
</style>
</head>
<body>
<button id="growbutton">GrowButton</button>
<script>
var growButton = document.getElementById('growbutton');
var done = false;
growButton.addEventListener('webkitTransitionEnd', function() {
if (!done) {
document.body.appendChild(document.createTextNode('Done'));
done = true;
}
}, false);
growButton.focus();
</script>
</body>
</html>