testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrag-manual.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Modifier keys being released before end of drag</title>
   5     <style type="text/css">
   6 div:first-child {
   7   height: 100px;
   8   width: 100px;
   9   background: orange;
  10   display: inline-block;
  11 }
  12 div:first-child + div {
  13   height: 100px;
  14   width: 100px;
  15   background: blue;
  16   display: inline-block;
  17 }
  18 div:first-child + div + div {
  19   height: 100px;
  20   width: 100px;
  21   background: fuchsia;
  22   display: inline-block;
  23 }
  24 div:first-child + div + div + div {
  25   height: 100px;
  26   width: 100px;
  27   background: yellow;
  28   display: inline-block;
  29 }
  30 div {
  31   font-family: monospace;
  32 }
  33 table {
  34   display: inline-table;
  35   margin-right: 1em;
  36   border-collapse: collapse;
  37 }
  38 table, th, td {
  39   border: 1px solid black;
  40 }
  41 thead th {
  42   background: silver;
  43   color: black;
  44 }
  45     </style>
  46     <script type="text/javascript">
  47 window.onload = function () {
  48   var bde, bdo, bdo2, fde, fdo, fdo2, yde, ydo, ydr;
  49   var orange = document.getElementsByTagName('div')[0];
  50   orange.ondragstart = function (e) {
  51     e.dataTransfer.setData('text','http://example.com/');
  52     e.dataTransfer.effectAllowed = 'linkMove';
  53     bde = bdo = bdo2 = fde = fdo = fdo2 = yde = ydo = ydr = '';
  54   };
  55   var blue = document.getElementsByTagName('div')[1];
  56   blue.ondragenter = function (e) {
  57     e.preventDefault();
  58     bde = e.dataTransfer.dropEffect;
  59   };
  60   blue.ondragover = function (e) {
  61     e.preventDefault();
  62     if( !bdo ) {
  63       bdo = e.dataTransfer.dropEffect;
  64     }
  65     //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers
  66     //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2
  67     bdo2 = e.dataTransfer.dropEffect;
  68   };
  69   var fuchsia = document.getElementsByTagName('div')[2];
  70   fuchsia.ondragenter = function (e) {
  71     e.preventDefault();
  72     fde = e.dataTransfer.dropEffect;
  73   };
  74   fuchsia.ondragover = function (e) {
  75     e.preventDefault();
  76     if( !fdo ) { fdo = e.dataTransfer.dropEffect; }
  77     fdo2 = e.dataTransfer.dropEffect;
  78   };
  79   var yellow = document.getElementsByTagName('div')[3];
  80   yellow.ondragenter = function (e) {
  81     e.preventDefault();
  82     yde = e.dataTransfer.dropEffect;
  83   };
  84   yellow.ondragover = function (e) {
  85     e.preventDefault();
  86     if( !ydo ) { ydo = e.dataTransfer.dropEffect; }
  87   };
  88   yellow.ondrop = function (e) {
  89     e.preventDefault();
  90     ydr = e.dataTransfer.dropEffect;
  91   };
  92   orange.ondragend = function (e) {
  93     var sequence = ([bde,bdo,bdo2,fde,fdo,fdo2,yde,ydo,ydr,e.dataTransfer.dropEffect]).join('=&gt;')
  94     var desiredsequence = (['link','link','move','move','move','link','link','link','link','link']).join('=&gt;')
  95     if( sequence == desiredsequence ) {
  96       document.getElementsByTagName('div')[4].innerHTML = 'PASS';
  97     } else {
  98       document.getElementsByTagName('div')[4].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence;
  99     }
 100   };
 101 };
 102     </script>
 103   </head>
 104   <body>
 105
 106     <div draggable="true"></div>
 107     <div></div>
 108     <div></div>
 109     <div></div>
 110     <div><strong>&nbsp;</strong></div>
 111     <ol>
 112       <li>Drag the orange square over the blue square</li>
 113       <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>
 114       <li>If supported by the platform, the mouse cursor should show that a &quot;move&quot; drop effect will be used</li>
 115       <li>Continue dragging over the pink square</li>
 116       <li>Release the modifier keys</li>
 117       <li>If supported by the platform, the mouse cursor should show that a &quot;link&quot; drop effect will be used</li>
 118       <li>Continue dragging over the yellow square</li>
 119       <li>Release the drag</li>
 120       <li>Fail if no new text appears above this list</li>
 121     </ol>
 122     <noscript><p>Enable JavaScript and reload</p></noscript>
 123
 124   </body>
 125 </html>