1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
content / test / data / accessibility / html / transition.html [blame]
<!--
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:AXSize={h: 300, w: 600}
@WIN-ALLOW:size=(400, 200)
@WIN-ALLOW:size=(600, 300)
@WAIT-FOR:Done
-->
<!DOCTYPE html>
<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>