testing/web-platform/tests/html/editing/dnd/images/025.xhtml
author Mozilla Releng Treescript <release+treescript@mozilla.org>
Thu, 26 May 2022 19:04:32 +0000
changeset 618971 a1b112c9da0712ae2ab1a77587b32410b97951cc
parent 388141 f95a678186b46649eee6cf8c6adbdf46c320f300
permissions -rw-r--r--
no bug - Bumping Firefox l10n changesets r=release a=l10n-bump DONTBUILD es-AR -> c85f185f34a834895d755cde348530351ebb4835 eu -> 8ebe067658222f98ca856461394427dc3d74b135 fr -> 5887102b364eb8139189eafd56ef8afaea0dfba0 hu -> 12c637a0f2c1cf40e89bac39e2b0f7ec436216a6 it -> 35811aafe0c96a6fe1ebac94a87d40e8c70c0b30 sk -> 0e3d826ed292dfd9d5d6297f9140acabfed2fff2 zh-CN -> 89af38e4810f336cd981c56d733685d016f35e67 zh-TW -> acea5a2ae602b8729819e0b32600821921864979

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drag and drop of image to scrollable container with horizontal scrollbar</title>
<style type="text/css">
p + div
  {height:150px;
  width:150px;
  overflow-x:scroll;}
div[ondragenter]
  {margin-left:200px;
  width:105px;
  min-height:105px;
  text-align:center;
  padding:10px;
  background-color:silver;}
p:first-child
  {padding-left:12px;}
</style>
<script type="application/ecmascript">
function addImage(event)
  {var c = document.createElement('img');
  c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,''));
  document.querySelector('div > div').appendChild(c);}
</script>
</head>
<body>
<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAEq0lEQVR42u1dvU4bQRAeR0RCCilSp0peIoKGB4DSXYRDlcZlFClKBI4bB/kV/AymIDwCTahiicaioEOxhCsjWVTJziyKMfYZn+9ud3bvG2mEZB13u9+nndmf2Rki7fKFXtEBbVKD9o22jB4bPaND6hm9Mjo0enevw/vfevKMfbYl/8vv4HdBUkvFALhltG2A7dN3+pur8jv53fwN/hZkjjRo3eiuAatjdJA7CcnkDOSb/G1uQ6mFzUeDagaQrvl764yEJOU22LbUymXaGrRhOt40OvJOQvLIGUkbP9GLeIn4SM9NJ+tOTVI+Jq0ubY9sVFRNxy6DIWKWmEvpQ/ByQNumI+fBEjHrZ86lT8HJV3ptGn8aDRGzxJxKHwMZFe9Mg6+jJWNCyrX0VbUc0nuj4+jJmPiWsfRZodN+ZvSoNETMjpYjwUCFfKaXpjEnpSVjQsqJYOF5ZLw1elF6MiakXAgmnpw378DegIgZUm4EGw8jA2QsIuUbvXHpM2CmljFfhfsUO5uCA0/j6AudfZV5arv6WuVHcYs+ALwqKTkvHnmLoEwr8CJW9Llts9iNwvj3plzsfeWyIRnzrq37kfIzq6naBpA5a6bzlJgOl/SMkl+rklEFgIX5k5THwTYgIdwzcP2jhM/o19KsOeoArnBS6suaqo2gQnXCJWSwXNwXB4gBMFekNBeTwSGUmiMK4yNktDhsleNaAZRrUvYWmasuQHJOSDdpdKyriEIvo9maexWC70gAIF/bKTvzzFUH4HgbJZ3HdFSw9vC6lfKHpq7X8X07AOOblK2HhLQBindC2g/9Rx+gePcj/cnqHIDoUFm1c9gjwNAy/d0kyXIAMLSYrQ8kqScAhhbH3iLJBwIwtBByTJKkBWBoIeSMJHMOwNBCyG+SdEYAQ4tTvyLJMQUwtBAyJEn8BTC0EHIHQhQSApOlzGTBqaty6jzVAhhaCOlhYahuYYitE02EHGNzURchLZItX4ChhZB9HFBpUjmgwhGuHv0feI0gBw1T3j7CgHT5jzYC5XQRsjUdSsrhjADGl7ka0EylBgRb+ySkMy9rww7A8Waududf2MH9Qh9k3CbXLsGVNh/mqrvojuEeQHI+Qmq4Fq1ndIyeruaDxAEuCWk+ncmB0z3gepubtQenMUHyGTWELJl8xk6B15CeqVAyLtPXtUICsyJnVivWs+J0dAAwbzLOkQRTk2YuKsapTQFkXqPjlDILEinnRcZ1fpXdkGo866xqnH9FNyTjz0JIQZXcuPQCAE5rqo6oMEFBl7RknBRfTg8lj5Yl48JdGT0ueIWiYIvIuHFfPg9l85LJcF42b+JTUFjysZnyVlhy2qfA0asovTo9+0JxYnWC8t0KBQXuFYrdkIy3mBj3LbeNQrejZTuqOlbcl8znGTqcfjXoM3pboqgaPhEPxda1qgcVYsRt5TanDkgISWzcV1N1hCS3jdu4dNxUDMIhlBzXysHGGspkcBtsW2pPh3fGLrZ2ya5cXHFp0qxJ6si3E68EQCpy344vQRZxO5jfye+2d/oqgHsV02Z3lvcl9QTnA+EkLZw5h9MZcY4pTvxldXj/W0+esc+25H/5HQGYon+Q5f+MwFz+8QAAAABJRU5ErkJggg==" alt="PNG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p>
<p>Drag circle above to the silver box inside scrollable container below (dragging towards edge of container triggers scrolling).</p>
<p>It should be copied to the silver box once you drop it there.</p>
<div>
  <div
    ondragenter="event.preventDefault()"
    ondragover="return false"
    ondrop="addImage(event)"
  />
</div>
</body>
</html>