017.html (5240B)
1 <!DOCTYPE html> 2 <title>drag & drop - microdata with nested parent itemref loop</title> 3 <style> 4 body > div { 5 height: 200px; 6 width: 200px; 7 background-color: orange; 8 position: absolute; 9 top: 8px; 10 left: 8px; 11 } 12 body > div *, span { 13 display: none; 14 } 15 body > div + div { 16 background-color: navy; 17 left: 250px; 18 } 19 body > div + div + div { 20 background-color: fuchsia; 21 left: 500px; 22 } 23 p:first-of-type { 24 margin-top: 220px; 25 } 26 </style> 27 28 <script> 29 30 function makeEl(eltype,props,contents) { 31 var elem = document.createElement(eltype); 32 for( var i in props ) { 33 if( props.hasOwnProperty(i) ) { 34 elem.setAttribute(i,props[i]); 35 } 36 } 37 if( contents ) { 38 elem.innerHTML = contents; 39 } 40 return elem; 41 } 42 43 var orange, fails = [], doneonce = false; 44 window.onload = function() { 45 orange = document.getElementsByTagName('div')[0]; 46 47 orange.ondragstart = function(e) { 48 e.dataTransfer.effectAllowed = 'copy'; 49 e.dataTransfer.setData('Text', 'dummy text'); 50 var err; 51 if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { 52 fails[fails.length] = e.type + ' ' + err; 53 } 54 }; 55 orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = 56 orange.ondrag = orange.ondragend = function(e) { 57 if( e.type == 'dragover' || e.type == 'dragenter' ) { 58 e.preventDefault(); 59 e.dataTransfer.dropEffect = 'copy'; 60 } 61 if( e.dataTransfer.getData('application/microdata+json') ) { 62 fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; 63 } 64 }; 65 orange.nextSibling.ondrop = function(e) { 66 var err; 67 if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { 68 fails[fails.length] = e.type + ' ' + err; 69 } 70 if( e.type != 'drop' ) { return; } 71 if( doneonce ) { return; } 72 doneonce = true; 73 setTimeout(function () { 74 document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; 75 fails = []; 76 }, 200 ); 77 }; 78 79 }; 80 function checkprops(md) { 81 // http://dev.w3.org/html5/md/#extracting-json 82 //"If value is an item, then: If value is in memory, then let value be the string "ERROR"." 83 /* 84 Loop detection happens only after the loop has been created, at which point it returns a property value 85 of "ERROR" instead of the value which has already been encountered on the stringifying stack. 86 Should create the following construct: 87 { 88 items:[ 89 { 90 properties:{ 91 foo:[ 92 { 93 properties:{ 94 bar:[ 95 { 96 properties:{ 97 foo:[ 98 "ERROR" 99 ] 100 } 101 } 102 ] 103 } 104 } 105 ] 106 } 107 } 108 ] 109 } 110 */ 111 112 var i; 113 if( !md ) { return 'no microdata'; } 114 md = JSON.parse(md); 115 if( !md.items ) { return 'no items'; } 116 if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } 117 if( !md.items[0].properties ) { return 'no items[0].properties'; } 118 if( !md.items[0].properties.foo ) { return 'no items[0].properties.foo'; } 119 if( md.items[0].properties.foo.length != 1 ) { return 'items[0].properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } 120 if( !md.items[0].properties.foo[0].properties ) { return 'items[1].properties.foo[0].properties <i>'+md.items[0].properties.foo[0].properties+'</i> instead of object'; } 121 if( !md.items[0].properties.foo[0].properties.bar ) { return 'items[1].properties.foo[0].properties.bar <i>'+md.items[0].properties.foo[0].properties.bar+'</i> instead of array'; } 122 if( md.items[0].properties.foo[0].properties.bar.length != 1 ) { return 'items[1].properties.foo[0].properties.bar.length <i>'+md.items[0].properties.foo[0].properties.bar.length+'</i> instead of 1'; } 123 if( !md.items[0].properties.foo[0].properties.bar[0].properties ) { return 'items[1].properties.foo[0].properties.bar[0].properties <i>'+md.properties.foo[0].properties.bar[0].properties+'</i> instead of object'; } 124 if( !md.items[0].properties.foo[0].properties.bar[0].properties.foo ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo+'</i> instead of array'; } 125 if( md.items[0].properties.foo[0].properties.bar[0].properties.foo.length != 1 ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo.length <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo.length+'</i> instead of 1'; } 126 if( md.items[0].properties.foo[0].properties.bar[0].properties.foo[0] != 'ERROR' ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo.length <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo[0]+'</i> instead of <i>ERROR</a>'; } 127 return ''; 128 } 129 130 </script> 131 132 <div draggable='true' itemscope> 133 <span id='id1' itemprop='foo' itemscope><span itemscope itemprop='bar' itemref='id1'></span></span> 134 </div><div></div><div></div> 135 136 <p>Use your pointing device to drag the orange box to the pink box, then back to the blue box, and release it.</p> 137 <noscript><p>Enable JavaScript and reload</p></noscript>