[LFC][TFC] Use <col> to adjust the preferred column width.
[WebKit-https.git] / 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.testRunner)
136         return;
137     var testCase = testCases.shift();
138     if (testCase)
139         runTest.apply(null, testCase);
140     else
141         testRunner.notifyDone();
142 }
143
144 window.onload = function()
145 {
146     if (!window.testRunner)
147         return;
148     testRunner.dumpAsText();
149     testRunner.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>