test_backspace_vs.html (6325B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1216427 5 --> 6 <head> 7 <title>Test for Bug 1216427</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 <script src="/tests/SimpleTest/EventUtils.js"></script> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1216427">Mozilla Bug 1216427</a> 14 <p id="display"></p> 15 <div id="content"> 16 <div id="edit1" contenteditable="true">a☺️b</div><!-- BMP symbol with VS16 --> 17 <div id="edit2" contenteditable="true">a🌐︎b</div><!-- plane 1 symbol with VS15 --> 18 <div id="edit3" contenteditable="true">a㐂󠄀b</div><!-- BMP ideograph with VS17 --> 19 <div id="edit4" contenteditable="true">a𠀀󠄁b</div><!-- SMP ideograph with VS18 --> 20 <div id="edit5" contenteditable="true">a☺︁︂︃b</div><!-- BMP symbol with extra VSes --> 21 <div id="edit6" contenteditable="true">a𠀀󠄀󠄁󠄂b</div><!-- SMP symbol with extra VSes --> 22 <!-- The Regional Indicator combinations here were supported by Apple Color Emoji 23 even prior to the major extension of coverage in the 10.10.5 timeframe. --> 24 <div id="edit7" contenteditable="true">a🇨🇳b</div><!-- Regional Indicator flag: CN --> 25 <div id="edit8" contenteditable="true">a🇨🇳🇩🇪b</div><!-- two RI flags: CN, DE --> 26 <div id="edit9" contenteditable="true">a🇨🇳🇩🇪🇪🇸b</div><!-- three RI flags: CN, DE, ES --> 27 <div id="edit10" contenteditable="true">a🇨🇳🇩🇪🇪🇸🇫🇷b</div><!-- four RI flags: CN, DE, ES, FR --> 28 <div id="edit11" contenteditable="true">a🇨🇳🇩🇪🇪🇸🇫🇷🇬🇧b</div><!-- five RI flags: CN, DE, ES, FR, GB --> 29 30 <div id="edit1b" contenteditable="true">a☺️b</div><!-- BMP symbol with VS16 --> 31 <div id="edit2b" contenteditable="true">a🌐︎b</div><!-- plane 1 symbol with VS15 --> 32 <div id="edit3b" contenteditable="true">a㐂󠄀b</div><!-- BMP ideograph with VS17 --> 33 <div id="edit4b" contenteditable="true">a𠀀󠄁b</div><!-- SMP ideograph with VS18 --> 34 <div id="edit5b" contenteditable="true">a☺︁︂︃b</div><!-- BMP symbol with extra VSes --> 35 <div id="edit6b" contenteditable="true">a𠀀󠄀󠄁󠄂b</div><!-- SMP symbol with extra VSes --> 36 <div id="edit7b" contenteditable="true">a🇨🇳b</div><!-- Regional Indicator flag: CN --> 37 <div id="edit8b" contenteditable="true">a🇨🇳🇩🇪b</div><!-- two RI flags: CN, DE --> 38 <div id="edit9b" contenteditable="true">a🇨🇳🇩🇪🇪🇸b</div><!-- three RI flags: CN, DE, ES --> 39 <div id="edit10b" contenteditable="true">a🇨🇳🇩🇪🇪🇸🇫🇷b</div><!-- four RI flags: CN, DE, ES, FR --> 40 <div id="edit11b" contenteditable="true">a🇨🇳🇩🇪🇪🇸🇫🇷🇬🇧b</div><!-- five RI flags: CN, DE, ES, FR, GB --> 41 </div> 42 <pre id="test"> 43 <script type="application/javascript"> 44 45 /** Test for Bug 1216427 */ 46 47 SimpleTest.waitForExplicitFinish(); 48 addLoadEvent(runTest); 49 50 function test(edit, bsCount) { 51 edit.focus(); 52 var sel = window.getSelection(); 53 sel.collapse(edit.childNodes[0], edit.textContent.length - 1); 54 for (let i = 0; i < bsCount; ++i) { 55 synthesizeKey("KEY_Backspace"); 56 } 57 is(edit.textContent, "ab", "The backspace key should delete the characters correctly"); 58 } 59 60 function testWithMove(edit, offset, bsCount) { 61 edit.focus(); 62 var sel = window.getSelection(); 63 sel.collapse(edit.childNodes[0], 0); 64 var i; 65 for (i = 0; i < offset; ++i) { 66 synthesizeKey("KEY_ArrowRight"); 67 synthesizeKey("KEY_ArrowLeft"); 68 synthesizeKey("KEY_ArrowRight"); 69 } 70 synthesizeKey("KEY_Backspace", {repeat: bsCount}); 71 is(edit.textContent, "ab", "The backspace key should delete the characters correctly"); 72 } 73 74 function runTest() { 75 /* test backspace-deletion of the middle character(s) */ 76 test(document.getElementById("edit1"), 1); 77 test(document.getElementById("edit2"), 1); 78 test(document.getElementById("edit3"), 1); 79 test(document.getElementById("edit4"), 1); 80 test(document.getElementById("edit5"), 1); 81 test(document.getElementById("edit6"), 1); 82 83 /* 84 * Tests with Regional Indicator flags: these behave differently depending 85 * whether an emoji font is present, as ligated flags are edited as single 86 * characters whereas non-ligated RI characters act individually. 87 * 88 * For now, only rely on such an emoji font on OS X 10.7+. (Note that the 89 * Segoe UI Emoji font on Win8.1 and Win10 does not implement Regional 90 * Indicator flags.) 91 * 92 * Once the Firefox Emoji font is ready, we can load that via @font-face 93 * and expect these tests to work across all platforms. 94 */ 95 let hasEmojiFont = 96 (navigator.platform.indexOf("Mac") == 0 && 97 /10\.([7-9]|[1-9][0-9])/.test(navigator.oscpu)); 98 99 if (hasEmojiFont) { 100 test(document.getElementById("edit7"), 1); 101 test(document.getElementById("edit8"), 2); 102 test(document.getElementById("edit9"), 3); 103 test(document.getElementById("edit10"), 4); 104 test(document.getElementById("edit11"), 5); 105 } 106 107 /* extra tests with the use of RIGHT and LEFT to get to the right place */ 108 testWithMove(document.getElementById("edit1b"), 2, 1); 109 testWithMove(document.getElementById("edit2b"), 2, 1); 110 testWithMove(document.getElementById("edit3b"), 2, 1); 111 testWithMove(document.getElementById("edit4b"), 2, 1); 112 testWithMove(document.getElementById("edit5b"), 2, 1); 113 testWithMove(document.getElementById("edit6b"), 2, 1); 114 if (hasEmojiFont) { 115 testWithMove(document.getElementById("edit7b"), 2, 1); 116 testWithMove(document.getElementById("edit8b"), 3, 2); 117 testWithMove(document.getElementById("edit9b"), 4, 3); 118 testWithMove(document.getElementById("edit10b"), 5, 4); 119 testWithMove(document.getElementById("edit11b"), 6, 5); 120 } 121 122 SimpleTest.finish(); 123 } 124 125 </script> 126 </pre> 127 </body> 128 </html>