diff options
Diffstat (limited to 'testing/web-platform/tests/editing/other/editing-around-select-element.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/editing/other/editing-around-select-element.tentative.html | 310 |
1 files changed, 310 insertions, 0 deletions
diff --git a/testing/web-platform/tests/editing/other/editing-around-select-element.tentative.html b/testing/web-platform/tests/editing/other/editing-around-select-element.tentative.html new file mode 100644 index 0000000000..9182216efd --- /dev/null +++ b/testing/web-platform/tests/editing/other/editing-around-select-element.tentative.html @@ -0,0 +1,310 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test execCommand with selection around select element</title> +<meta name="timeout" content="long"> +<meta name="variant" content="?delete"> +<meta name="variant" content="?forwardDelete"> +<meta name="variant" content="?insertText"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script> +"use strict"; + +const command = document.location.search.substring(1); +const insertText = command === "insertText" ? "XYZ" : ""; + +/** + * Typically, browsers do not allow to move caret or select part of <select>, + * <option> and <optgroup>, but Selection API can do it (but browsers don't + * show the result). In this case, any elements under `<select>` element + * shouldn't be modified (deleted) for avoiding unexpected data loss for the + * users. + */ + +promise_test(async () => { + await new Promise(resolve => { + addEventListener("load", resolve, {once: true}); + }); +}); + +function addPromiseTest(desc, initFunc, expectedResults) { + promise_test(async () => { + initFunc(); + document.execCommand(command, false, insertText); + if (Array.isArray(expectedResults)) { + assert_in_array(document.body.innerHTML.replace(/(=""|<br>)/g, ""), expectedResults); + } else { + assert_equals(document.body.innerHTML.replace(/(=""|<br>)/g, ""), expectedResults); + } + }, `execCommand(${command}, false, "${insertText}") in ${desc}`); +} + +for (const multiple of ["", " multiple"]) { + addPromiseTest( + `<div contenteditable><p>ab[c</p><select${multiple}><option>d]ef</option></select></div>: shouldn't modify in <option>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select></div>`; + getSelection().setBaseAndExtent( + document.querySelector("p").firstChild, + 2, + document.querySelector("option").firstChild, + 1 + ); + }, + [ + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select></div>`, + `<div contenteditable><p>ab${insertText}</p><select${multiple}><option>def</option></select></div>`, + ] + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}><option>d[]ef</option></select></div>: shouldn't modify in <option>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select></div>`; + getSelection().collapse( + document.querySelector("option").firstChild, + 1 + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select></div>`, + ); + + addPromiseTest( + `<div contenteditable><select${multiple}><option>ab[c</option></select><p>d]ef</p></div>: shouldn't modify in <option>`, + () => { + document.body.innerHTML = + `<div contenteditable><select${multiple}><option>abc</option></select><p>def</p></div>`; + getSelection().setBaseAndExtent( + document.querySelector("option").firstChild, + 2, + document.querySelector("p").firstChild, + 1 + ); + }, + [ + `<div contenteditable><select${multiple}><option>abc</option></select><p>def</p></div>`, + `<div contenteditable><select${multiple}><option>abc</option></select><p>${insertText}ef</p></div>`, + ] + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}><option>{}def</option></select><p>ghi</p></div>: shouldn't modify in <option>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select><p>ghi</p></div>`; + getSelection().collapse( + document.querySelector("option"), + 0 + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select><p>ghi</p></div>` + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}><option>def{}</option></select><p>ghi</p></div>: shouldn't modify in <option>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select><p>ghi</p></div>`; + getSelection().collapse( + document.querySelector("option"), + 1 + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select><p>ghi</p></div>` + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}><option>{def}</option></select><p>ghi</p></div>: shouldn't modify in <option>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select><p>ghi</p></div>`; + getSelection().selectAllChildren( + document.querySelector("option") + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><option>def</option></select><p>ghi</p></div>` + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}><option>{def</option><option>ghi}</option></select><p>jkl</p></div>: shouldn't join <option>s`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>`; + getSelection().setBaseAndExtent( + document.querySelector("option"), + 0, + document.querySelector("option + option"), + 1, + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>` + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}>{<option>def</option>}<option>ghi</option></select><p>jkl</p></div>: shouldn't delete <option>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>`; + getSelection().setBaseAndExtent( + document.querySelector("select"), + 0, + document.querySelector("select"), + 1, + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>` + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}><option>def</option>{<option>ghi</option>}</select><p>jkl</p></div>: shouldn't delete <option>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>`; + getSelection().setBaseAndExtent( + document.querySelector("select"), + 1, + document.querySelector("select"), + 2, + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>` + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}>{<option>def</option><option>ghi</option>}</select><p>jkl</p></div>: shouldn't delete <option>s nor <select${multiple}>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>`; + getSelection().selectAllChildren( + document.querySelector("select") + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>` + ); + + addPromiseTest( + `<div contenteditable><p>abc</p><select${multiple}><optgroup>{<option>def</option><option>ghi</option>}</optgroup></select><p>jkl</p></div>: shouldn't delete <option>, <optgroup> nor <select${multiple}>`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><optgroup><option>def</option><option>ghi</option></optgroup></select><p>jkl</p></div>`; + getSelection().selectAllChildren( + document.querySelector("optgroup") + ); + }, + `<div contenteditable><p>abc</p><select${multiple}><optgroup><option>def</option><option>ghi</option></optgroup></select><p>jkl</p></div>` + ); + + addPromiseTest( + `<div contenteditable><p>abc</p>{<select${multiple}><option>def</option><option>ghi</option></select>}<p>jkl</p></div>: <select${multiple}> element itself should be removable`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>`; + getSelection().setBaseAndExtent( + document.querySelector("div"), + 1, + document.querySelector("div"), + 2, + ); + }, + [ + `<div contenteditable><p>abc</p>${insertText}<p>jkl</p></div>`, + `<div contenteditable><p>abc${insertText}</p><p>jkl</p></div>`, + `<div contenteditable><p>abc</p><p>${insertText}jkl</p></div>`, + ] + ); + + addPromiseTest( + `<div contenteditable><p>abc</p>{<select${multiple}><optgroup><option>def</option><option>ghi</option></optgroup></select>}<p>jkl</p></div>: <select${multiple}> element itself should be removable`, + () => { + document.body.innerHTML = + `<div contenteditable><p>abc</p><select${multiple}><option>def</option><option>ghi</option></select><p>jkl</p></div>`; + getSelection().setBaseAndExtent( + document.querySelector("div"), + 1, + document.querySelector("div"), + 2, + ); + }, + [ + `<div contenteditable><p>abc</p>${insertText}<p>jkl</p></div>`, + `<div contenteditable><p>abc${insertText}</p><p>jkl</p></div>`, + `<div contenteditable><p>abc</p><p>${insertText}jkl</p></div>`, + ] + ); + + addPromiseTest( + `<select${multiple} contenteditable>{<option>abc</option><option>def</option>}</select>: shouldn't delete <option>s`, + () => { + document.body.innerHTML = + `<select${multiple} contenteditable><option>abc</option><option>def</option></select>`; + getSelection().selectAllChildren( + document.querySelector("select") + ); + }, + `<select${multiple} contenteditable><option>abc</option><option>def</option></select>` + ); + + addPromiseTest( + `<select${multiple}><option contenteditable>{abc}</option><option>def</option></select>: shouldn't modify <option>`, + () => { + document.body.innerHTML = + `<select${multiple}><option contenteditable>abc</option><option>def</option></select>`; + getSelection().selectAllChildren( + document.querySelector("option") + ); + }, + `<select${multiple}><option contenteditable>abc</option><option>def</option></select>` + ); + + addPromiseTest( + `<select${multiple}><optgroup contenteditable>{<option>abc</option><option>def</option>}</optgroup></select>: shouldn't delete <option>s`, + () => { + document.body.innerHTML = + `<select${multiple}><optgroup contenteditable><option>abc</option><option>def</option></optgroup></select>`; + getSelection().selectAllChildren( + document.querySelector("optgroup") + ); + }, + `<select${multiple}><optgroup contenteditable><option>abc</option><option>def</option></optgroup></select>` + ); + + addPromiseTest( + `<select${multiple}><optgroup contenteditable><option>{abc}</option><option>def</option></optgroup></select>: shouldn't delete <option>s nor optgroup`, + () => { + document.body.innerHTML = + `<select${multiple}><optgroup contenteditable><option>abc</option><option>def</option></optgroup></select>`; + getSelection().selectAllChildren( + document.querySelector("option") + ); + }, + `<select${multiple}><optgroup contenteditable><option>abc</option><option>def</option></optgroup></select>` + ); +} + +addPromiseTest( + "<optgroup contenteditable><option>{abc}</option><option>def</option></optgroup>: shouldn't delete <option>s nor optgroup", + () => { + document.body.innerHTML = + "<optgroup contenteditable><option>abc</option><option>def</option></optgroup>"; + getSelection().selectAllChildren( + document.querySelector("option") + ); + }, + `<optgroup contenteditable><option>abc</option><option>def</option></optgroup>` +); + +addPromiseTest( + "<option contenteditable>{abc}</option>: shouldn't modify <option>", + () => { + document.body.innerHTML = + "<option contenteditable>abc</option>"; + getSelection().selectAllChildren( + document.querySelector("option") + ); + }, + `<option contenteditable>abc</option>` +); +</script> +<body></body>
\ No newline at end of file |