onlydropzoneevents.html | Explore in Territory

<!doctype html>
<html>
  <head>
    <title>Modifier keys being used with a dropzone attribute and dragenter/dragover events</title>
    <style type="text/css">
div:first-child {
  height: 100px;
  width: 100px;
  background: orange;
  display: inline-block;
}
div:first-child + div {
  height: 100px;
  width: 100px;
  background: blue;
  display: inline-block;
}
div:first-child + div + div {
  height: 100px;
  width: 100px;
  background: fuchsia;
  display: inline-block;
}
table {
  display: inline-table;
  margin-right: 1em;
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}
thead th {
  background: silver;
  color: black;
}
    </style>
    <script type="text/javascript">
window.onload = function () {
  var orange = document.getElementsByTagName('div')[0];
  orange.ondragstart = function (e) {
    e.dataTransfer.setData('text/plain','http://example.com/');
    e.dataTransfer.effectAllowed = 'copy';
  };
  var fuchsia = document.getElementsByTagName('div')[2], fde, fdo;
  fuchsia.ondragenter = function (e) {
    fde = e.dataTransfer.dropEffect;
  };
  fuchsia.ondragover = function (e) {
    fdo = e.dataTransfer.dropEffect;
  };
  fuchsia.ondrop = function (e) {
    //dropzone overrides the modifier, always, and ignores effectAllowed
    e.preventDefault();
    var sequence = ([fde,fdo,e.dataTransfer.dropEffect]).join('=&gt;')
    var desiredsequence = (['move','move','link']).join('=&gt;')
    if( sequence == desiredsequence ) {
      document.getElementsByTagName('div')[3].innerHTML = 'PASS';
    } else {
      document.getElementsByTagName('div')[3].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence;
    }
  };
};
    </script>
  </head>
  <body>

    <div draggable="true"></div>
    <div></div>
    <div dropzone="link string:text/plain"></div>
    <div>&nbsp;</div>
    <ol>
      <li>Drag the orange square over the blue square</li>
      <li>Press the relevant modifier keys for your platform to request a &quot;move&quot; drop effect (eg. Shift on Windows/Unix/Linux, Command on Mac)</li>
      <li>Continue dragging over the pink square</li>
      <li>If supported by the platform, the mouse cursor should show that a &quot;link&quot; drop effect will be used</li>
      <li>Release the drag, then the keys</li>
      <li>Fail if no new text appears above this list</li>
    </ol>
    <noscript><p>Enable JavaScript and reload</p></noscript>

  </body>
</html>
chromium/third_party/blink/web_tests/external/wpt/html/editing/dnd/platform/modifiers/onlydropzoneevents.html
