content/test/data/accessibility/html/transition.html

   1 <!--
   2 This tests that location changes are sent when an element animates
   3 using CSS transitions. The test animates the size of a button when
   4 focused, then adds the magic text "Done" to the document when
   5 the transition finishes. The WAIT-FOR directive below instructs
   6 the test framework to keep waiting for accessibility events and
   7 not diff the dump against the expectations until the text "Done"
   8 appears in the dump.
   9
  10 @MAC-ALLOW:size=(400, 200)
  11 @MAC-ALLOW:size=(600, 300)
  12 @WIN-ALLOW:size=(400, 200)
  13 @WIN-ALLOW:size=(600, 300)
  14 @WAIT-FOR:Done
  15 -->
  16 <!DOCTYPE html>
  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>