016.html (2176B)
1 <!doctype html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="/resources/testdriver-actions.js"></script> 7 <script src="../resources/test-helper.js"></script> 8 <head> 9 <title>Dropping image on vertical scrollbar of a scrollable block element</title> 10 <style type="text/css"> 11 div[ondragenter] { 12 width: 2em; 13 height: 5em; 14 margin-top: 1em; 15 font-size: 1.5em; 16 overflow-y: scroll; 17 } 18 19 p:first-child { 20 padding-left: 1em; 21 } 22 23 img { 24 width: 5px; 25 height: 5px; 26 } 27 </style> 28 <script> 29 function checkImage(event) { 30 document.querySelector('div').firstChild.nodeValue = (document.querySelector('img').getAttribute('src') == event 31 .dataTransfer.getData('text/uri-list').replace(/\r\n$/, '')) ? 'P A S S' : 'F A I L'; 32 } 33 </script> 34 </head> 35 <body> 36 <p><img 37 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" 38 alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'" /></p> 39 <p>Drag little square above and drop it on scrollbar below. You should see word PASS when you drop it on scrollbar. 40 </p> 41 <div ondragenter="event.preventDefault()" ondragover="return false" ondrop="checkImage(event)">→ → → → → → → → → → → → 42 → → → → → → → →</div> 43 <script> 44 async function test() { 45 await new Promise(loaded => window.addEventListener("load", loaded)); 46 47 const img = document.querySelector('img'); 48 const div = document.querySelector('div'); 49 50 function onDropCallBack(event) { 51 assert_equals(div.firstChild.nodeValue, 'P A S S'); 52 return true; 53 } 54 55 dragDropTest(img, div, onDropCallBack, 56 'Dragging the image to the vertical scrollbar within a scrollable block element should copy it there', 57 /*dragIframe=*/ null, /*dropIframe=*/ null, DropPosition.RIGHT_SCROLLBAR); 58 } 59 test(); 60 </script> 61 </body> 62 </html>