insert-or-paste-image.tentative.html (4745B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="flags" content="may"> 6 <meta name="variant" content="?execCommand-insertImage"> 7 <meta name="variant" content="?execCommand-insertHTML"> 8 <meta name="variant" content="?paste-image"> 9 <title>Testing normalizing white-space sequence after execCommand("insertImage")</title> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <script src="/resources/testdriver-actions.js"></script> 15 <script src="../../include/editor-test-utils.js"></script> 16 <script> 17 "use strict"; 18 19 const method = location.search.substr(1); 20 const methodName = (() => { 21 switch (method) { 22 case "execCommand-insertImage": 23 return "document.execCommand(\"insertImage\")"; 24 case "execCommand-insertHTML": 25 return "document.execCommand(\"insertHTML\")"; 26 case "paste-image": 27 return "Pasting an <img>"; 28 } 29 })(); 30 31 addEventListener("load", () => { 32 // README: 33 // These tests based on the behavior of Chrome 134. This test does NOT define 34 // nor suggest any standard behavior (actually, some expected results might 35 // look odd), but this test must help you to understand how other browsers 36 // use different logic to normalize white-space sequence. 37 38 const editingHost = document.querySelector("div[contenteditable]"); 39 const utils = new EditorTestUtils(editingHost); 40 const img = document.querySelector("img"); 41 const imgURL = img.getAttribute("src"); 42 let doCopy = method == "paste-image"; 43 44 async function addPromiseTest(aInitHTML, aExpectedHTML) { 45 promise_test(async () => { 46 if (doCopy) { 47 await test_driver.click(img); 48 getSelection().selectAllChildren(img.parentNode); 49 await utils.sendCopyShortcutKey(); 50 doCopy = false; 51 } 52 utils.setupEditingHost(aInitHTML); 53 switch (method) { 54 case "execCommand-insertImage": 55 document.execCommand("insertImage", false, imgURL); 56 break; 57 case "execCommand-insertHTML": 58 document.execCommand("insertHTML", false, `<img src="${imgURL}">`); 59 break; 60 case "paste-image": 61 await utils.sendPasteShortcutKey(); 62 break; 63 } 64 editingHost.querySelector("img")?.removeAttribute("src"); 65 assert_equals(editingHost.innerHTML, aExpectedHTML); 66 }, `${methodName} when "${aInitHTML}"`); 67 } 68 69 function generateWhiteSpaces(num, lastIsAlwaysNBSP) { 70 let str = ""; 71 for (let i = 0; i < num - 1; i++) { 72 str += i % 2 ? " " : "\u00A0"; 73 } 74 str += lastIsAlwaysNBSP || num % 2 ? "\u00A0" : " "; 75 return str.replaceAll("\u00A0", " "); 76 } 77 78 addPromiseTest( 79 "[]a b", 80 `<img>a b` 81 ); 82 addPromiseTest( 83 "a[] b", 84 `a<img> b` 85 ); 86 addPromiseTest( 87 "a [] b", 88 `a <img> b` 89 ); 90 addPromiseTest( 91 "a [] b", 92 `a <img> b` 93 ); 94 addPromiseTest( 95 "a [] b", 96 `a${generateWhiteSpaces(3, true)}<img> b` 97 ); 98 addPromiseTest( 99 "a [] b", 100 `a${generateWhiteSpaces(4, true)}<img> b` 101 ); 102 addPromiseTest( 103 "a [] b", 104 `a${generateWhiteSpaces(5, true)}<img> b` 105 ); 106 addPromiseTest( 107 "a [] b", 108 `a${generateWhiteSpaces(6, true)}<img> b` 109 ); 110 addPromiseTest( 111 "a [] b", 112 `a${generateWhiteSpaces(7, true)}<img> b` 113 ); 114 addPromiseTest( 115 "a [] b", 116 `a${generateWhiteSpaces(8, true)}<img> b` 117 ); 118 addPromiseTest( 119 "a []b", 120 `a${generateWhiteSpaces(9, true)}<img>b` 121 ); 122 addPromiseTest( 123 "a b[]", 124 `a b<img>` 125 ); 126 }, {once: true}); 127 </script> 128 </head> 129 <body> 130 <div><img src="../../../images/green-16x16.png"></div> 131 <div contenteditable></div> 132 </body> 133 </html>