| <!-- |
| 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 |
| --> |
| <!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> |
