Home | History | Annotate | Download | only in accessibility 
      1 <!doctype html>
      2 <!--
      3 This tests that location changes are sent when an element animates
      4 using CSS transitions. The test animates the size of a button when
      5 focused, then adds the magic text "Done" to the document when
      6 the transition finishes. The WAIT-FOR directive below instructs
      7 the test framework to keep waiting for accessibility events and
      8 not diff the dump against the expectations until the text "Done"
      9 appears in the dump.
     10 
     11 @MAC-ALLOW:size=(400, 200)
     12 @MAC-ALLOW:size=(600, 300)
     13 @WIN-ALLOW:size=(400, 200)
     14 @WIN-ALLOW:size=(600, 300)
     15 @WAIT-FOR:Done
     16 -->
     17 <html>
     18 <head>
     19 <style>
     20 body {
     21   width: 800px;
     22   height: 600px;
     23   margin: 0;
     24   padding: 0;
     25   border: 0;
     26   overflow: hidden;
     27 }
     28 #growbutton {
     29   width: 400px;
     30   height: 200px;
     31   margin: 0;
     32   padding: 0;
     33 }
     34 #growbutton:focus {
     35   width: 600px;
     36   height: 300px;
     37   transition: all 0.1s ease-in-out;
     38 }
     39 </style>
     40 </head>
     41 <body>
     42 
     43 <button id="growbutton">GrowButton</button>
     44 
     45 <script>
     46   var growButton = document.getElementById('growbutton');
     47   var done = false;
     48   growButton.addEventListener('webkitTransitionEnd', function() {
     49     if (!done) {
     50       document.body.appendChild(document.createTextNode('Done'));
     51       done = true;
     52     }
     53   }, false);
     54   growButton.focus();  
     55 </script>
     56 
     57 </body>
     58 </html>
     59