chrome/test/data/webui/menu_button_test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <script>
   5
   6 function testMenuShowAndHideEvents() {
   7   var menu = document.createElement('div');
   8   cr.ui.decorate(menu, cr.ui.Menu);
   9   document.body.appendChild(menu);
  10
  11   var menuButton = document.createElement('div');
  12   cr.ui.decorate(menuButton, cr.ui.MenuButton);
  13   menuButton.menu = menu;
  14   document.body.appendChild(menuButton);
  15
  16   var events = [];
  17   menuButton.addEventListener('menushow', function(e) { events.push(e); });
  18   menuButton.addEventListener('menuhide', function(e) { events.push(e); });
  19
  20   // Click to show menu.
  21   menuButton.dispatchEvent(new MouseEvent('mousedown'));
  22   assertEquals(1, events.length);
  23   assertEquals('menushow', events[0].type);
  24   assertEquals(true, events[0].bubbles);
  25   assertEquals(true, events[0].cancelable);
  26   assertEquals(window, events[0].view);
  27
  28   // Click to hide menu by clicking the button.
  29   menuButton.dispatchEvent(new MouseEvent('mousedown'));
  30   assertEquals(2, events.length);
  31   assertEquals('menuhide', events[1].type);
  32   assertEquals(true, events[1].bubbles);
  33   assertEquals(false, events[1].cancelable);
  34   assertEquals(window, events[1].view);
  35
  36   // Click to show menu and hide by clicking the outside of the button.
  37   menuButton.dispatchEvent(new MouseEvent('mousedown'));
  38   assertEquals(3, events.length);
  39   assertEquals('menushow', events[2].type);
  40   document.dispatchEvent(new MouseEvent('mousedown'));
  41   assertEquals(4, events.length);
  42   assertEquals('menuhide', events[3].type);
  43 }
  44
  45 </script>
  46 </body>
  47 </html>