017.html (2104B)
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 horizontal page scrollbar</title> 10 <style type="text/css"> 11 p:first-child { 12 padding-left: 1em; 13 } 14 15 div { 16 width: 5em; 17 height: 2em; 18 margin-top: 1em; 19 font-size: 1.5em; 20 overflow-x: scroll; 21 } 22 23 img { 24 width: 5px; 25 height: 5px; 26 } 27 28 body { 29 width: 3000px; 30 } 31 </style> 32 <script> 33 function dragImage() { 34 event.dataTransfer.effectAllowed = 'copy'; 35 } 36 37 function dropImage(event) { 38 document.querySelector('div').firstChild.nodeValue = 'PASS'; 39 } 40 </script> 41 </head> 42 <body ondragenter="event.preventDefault()" ondragover="return false"> 43 <p><img 44 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" 45 alt="PNG green pixel" ondragstart="dragImage()" /></p> 46 <p>Drag little square above and drop it on horizontal scrollbar. Word PASS should appear near scrollbar once you drop 47 it.</p> 48 <div ondrop="dropImage(event)">↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</div> 49 <script> 50 async function test() { 51 await new Promise(loaded => window.addEventListener("load", loaded)); 52 53 const img = document.querySelector('img'); 54 const div = document.querySelector('div'); 55 56 function onDropCallBack(event) { 57 assert_equals(div.firstChild.nodeValue, 'PASS'); 58 return true; 59 } 60 61 dragDropTest(img, div, onDropCallBack, 62 'Dragging the image to the horizontal scrollbar should copy it there', 63 /*dragIframe=*/ null, /*dropIframe=*/ null, DropPosition.HORIZONTAL_SCROLLBAR); 64 } 65 test(); 66 </script> 67 </body> 68 </html>