2025-03-18 19:28:35 +01:00
|
|
|
<!DOCTYPE html>
|
2024-12-03 16:29:21 +01:00
|
|
|
<script src="../include.js"></script>
|
2025-09-03 16:53:18 +02:00
|
|
|
<div id="a" contenteditable><ul><li>foobar</li></ul></div>
|
|
|
|
|
<div id="b">foo <div contenteditable>bar</div></div>
|
|
|
|
|
<div id="c" contenteditable>foo <div contenteditable>bar</div></div>
|
|
|
|
|
<div id="d" contenteditable>foo <span><div contenteditable>bar</div></span></div>
|
2024-12-03 16:29:21 +01:00
|
|
|
<script>
|
|
|
|
|
test(() => {
|
2025-09-03 16:53:18 +02:00
|
|
|
// a: Cursor after 'foo', should create a new <li>
|
|
|
|
|
const aElm = document.querySelector('#a');
|
|
|
|
|
println(`Before: ${aElm.innerHTML}`);
|
|
|
|
|
const aAnchor = aElm.firstChild.firstChild.firstChild;
|
|
|
|
|
document.getSelection().setBaseAndExtent(aAnchor, 3, aAnchor, 3);
|
|
|
|
|
document.execCommand('insertParagraph');
|
|
|
|
|
println(`After: ${aElm.innerHTML}`);
|
2024-12-03 16:29:21 +01:00
|
|
|
|
2025-09-03 16:53:18 +02:00
|
|
|
// b: Cursor after 'bar', should create two new containers inside the inner <div contenteditable>
|
|
|
|
|
const bElm = document.querySelector('#b');
|
|
|
|
|
println(`Before: ${bElm.innerHTML}`);
|
|
|
|
|
const bAnchor = bElm.childNodes[1].firstChild;
|
|
|
|
|
document.getSelection().setBaseAndExtent(bAnchor, 3, bAnchor, 3);
|
|
|
|
|
document.execCommand('insertParagraph');
|
|
|
|
|
println(`After: ${bElm.innerHTML}`);
|
2024-12-03 16:29:21 +01:00
|
|
|
|
2025-09-03 16:53:18 +02:00
|
|
|
// c: Cursor after 'bar', should replicate the inner <div contenteditable> as a container
|
|
|
|
|
const cElm = document.querySelector('#c');
|
|
|
|
|
println(`Before: ${cElm.innerHTML}`);
|
|
|
|
|
const cAnchor = cElm.childNodes[1].firstChild;
|
|
|
|
|
document.getSelection().setBaseAndExtent(cAnchor, 3, cAnchor, 3);
|
2024-12-03 16:29:21 +01:00
|
|
|
document.execCommand('insertParagraph');
|
2025-09-03 16:53:18 +02:00
|
|
|
println(`After: ${cElm.innerHTML}`);
|
2024-12-03 16:29:21 +01:00
|
|
|
|
2025-09-03 16:53:18 +02:00
|
|
|
// d: Cursor after 'bar', should replicate the inner <div contenteditable> as a container
|
|
|
|
|
const dElm = document.querySelector('#d');
|
|
|
|
|
println(`Before: ${dElm.innerHTML}`);
|
|
|
|
|
const dAnchor = dElm.childNodes[1].firstChild.firstChild;
|
|
|
|
|
document.getSelection().setBaseAndExtent(dAnchor, 3, dAnchor, 3);
|
|
|
|
|
document.execCommand('insertParagraph');
|
|
|
|
|
println(`After: ${dElm.innerHTML}`);
|
2024-12-03 16:29:21 +01:00
|
|
|
});
|
|
|
|
|
</script>
|
