testing/web-platform/tests/html/editing/dnd/events/events-non-draggable-002.html

   1 <!DOCTYPE html>
   2 <meta charset='utf-8'>
   3 <title>drag &amp; drop – events should not fire with non-draggable elements – 002</title>
   4 <style type="text/css">
   5   div {
   6     height: 200px;
   7     width: 200px;
   8     background-color: orange;
   9     position: absolute;
  10     top: 8px;
  11     left: 8px;
  12   }
  13   div + div {
  14     background-color: navy;
  15     left: 250px;
  16   }
  17
  18   div + p {
  19     margin-top: 220px;
  20   }
  21 </style>
  22
  23 <script>
  24 window.onload = function() {
  25
  26   var orange = document.getElementsByTagName('div')[0];
  27   var blue = document.getElementsByTagName('div')[1];
  28   var body = document.body;
  29
  30   var pass = true;
  31
  32   function fail() {
  33     pass = false;
  34   }
  35
  36   body.addEventListener('drag',fail,false);
  37   body.addEventListener('dragend',fail,false);
  38   body.addEventListener('dragenter',fail,false);
  39   body.addEventListener('dragleave',fail,false);
  40   body.addEventListener('dragover',fail,false);
  41   body.addEventListener('dragstart',fail,false);
  42   body.addEventListener('drop',fail,false);
  43
  44   body.ondrag = fail;
  45   body.ondragend = fail;
  46   body.ondragenter = fail;
  47   body.ondragleave = fail;
  48   body.ondragover = fail;
  49   body.ondragstart = fail;
  50   body.ondrop = fail;
  51
  52   orange.addEventListener('drag',fail,false);
  53   orange.addEventListener('dragend',fail,false);
  54   orange.addEventListener('dragenter',fail,false);
  55   orange.addEventListener('dragleave',fail,false);
  56   orange.addEventListener('dragover',fail,false);
  57   orange.addEventListener('dragstart',fail,false);
  58   orange.addEventListener('drop',fail,false);
  59
  60   orange.ondrag = fail;
  61   orange.ondragend = fail;
  62   orange.ondragenter = fail;
  63   orange.ondragleave = fail;
  64   orange.ondragover = fail;
  65   orange.ondragstart = fail;
  66   orange.ondrop = fail;
  67
  68   blue.addEventListener('drag',fail,false);
  69   blue.addEventListener('dragend',fail,false);
  70   blue.addEventListener('dragenter',fail,false);
  71   blue.addEventListener('dragleave',fail,false);
  72   blue.addEventListener('dragover',fail,false);
  73   blue.addEventListener('dragstart',fail,false);
  74   blue.addEventListener('drop',fail,false);
  75
  76   blue.ondrag = fail;
  77   blue.ondragend = fail;
  78   blue.ondragenter = fail;
  79   blue.ondragleave = fail;
  80   blue.ondragover = fail;
  81   blue.ondragstart = fail;
  82   blue.ondrop = fail;
  83
  84   body.onmouseup = function () {
  85     setTimeout(function () {
  86       if (pass == true) {
  87         document.body.innerHTML = 'PASS';
  88       } else {
  89         document.body.innerHTML = 'FAIL';
  90       }
  91     }, 100 );
  92   };
  93
  94 }
  95 </script>
  96
  97 <div></div>
  98 <div></div>
  99
 100 <p>Use your pointing device to drag from the orange box to the blue box. The
 101 word &quot;PASS&quot; should appear.