172.html (1490B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Selection dragging should drag minimal HTML context</title> 5 <style type="text/css"> 6 p + div { 7 background: orange; 8 width: 4em; 9 } 10 div + div { 11 border: 1px solid black; 12 min-height: 5em; 13 } 14 </style> 15 <script type="text/javascript"> 16 window.onload = function () { 17 var output = document.getElementsByTagName('div')[1]; 18 output.ondragenter = output.ondragover = function (e) { e.preventDefault(); }; 19 output.ondrop = function (e) { 20 e.preventDefault(); 21 var drophtml = e.dataTransfer.getData('text/html').toUpperCase().replace(/\sSTYLE="[^"]*"/g,'').replace(/[\r\n]+/g,'\\n'); 22 var droptext = e.dataTransfer.getData('text/plain').replace(/[\r\n]+/g,'\\n'); 23 var expectedhtml = '<P><SPAN>C</SPAN>D</P><P>E<SPAN>F</SPAN></P>'; 24 var expectedtext = 'CD\\nEF'; 25 if( drophtml != expectedhtml ) { 26 output.innerHTML = 'FAIL - normalised dropped HTML was:<br>'+drophtml.replace(/</g,'<'); 27 } else if( droptext != expectedtext ) { 28 output.innerHTML = 'FAIL - normalised dropped text was:<br>'+droptext.replace(/</g,'<'); 29 } else { 30 output.innerHTML = 'PASS'; 31 } 32 }; 33 }; 34 </script> 35 </head> 36 <body> 37 38 <p>Select the text from "C" to "F" (including both of those characters) in the text below.</p> 39 <div> 40 <p><span>A</span><span>BC</span>D</p><p>E<span>FG</span><span>H</span></p> 41 </div> 42 <div>Drag the selection and drop it here.</div> 43 44 </body> 45 </html>