editing-around-select-element.tentative.html

<!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>
chromium/third_party/blink/web_tests/external/wpt/editing/other/editing-around-select-element.tentative.html
