test_inlineTableEditing.html (1940B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <script src="/tests/SimpleTest/EventUtils.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 7 </head> 8 <body> 9 <div contenteditable></div> 10 <pre id="test"> 11 12 <script class="testbody" type="application/javascript"> 13 SimpleTest.waitForExplicitFinish(); 14 SimpleTest.waitForFocus(function() { 15 const editableInnerHTML = 16 `<table> 17 <tr><td>ABCDEFG</td><td>HIJKLMN</td></tr> 18 <tr><td>ABCDEFG</td><td>HIJKLMN</td></tr> 19 <tr><td>ABCDEFG</td><td>HIJKLMN</td></tr> 20 </table>`; 21 22 document.execCommand("enableObjectResizing", false, "false"); 23 document.execCommand("enableInlineTableEditing", false, "true"); 24 25 function doTest(aDescription, aTable) { 26 synthesizeMouseAtCenter(aTable, {}); 27 isnot( 28 aTable.getAttribute("_moz_resizing"), 29 "true", 30 `${aDescription}: _moz_resizing attribute shouldn't be true without object resizing` 31 ); 32 33 const tr2 = aTable.querySelector("tr + tr"); 34 synthesizeMouse(tr2, 0, tr2.clientHeight / 2, {}); 35 ok( 36 !tr2.isConnected, 37 `${aDescription}: The second <tr> element should've been removed by a click` 38 ); 39 } 40 41 const editingHost = document.querySelector("div[contenteditable]"); 42 editingHost.innerHTML = editableInnerHTML; 43 doTest("Testing in Light DOM", editingHost.querySelector("table")); 44 45 editingHost.remove(); 46 47 const shadowHost = document.createElement("div"); 48 document.body.insertBefore(shadowHost, document.body.firstChild); 49 const shadowRoot = shadowHost.attachShadow({mode: "open"}); 50 shadowRoot.appendChild(document.createElement("div")); 51 shadowRoot.firstChild.setAttribute("contenteditable", ""); 52 shadowRoot.firstChild.innerHTML = editableInnerHTML; 53 doTest("Testing in Shadow DOM", shadowRoot.firstChild.querySelector("table")); 54 55 shadowHost.remove(); 56 57 SimpleTest.finish(); 58 }); 59 </script> 60 </pre> 61 </body> 62 </html>