OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>InputEvent: beforeinput for Cut and Paste</title> |
| 5 <script src="../../../resources/testharness.js"></script> |
| 6 <script src="../../../resources/testharnessreport.js"></script> |
| 7 </head> |
| 8 <body> |
| 9 <p id="editable" contenteditable></p> |
| 10 <script> |
| 11 test(function() { |
| 12 assert_not_equals(window.eventSender, undefined, 'This test requires eventSe
nder.'); |
| 13 |
| 14 var editable = document.getElementById('editable'); |
| 15 var eventOrderRecorder = []; |
| 16 editable.addEventListener('beforeinput', () => eventOrderRecorder.push('befo
reinput')); |
| 17 editable.addEventListener('input', () => eventOrderRecorder.push('input')); |
| 18 ['cut', 'paste'].forEach(eventType => editable.addEventListener( |
| 19 eventType, () => eventOrderRecorder.push(eventType))); |
| 20 |
| 21 function testClipboardEventOrder(command, expectedOrder) { |
| 22 eventOrderRecorder = []; |
| 23 eventSender.keyDown(command); |
| 24 assert_array_equals(eventOrderRecorder, expectedOrder, `Testing ${comman
d} event orders`); |
| 25 } |
| 26 |
| 27 // Test Cut and Paste. |
| 28 editable.innerHTML = 'abc'; |
| 29 var selection = window.getSelection(); |
| 30 selection.collapse(editable, 0); |
| 31 selection.extend(editable, 1); |
| 32 testClipboardEventOrder('Cut', ['cut', 'beforeinput', 'input']); |
| 33 testClipboardEventOrder('Paste', ['paste', 'beforeinput', 'input']); |
| 34 }, 'Testing Cut and Paste ordering'); |
| 35 |
| 36 test(function() { |
| 37 assert_not_equals(window.eventSender, undefined, 'This test requires eventSe
nder.'); |
| 38 var editable = document.getElementById('editable'); |
| 39 |
| 40 var lastPlainTextData = ""; |
| 41 var lastHTMLData = ""; |
| 42 editable.addEventListener('beforeinput', event => { |
| 43 lastPlainTextData = event.dataTransfer ? event.dataTransfer.getData('tex
t/plain') : null; |
| 44 lastHTMLData = event.dataTransfer ? event.dataTransfer.getData('text/htm
l') : null; |
| 45 }); |
| 46 function testClipboardDataTransfer(command, expectedPlainText, expectedHTML)
{ |
| 47 lastPlainTextData = ""; |
| 48 lastHTMLData = ""; |
| 49 eventSender.keyDown(command); |
| 50 assert_equals(lastPlainTextData, expectedPlainText, `Testing ${command}
getData('text/plain')`); |
| 51 if (expectedHTML && expectedHTML.test) { |
| 52 assert_regexp_match(lastHTMLData, expectedHTML, `Testing ${command}
getData('text/html')`); |
| 53 } else { |
| 54 assert_equals(lastHTMLData, expectedHTML, `Testing ${command} getDat
a('text/html')`); |
| 55 } |
| 56 } |
| 57 |
| 58 // Test Cut and Paste. |
| 59 editable.innerHTML = '<b>abc</b>'; |
| 60 var selection = window.getSelection(); |
| 61 selection.collapse(editable, 0); |
| 62 selection.extend(editable, 1); |
| 63 // Cut has null |dataTransfer|. |
| 64 testClipboardDataTransfer('Cut', null, null); |
| 65 // Paste has |dataTransfer| with additional inline styles. |
| 66 testClipboardDataTransfer('Paste', 'abc', /^<b.*>abc<\/b>$/); |
| 67 }, 'Testing Cut and Paste dataTransfer'); |
| 68 |
| 69 test(function() { |
| 70 assert_not_equals(window.eventSender, undefined, 'This test requires eventSe
nder.'); |
| 71 var editable = document.getElementById('editable'); |
| 72 |
| 73 editable.addEventListener('beforeinput', event => { |
| 74 if (event.inputType == 'deleteByCut') { |
| 75 // Prevents text deletion but not Clipboard update. |
| 76 event.preventDefault(); |
| 77 } |
| 78 }); |
| 79 |
| 80 // Test Cut and Paste. |
| 81 editable.innerHTML = 'abc'; |
| 82 var selection = window.getSelection(); |
| 83 selection.collapse(editable, 0); |
| 84 selection.extend(editable, 1); |
| 85 // The text won't be removed but should still update Clipboard. |
| 86 eventSender.keyDown('Cut'); |
| 87 selection.collapse(editable, 0); |
| 88 eventSender.keyDown('Paste'); |
| 89 assert_equals(editable.innerHTML, 'abcabc', 'Testing Cut.preventDefault() an
d Paste.') |
| 90 }, 'Testing Cut and Paste preventDefault()'); |
| 91 </script> |
| 92 </body> |
| 93 </html> |
OLD | NEW |