content/test/data/accessibility/transition.html

   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>