tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

036.html (2424B)

      1 <!doctype html>
      2 <html>
      3  <head>
      4    <title>Drag and drop passing over body with all events handled at body</title>
      5    <style type="text/css">
      6 div:first-child {
      7  height: 100px;
      8  width: 100px;
      9  background: orange;
     10  display: inline-block;
     11 }
     12 div:first-child + div {
     13  height: 100px;
     14  width: 100px;
     15  margin-left: 200px;
     16  background: blue;
     17  display: inline-block;
     18 }
     19    </style>
     20    <script type="text/javascript">
     21 window.onload = function () {
     22  var drag = document.getElementsByTagName('div')[0], drop = document.getElementsByTagName('div')[1], sequence = [];
     23  function targ(el) {
     24    if( el == drag ) { return 'drag'; }
     25    else if( el == drop ) { return 'drop'; }
     26    else if( el == document.body ) { return 'body'; }
     27    else { return el; }
     28  }
     29  document.body.ondragstart = function (e) {
     30    e.dataTransfer.setData('text','data');
     31    e.dataTransfer.effectAllowed = 'copy';
     32  };
     33  document.body.ondragenter = function (e) {
     34    e.preventDefault();
     35    sequence[sequence.length] = targ(e.target)+'.ondragenter';
     36  };
     37  document.body.ondragover = function (e) {
     38    e.preventDefault();
     39    var seqname = targ(e.target)+'.ondragover';
     40    if( sequence[sequence.length-1] != seqname ) {
     41      sequence[sequence.length] = seqname;
     42    }
     43  };
     44  document.body.ondrop = function (e) {
     45    e.preventDefault();
     46    sequence[sequence.length] = targ(e.target)+'.ondrop';
     47    sequence[sequence.length] = e.dataTransfer.getData('text');
     48  };
     49  document.body.ondragend = function (e) {
     50    sequence[sequence.length] = targ(e.target)+'.ondragend';
     51    sequence = sequence.join('=&gt;')
     52    var desiredsequence = (['drag.ondragenter','drag.ondragover','body.ondragenter','body.ondragover','drop.ondragenter','drop.ondragover','drop.ondrop','data','drag.ondragend']).join('=&gt;')
     53    if( sequence == desiredsequence ) {
     54      document.getElementsByTagName('div')[2].innerHTML = 'PASS';
     55    } else {
     56      document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence;
     57    }
     58  };
     59 };
     60    </script>
     61  </head>
     62  <body>
     63 
     64    <div draggable="true"></div><div></div>
     65    <div>&nbsp;</div>
     66    <p>Drag the orange square onto the blue square and release it. For the entire duration of the drag, if supported by the platform, the mouse cursor should show as a drop-allowed or drop-copy-allowed cursor.</p>
     67    <noscript><p>Enable JavaScript and reload</p></noscript>
     68 
     69  </body>
     70 </html>