ladybird/Tests/LibWeb/Text/input/Editing/execCommand-insertLinebreak.html

<!DOCTYPE html>
<script src="../include.js"></script>
<div id="a" contenteditable>foobar</div>
<div id="b" contenteditable><p style="white-space: pre">foobar</p></div>
<div id="c" contenteditable><p style="white-space: pre">foobar</p></div>
<div id="d" contenteditable>foo</div>
<script>
    test(() => {
        let divA = document.querySelector('div#a');
        let divB = document.querySelector('div#b');
        let divC = document.querySelector('div#c');
        let divD = document.querySelector('div#d');

        document.body.offsetWidth // Force a layout

        // A: Insert linebreak after 'foo'
        println(`Before: "${divA.innerHTML}"`);
        var range = document.createRange();
        range.setStart(divA.firstChild, 3);
        getSelection().addRange(range);
        document.execCommand('insertLinebreak');
        println(`After: "${divA.innerHTML}"`);
        getSelection().empty();

        // B: Insert linebreak after 'foo'
        println(`Before: "${divB.innerHTML}"`);
        var range = document.createRange();
        range.setStart(divB.firstChild.firstChild, 3);
        getSelection().addRange(range);
        document.execCommand('insertLinebreak');
        println(`After: "${divB.innerHTML}"`);
        getSelection().empty();

        // C: Insert linebreak after 'bar'
        println(`Before: "${divC.innerHTML}"`);
        var range = document.createRange();
        range.setStart(divC.firstChild.firstChild, 6);
        getSelection().addRange(range);
        document.execCommand('insertLinebreak');
        println(`After: "${divC.innerHTML}"`);
        getSelection().empty();

        // D: Insert linebreak after 'foo'
        println(`Before: "${divD.innerHTML}"`);
        var range = document.createRange();
        range.setStart(divD.firstChild, 3);
        getSelection().addRange(range);
        document.execCommand('insertLinebreak');
        println(`After: "${divD.innerHTML}"`);
        getSelection().empty();
    });
</script>
Meta: Add DOCTYPEs to most text tests 2025-03-18 19:28:35 +01:00			`<!DOCTYPE html>`
LibWeb: Implement document.execCommand('insertLinebreak') 2024-12-10 16:16:56 +01:00			`<script src="../include.js"></script>`
			`<div id="a" contenteditable>foobar</div>`
			`<div id="b" contenteditable><p style="white-space: pre">foobar</p></div>`
			`<div id="c" contenteditable><p style="white-space: pre">foobar</p></div>`
LibWeb: Do not rely on the layout tree for collapsed line breaks The editing command that relies the most on this, `insertLinebreak`, did not perform a layout update after inserting a `<br>` which caused this algorithm to always return false. But instead of actually building the layout tree needlessly, we can check the DOM tree instead. 2025-05-01 12:27:42 +02:00			`<div id="d" contenteditable>foo</div>`
LibWeb: Implement document.execCommand('insertLinebreak') 2024-12-10 16:16:56 +01:00			`<script>`
			`test(() => {`
			`let divA = document.querySelector('div#a');`
			`let divB = document.querySelector('div#b');`
			`let divC = document.querySelector('div#c');`
LibWeb: Do not rely on the layout tree for collapsed line breaks The editing command that relies the most on this, `insertLinebreak`, did not perform a layout update after inserting a `<br>` which caused this algorithm to always return false. But instead of actually building the layout tree needlessly, we can check the DOM tree instead. 2025-05-01 12:27:42 +02:00			`let divD = document.querySelector('div#d');`
LibWeb: Implement document.execCommand('insertLinebreak') 2024-12-10 16:16:56 +01:00
			`document.body.offsetWidth // Force a layout`

			`// A: Insert linebreak after 'foo'`
			println(`Before: "${divA.innerHTML}"`);
			`var range = document.createRange();`
			`range.setStart(divA.firstChild, 3);`
			`getSelection().addRange(range);`
			`document.execCommand('insertLinebreak');`
			println(`After: "${divA.innerHTML}"`);
			`getSelection().empty();`

			`// B: Insert linebreak after 'foo'`
			println(`Before: "${divB.innerHTML}"`);
			`var range = document.createRange();`
			`range.setStart(divB.firstChild.firstChild, 3);`
			`getSelection().addRange(range);`
			`document.execCommand('insertLinebreak');`
			println(`After: "${divB.innerHTML}"`);
			`getSelection().empty();`

			`// C: Insert linebreak after 'bar'`
			println(`Before: "${divC.innerHTML}"`);
			`var range = document.createRange();`
			`range.setStart(divC.firstChild.firstChild, 6);`
			`getSelection().addRange(range);`
			`document.execCommand('insertLinebreak');`
			println(`After: "${divC.innerHTML}"`);
			`getSelection().empty();`
LibWeb: Do not rely on the layout tree for collapsed line breaks The editing command that relies the most on this, `insertLinebreak`, did not perform a layout update after inserting a `<br>` which caused this algorithm to always return false. But instead of actually building the layout tree needlessly, we can check the DOM tree instead. 2025-05-01 12:27:42 +02:00
			`// D: Insert linebreak after 'foo'`
			println(`Before: "${divD.innerHTML}"`);
			`var range = document.createRange();`
			`range.setStart(divD.firstChild, 3);`
			`getSelection().addRange(range);`
			`document.execCommand('insertLinebreak');`
			println(`After: "${divD.innerHTML}"`);
			`getSelection().empty();`
LibWeb: Implement document.execCommand('insertLinebreak') 2024-12-10 16:16:56 +01:00			`});`
			`</script>`