insertparagraph-in-non-splittable-element.html (6500B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>Test for inserting paragraph in non-splittable elements</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="../include/editor-test-utils.js"></script> 11 <div contenteditable></div> 12 <script> 13 "use strict"; 14 15 const editingHost = document.querySelector("div[contenteditable]"); 16 const utils = new EditorTestUtils(editingHost); 17 18 const tests = [ 19 { 20 selector: "button", 21 initial: "<div><button>abc</button></div>", 22 // <button> can have <br> so that it should be handled as insertLineBreak. 23 expected: "<div><button><br>abc</button></div>", 24 }, 25 { 26 selector: "caption", 27 initial: "<div><table><caption>abc</caption><tbody><tr><td>abc</td></tr></tbody></table></div>", 28 // <caption> can have paragraphs so that it should be handled as in a block. 29 expected: "<div><table><caption><br>abc</caption><tbody><tr><td>abc</td></tr></tbody></table></div>", 30 }, 31 { 32 selector: "col", 33 initial: "<div><table><colgroup><col></colgroup><tbody><tr><td>abc</td></tr></tbody></table></div>", 34 // <col> and its table parents cannot have paragraphs nor <br>, therefore, 35 // it should be handled outside <table> or the first cell in the table. 36 expected: [ 37 "<div><table><colgroup><col></colgroup><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled with the first cell case 38 "<div><br></div><div><table><colgroup><col></colgroup><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case 39 ], 40 }, 41 { 42 selector: "colgroup", 43 initial: "<div><table><colgroup><col></colgroup><tbody><tr><td>abc</td></tr></tbody></table></div>", 44 // <colgroup> and its table parents cannot have paragraphs nor <br>, 45 // therefore, it should be handled outside <table> or the first cell 46 // in the table. 47 expected: [ 48 "<div><table><colgroup><col></colgroup><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled with the first cell case 49 "<div><br></div><div><table><colgroup><col></colgroup><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case 50 ], 51 }, 52 { 53 selector: "iframe", 54 initial: "<div><iframe srcdoc=\"abc\"></iframe></div>", 55 // <iframe> is a replaced element so that it should be handled outside of it. 56 expected: "<div><br></div><div><iframe srcdoc=\"abc\"></iframe></div>", 57 }, 58 { 59 selector: "legend", 60 initial: "<div><fieldset><legend>abc</legend></fieldset></div>", 61 // <fieldset> cannot have multiple <legend> elements so that it should not 62 // be split, and it cannot have paragraphs so that <br> element should be 63 // inserted instead. 64 expected: "<div><fieldset><legend><br>abc</legend></fieldset></div>", 65 }, 66 { 67 selector: "meter", 68 initial: "<div><meter max=\"100\" value=\"50\">abc</meter></div>", 69 // <meter> is a replaced element so that it should be handled outside of it. 70 expected: "<div><br></div><div><meter max=\"100\" value=\"50\">abc</meter></div>", 71 }, 72 { 73 selector: "optgroup", 74 initial: "<div><select><optgroup><option>abc</option></optgroup></select></div>", 75 // <optgroup> is a part of <select> and they are replaced so that it should 76 // be handled outside of it. 77 expected: "<div><br></div><div><select><optgroup><option>abc</option></optgroup></select></div>", 78 }, 79 { 80 selector: "option", 81 initial: "<div><select><option>abc</option></select></div>", 82 // <option> is a part of <select> and they are replaced so that it should 83 // be handled outside of it. 84 expected: "<div><br></div><div><select><option>abc</option></select></div>", 85 }, 86 { 87 selector: "progress", 88 initial: "<div><progress max=\"100\" value=\"50\">abc</progress></div>", 89 // <meter> is a replaced element so that it should be handled outside of it. 90 expected: "<div><br></div><div><progress max=\"100\" value=\"50\">abc</progress></div>", 91 }, 92 { 93 selector: "select", 94 initial: "<div><select><option>abc</option></select></div>", 95 // <select> is a replaced element so that it should be handled outside of it. 96 expected: "<div><br></div><div><select><option>abc</option></select></div>", 97 }, 98 { 99 selector: "table", 100 initial: "<div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", 101 // <table> cannot have paragraphs nor <br>, therefore, it should be handled 102 // outside or in the first cell in the table. 103 expected: [ 104 "<div><table><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled in the first cell case 105 "<div><br></div><div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case 106 ], 107 }, 108 { 109 selector: "tbody", 110 initial: "<div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", 111 // <tbody> and its parent cannot have paragraphs nor <br>, therefore, 112 // it should be handled outside <table> or the first cell in the table. 113 expected: [ 114 "<div><table><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled in the next cell case 115 "<div><br></div><div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case 116 ], 117 }, 118 { 119 selector: "tr", 120 initial: "<div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", 121 // <tr> and its table parents cannot have paragraphs nor <br>, therefore, 122 // it should be handled outside <table> or the first cell in the table. 123 expected: [ 124 "<div><table><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled in the next cell case 125 "<div><br></div><div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case 126 ], 127 }, 128 ]; 129 130 for (const currentTest of tests) { 131 promise_test(async t => { 132 editingHost.innerHTML = currentTest.initial; 133 getSelection().collapse(editingHost.querySelector(currentTest.selector), 0); 134 await utils.sendEnterKey(); 135 if (Array.isArray(currentTest.expected)) { 136 assert_in_array(editingHost.innerHTML, currentTest.expected); 137 } else { 138 assert_equals(editingHost.innerHTML, currentTest.expected); 139 } 140 }, `insertParagraph in ${currentTest.selector} of ${currentTest.initial}`); 141 } 142 </script>