016.html (7304B)
1 <!DOCTYPE html> 2 <title>drag & drop - microdata with nested sibling 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 bar:[ 107 { 108 properties:{ 109 foo:[ 110 { 111 properties:{ 112 bar:[ 113 "ERROR" 114 ] 115 } 116 } 117 ] 118 } 119 } 120 ] 121 } 122 } 123 ] 124 } 125 */ 126 127 var i; 128 if( !md ) { return 'no microdata'; } 129 md = JSON.parse(md); 130 if( !md.items ) { return 'no items'; } 131 if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } 132 if( !md.items[0].properties ) { return 'no items[0].properties'; } 133 if( !md.items[0].properties.foo ) { return 'no items[0].properties.foo'; } 134 if( md.items[0].properties.foo.length != 1 ) { return 'items[0].properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } 135 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'; } 136 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'; } 137 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'; } 138 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'; } 139 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'; } 140 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'; } 141 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>'; } 142 143 if( !md.items[0].properties.bar ) { return 'no items[0].properties.bar'; } 144 if( md.items[0].properties.bar.length != 1 ) { return 'items[0].properties.bar length '+md.items[0].properties.bar.length+' instead of 1'; } 145 if( !md.items[0].properties.bar[0].properties ) { return 'items[1].properties.bar[0].properties <i>'+md.items[0].properties.bar[0].properties+'</i> instead of object'; } 146 if( !md.items[0].properties.bar[0].properties.foo ) { return 'items[1].properties.bar[0].properties.foo <i>'+md.items[0].properties.bar[0].properties.foo+'</i> instead of array'; } 147 if( md.items[0].properties.bar[0].properties.foo.length != 1 ) { return 'items[1].properties.bar[0].properties.foo.length <i>'+md.items[0].properties.bar[0].properties.foo.length+'</i> instead of 1'; } 148 if( !md.items[0].properties.bar[0].properties.foo[0].properties ) { return 'items[1].properties.bar[0].properties.foo[0].properties <i>'+md.properties.bar[0].properties.foo[0].properties+'</i> instead of object'; } 149 if( !md.items[0].properties.bar[0].properties.foo[0].properties.bar ) { return 'items[1].properties.bar[0].properties.foo[0].properties.bar <i>'+md.items[0].properties.bar[0].properties.foo[0].properties.bar+'</i> instead of array'; } 150 if( md.items[0].properties.bar[0].properties.foo[0].properties.bar.length != 1 ) { return 'items[1].properties.bar[0].properties.foo[0].properties.bar.length <i>'+md.items[0].properties.bar[0].properties.foo[0].properties.bar.length+'</i> instead of 1'; } 151 if( md.items[0].properties.bar[0].properties.foo[0].properties.bar[0] != 'ERROR' ) { return 'items[1].properties.bar[0].properties.foo[0].properties.bar.length <i>'+md.items[0].properties.bar[0].properties.foo[0].properties.bar[0]+'</i> instead of <i>ERROR</a>'; } 152 return ''; 153 } 154 155 </script> 156 157 <div draggable='true' itemscope><div itemscope itemprop='foo' id='id1' itemref='id2'></div><div itemscope itemprop='bar' id='id2' itemref='id1'></div></div><div></div><div></div> 158 159 <p>Use your pointing device to drag the orange box to the pink box, then back to the blue box, and release it.</p> 160 <noscript><p>Enable JavaScript and reload</p></noscript>