tor-browser

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

019.html (3203B)

      1 <!DOCTYPE html>
      2 <title>drag &amp; drop - microdata for selection partially intersecting nested items</title>
      3 <style>
      4  body > div {
      5    height: 100px;
      6    width: 200px;
      7    background-color: fuchsia;
      8    position: absolute;
      9    top: 8px;
     10    left: 8px;
     11  }
     12  body > div + div {
     13    background-color: navy;
     14    top: 116px;
     15  }
     16  body > div + div + div {
     17    background-color: orange;
     18    top: 224px;
     19  }
     20  p:first-of-type {
     21    margin-top: 350px;
     22  }
     23 </style>
     24 
     25 <script>
     26 
     27 function makeEl(eltype,props,contents) {
     28  var elem = document.createElement(eltype);
     29  for( var i in props ) {
     30    if( props.hasOwnProperty(i) ) {
     31      elem.setAttribute(i,props[i]);
     32    }
     33  }
     34  if( contents ) {
     35    elem.innerHTML = contents;
     36  }
     37  return elem;
     38 }
     39 
     40 var orange, fails = [], doneonce = false;
     41 window.onload = function() {
     42  orange = document.getElementsByTagName('div')[2];
     43  orange.ondragstart = function(e) {
     44    e.dataTransfer.effectAllowed = 'copy';
     45    e.dataTransfer.setData('Text', 'dummy text');
     46    var err;
     47    if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) {
     48      fails[fails.length] = e.type + ' ' + err;
     49    }
     50  };
     51  orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover =
     52  orange.ondrag = orange.ondragend = function(e) {
     53    if( e.type == 'dragover' || e.type == 'dragenter' ) {
     54      e.preventDefault();
     55      e.dataTransfer.dropEffect = 'copy';
     56    }
     57    if( e.dataTransfer.getData('application/microdata+json') ) {
     58      fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)';
     59    }
     60  };
     61  orange.previousSibling.ondrop = function(e) {
     62    var err;
     63    if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) {
     64      fails[fails.length] = e.type + ' ' + err;
     65    }
     66    if( e.type != 'drop' ) { return; }
     67    if( doneonce ) { return; }
     68    doneonce = true;
     69    setTimeout(function () {
     70      document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS';
     71      fails = [];
     72    }, 200 );
     73  };
     74 
     75 };
     76 function checkprops(md) {
     77  // http://dev.w3.org/html5/spec/dnd.html#list-of-dragged-nodes
     78  //"If it is a selection that is being dragged, then the list of dragged nodes contains, in tree order, every node that is partially or completely included in the selection (including all their ancestors)."
     79  //this test checks that all ancestors of the text node are included
     80  var i;
     81  if( !md ) { return 'no microdata'; }
     82  md = JSON.parse(md);
     83  if( !md.items ) { return 'no items'; }
     84  if( md.items.length != 2 ) { return md.items.length+' items instead of 2'; }
     85  if( md.items[0].id != 'http://example.com/item1' ) { return 'items[0].id incorrect'; }
     86  if( md.items[1].id != 'http://example.com/item2' ) { return 'items[1].id incorrect'; }
     87  return '';
     88 }
     89 
     90 </script>
     91 
     92 <div></div><div></div><div itemscope itemid="http://example.com/item1">a<span itemscope itemid="http://example.com/item2">bcd</span>e</div>
     93 
     94 <p>Use your pointing device to select the text substring "d" above, drag the selection upwards to the pink box,
     95 then back to the blue box, and release it.</p>
     96 <noscript><p>Enable JavaScript and reload</p></noscript>