LayoutTests/fast/events/clipboard-dataTransferItemList.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script>
   5 function assertEq(left, right)
   6 {
   7     if (left === right)
   8         log('PASS: ' + left + " === " + right);
   9     else
  10         log('FAIL: ' + left + "(of type " + (typeof left) + ") !== " + right + "(of type " + (typeof right) + ")");
  11 }
  12 function log(str)
  13 {
  14     var result = document.getElementById('result');
  15     result.appendChild(document.createTextNode(str));
  16     result.appendChild(document.createElement('br'));
  17 }
  18
  19 function legacyCopyStart(dataTransfer)
  20 {
  21     dataTransfer.setData('text', 'sample');
  22     dataTransfer.setData('url', 'http://www.google.com/');
  23     dataTransfer.setData('text/html', '<em>Markup</em>');
  24     dataTransfer.setData('custom-data', 'hello world');
  25 }
  26
  27 function itemListCopyStart(dataTransfer)
  28 {
  29     dataTransfer.items.add('sample', 'text/plain');
  30     dataTransfer.items.add('http://www.google.com/', 'text/uri-list');
  31     dataTransfer.items.add('<em>Markup</em>', 'text/html');
  32     dataTransfer.items.add('hello world', 'custom-data');
  33 }
  34
  35 function copy(event)
  36 {
  37     event.preventDefault();
  38     var copyMethod = document.getElementById('copyMethod');
  39     if (copyMethod.selectedIndex == 0)
  40         legacyCopyStart(event.clipboardData);
  41     else if (copyMethod.selectedIndex == 1)
  42         itemListCopyStart(event.clipboardData);
  43 }
  44
  45 function legacyPaste(dataTransfer)
  46 {
  47     assertEq(4, dataTransfer.types.length);
  48      if (dataTransfer.types.indexOf('text/plain') < 0)
  49         log('FAIL: types array did not contain "text"');
  50     if (dataTransfer.types.indexOf('text/uri-list') < 0)
  51         log('FAIL: types array did not contain "text/uri-list"');
  52     if (dataTransfer.types.indexOf('text/html') < 0)
  53         log('FAIL: types array did not contain "text/html"');
  54      if (dataTransfer.types.indexOf('custom-data') < 0)
  55         log('FAIL: types array did not contain "custom-data"');
  56     assertEq('sample', dataTransfer.getData('text'));
  57     assertEq('http://www.google.com/', dataTransfer.getData('url'));
  58     assertEq('<em>Markup</em>', dataTransfer.getData('text/html'));
  59     assertEq('hello world', dataTransfer.getData('custom-data'));
  60     runNext();
  61 }
  62
  63 var outstandingRequests;
  64 function itemListPaste(dataTransfer)
  65 {
  66     outstandingRequests = 0;
  67     assertEq(4, dataTransfer.items.length);
  68     var types = [];
  69     for (var i = 0; i < dataTransfer.items.length; ++i) {
  70         types.push({kind: dataTransfer.items[i].kind, type: dataTransfer.items[i].type});
  71     }
  72     types.sort(function (a, b) { return a.type.localeCompare(b.type); });
  73     var expectedTypes = [
  74         { kind: 'string', type: 'custom-data'},
  75         { kind: 'string', type: 'text/html'},
  76         { kind: 'string', type: 'text/plain'},
  77         { kind: 'string', type: 'text/uri-list'},
  78     ];
  79     assertEq(JSON.stringify(expectedTypes), JSON.stringify(types));
  80     var expectedResults = {
  81         'custom-data': 'hello world',
  82         'text/html': '<em>Markup</em>',
  83         'text/plain': 'sample',
  84         'text/uri-list': 'http://www.google.com/',
  85     }
  86     function makeClosure(expectedData)
  87     {
  88         ++outstandingRequests;
  89         return function (data) {
  90             assertEq(expectedData, data);
  91             if (--outstandingRequests == 0)
  92                 window.setTimeout(runNext, 0);
  93         }
  94     }
  95     // We use this funky loop to make sure we always print out results in the same order.
  96     for (var i = 0; i < types.length; ++i) {
  97         for (var j = 0; j < dataTransfer.items.length; ++j) {
  98             if (types[i].type == dataTransfer.items[j].type) {
  99                 dataTransfer.items[j].getAsString(makeClosure(expectedResults[types[i].type]));
 100                 break;
 101             }
 102         }
 103     }
 104 }
 105
 106 function paste(event)
 107 {
 108     var pasteMethod= document.getElementById('pasteMethod');
 109     if (pasteMethod.selectedIndex == 0)
 110         legacyPaste(event.clipboardData);
 111     else if (pasteMethod.selectedIndex == 1)
 112         itemListPaste(event.clipboardData);
 113 }
 114
 115 function runTest(copyMethodIndex, pasteMethodIndex)
 116 {
 117     var copyMethod = document.getElementById('copyMethod');
 118     var pasteMethod = document.getElementById('pasteMethod');
 119     copyMethod.selectedIndex = copyMethodIndex;
 120     pasteMethod.selectedIndex = pasteMethodIndex;
 121     log('Running test with ' + copyMethod.value + ' copy handler and ' + pasteMethod.value + ' paste handler');
 122
 123     document.execCommand('copy');
 124     document.execCommand('paste');
 125 }
 126
 127 var testCases = [
 128     [0, 0],
 129     [0, 1],
 130     [1, 0],
 131     [1, 1],
 132 ];
 133 function runNext()
 134 {
 135     if (!window.layoutTestController)
 136         return;
 137     var testCase = testCases.shift();
 138     if (testCase)
 139         runTest.apply(null, testCase);
 140     else
 141         layoutTestController.notifyDone();
 142 }
 143
 144 window.onload = function()
 145 {
 146     if (!window.layoutTestController)
 147         return;
 148     layoutTestController.dumpAsText();
 149     layoutTestController.waitUntilDone();
 150
 151     runNext();
 152 }
 153 </script>
 154 </head>
 155 <body oncopy="copy(event)" onpaste="paste(event)">
 156 <p>To manually test, press your browser shortcut for copy and then for paste.  Several lines that say 'PASS' should appear below.
 157 <div>Copy handler: <select id="copyMethod"><option>Legacy</option><option>DataTransferItemList</option></select></div>
 158 <div>Paste handler: <select id="pasteMethod"><option>Legacy</option><option>DataTransferItemList</option></select></div>
 159 <div id="result"></div>
 160 </body>
 161 </html>