dom/events/test/test_passive_listeners.html

   1 <html>
   2 <head>
   3   <title>Tests for passive event listeners</title>
   4   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
   5   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6
   7 <body>
   8 <p id="display"></p>
   9 <div id="dummy">
  10 </div>
  11
  12 <script>
  13 var listenerHitCount;
  14 var doPreventDefault;
  15
  16 function listener(e)
  17 {
  18   listenerHitCount++;
  19   if (doPreventDefault) {
  20     // When this function is registered as a passive listener, this
  21     // call should be a no-op and might report a console warning.
  22     e.preventDefault();
  23   }
  24 }
  25
  26 function listener2(e)
  27 {
  28   if (doPreventDefault) {
  29     e.preventDefault();
  30   }
  31 }
  32
  33 var elem = document.getElementById('dummy');
  34
  35 function doTest(description, passiveArg)
  36 {
  37   listenerHitCount = 0;
  38
  39   elem.addEventListener('test', listener, { passive: passiveArg });
  40
  41   // Test with a cancelable event
  42   var e1 = new Event('test', { cancelable: true });
  43   elem.dispatchEvent(e1);
  44   is(listenerHitCount, 1, description + ' | hit count');
  45   var expectedDefaultPrevented = (doPreventDefault && !passiveArg);
  46   is(e1.defaultPrevented, expectedDefaultPrevented, description + ' | default prevented');
  47
  48   // Test with a non-cancelable event
  49   var e2 = new Event('test', { cancelable: false });
  50   elem.dispatchEvent(e2);
  51   is(listenerHitCount, 2, description + ' | hit count after non-cancelable event');
  52   is(e2.defaultPrevented, false, description + ' | default prevented on non-cancelable event');
  53
  54   // Test combining passive-enabled and "traditional" listeners
  55   elem.addEventListener('test', listener2);
  56   var e3 = new Event('test', { cancelable: true });
  57   elem.dispatchEvent(e3);
  58   is(listenerHitCount, 3, description + ' | hit count with second listener');
  59   is(e3.defaultPrevented, doPreventDefault, description + ' | default prevented with second listener');
  60   elem.removeEventListener('test', listener2);
  61
  62   elem.removeEventListener('test', listener);
  63 }
  64
  65 function testAddListenerKey(passiveListenerFirst)
  66 {
  67   listenerHitCount = 0;
  68   doPreventDefault = true;
  69
  70   elem.addEventListener('test', listener, { capture: false, passive: passiveListenerFirst });
  71   // This second listener should not be registered, because the "key" of
  72   // { type, callback, capture } is the same, even though the 'passive' flag
  73   // is different.
  74   elem.addEventListener('test', listener, { capture: false, passive: !passiveListenerFirst });
  75
  76   var e1 = new Event('test', { cancelable: true });
  77   elem.dispatchEvent(e1);
  78
  79   is(listenerHitCount, 1, 'Duplicate addEventListener was correctly ignored');
  80   is(e1.defaultPrevented, !passiveListenerFirst, 'Prevent-default result based on first registered listener');
  81
  82   // Even though passive is the opposite of the first addEventListener call, it
  83   // should remove the listener registered above.
  84   elem.removeEventListener('test', listener, { capture: false, passive: !passiveListenerFirst });
  85
  86   var e2 = new Event('test', { cancelable: true });
  87   elem.dispatchEvent(e2);
  88
  89   is(listenerHitCount, 1, 'non-passive listener was correctly unregistered');
  90   is(e2.defaultPrevented, false, 'no listener was registered to preventDefault this event');
  91 }
  92
  93 function test()
  94 {
  95   doPreventDefault = false;
  96
  97   doTest('base case', undefined);
  98   doTest('non-passive listener', false);
  99   doTest('passive listener', true);
 100
 101   doPreventDefault = true;
 102
 103   doTest('base case', undefined);
 104   doTest('non-passive listener', false);
 105   doTest('passive listener', true);
 106
 107   testAddListenerKey(false);
 108   testAddListenerKey(true);
 109 }
 110
 111 test();
 112
 113 </script>
 114
 115 </body>
 116 </html>
 117
 118