editing-style-of-range-around-void-element-child.tentative.html

<!doctype html>
<html>
<meta charset=utf-8>
<title>Test toggling style a range which starts from or ends by a child of a void element</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<body>
<div contenteditable></div>
<script>
"use strict";

/**
 * The expected behavior is based on Chromium, but this is edge case tests.
 * So, failures of this are not important unless crash.
 */

const editor = document.querySelector("div[contenteditable]");

promise_test(async () => {
  await new Promise(resolve => {
    addEventListener("load", () => {
      assert_true(true, "The document is loaded");
      resolve();
    }, { once: true });
  });
}, "Waiting for load...");

promise_test(async () => {
  editor.innerHTML = "<meta>bar";
  const meta = editor.querySelector("meta");
  const text = document.createTextNode("foo");
  meta.append(text);
  assert_equals(meta.firstChild, text);
  getSelection().setBaseAndExtent(meta.firstChild, 1, meta.nextSibling, 1);
  document.execCommand("bold");
  assert_in_array(
    editor.innerHTML,
    [
      "<meta><b>b</b>ar",
      "<meta><b>b</b>ar<br>",
    ]
  );
}, "Try to apply style from void element child");

promise_test(async () => {
  editor.innerHTML = "foo<meta>";
  const meta = editor.querySelector("meta");
  const text = document.createTextNode("bar");
  meta.append(text);
  assert_equals(meta.firstChild, text);
  getSelection().setBaseAndExtent(editor.firstChild, 1, meta.firstChild, 2);
  document.execCommand("bold");
  assert_in_array(
    editor.innerHTML,
    [
      "f<b>oo</b><meta>",
      "f<b>oo</b><meta><br>",
    ]
  );
}, "Try to apply style by void element child");

promise_test(async () => {
  editor.innerHTML = "<meta>";
  const meta = editor.querySelector("meta");
  const text = document.createTextNode("foo");
  meta.append(text);
  assert_equals(meta.firstChild, text);
  getSelection().setBaseAndExtent(meta.firstChild, 1, meta.firstChild, 2);
  document.execCommand("bold");
  assert_in_array(
    editor.innerHTML,
    [
      "<meta>",
      "<meta><br>",
    ]
  );
}, "Try to apply style in void element child");

promise_test(async () => {
  editor.innerHTML = "<meta>bar";
  const meta = editor.querySelector("meta");
  meta.setAttribute("style", "font-weight: bold");
  const text = document.createTextNode("foo");
  meta.append(text);
  assert_equals(meta.firstChild, text);
  getSelection().setBaseAndExtent(meta.firstChild, 1, meta.nextSibling, 1);
  document.execCommand("bold");
  assert_in_array(
    editor.innerHTML,
    [
      "<meta><b>b</b>ar",
      "<meta><b>b</b>ar<br>",
      "<meta style=\"\"><b>b</b>ar",
      "<meta style=\"\"><b>b</b>ar<br>",
    ]
  );
}, "Try to remove style from void element child");

promise_test(async () => {
  editor.innerHTML = "<meta>bar";
  const meta = editor.querySelector("meta");
  meta.setAttribute("style", "font-weight: bold");
  const text = document.createTextNode("foo");
  meta.append(text);
  assert_equals(meta.firstChild, text);
  getSelection().setBaseAndExtent(meta.firstChild, meta.firstChild.length, meta.nextSibling, 1);
  document.execCommand("bold");
  assert_in_array(
    editor.innerHTML,
    [
      "<meta><b>b</b>ar",
      "<meta><b>b</b>ar<br>",
      "<meta style=\"\"><b>b</b>ar",
      "<meta style=\"\"><b>b</b>ar<br>",
    ]
  );
}, "Try to remove style from end of void element child");

promise_test(async () => {
  editor.innerHTML = "foo<meta>";
  const meta = editor.querySelector("meta");
  const text = document.createTextNode("bar");
  meta.append(text);
  assert_equals(meta.firstChild, text);
  getSelection().setBaseAndExtent(editor.firstChild, 1, meta.firstChild, 2);
  document.execCommand("bold");
  assert_in_array(
    editor.innerHTML,
    [
      "f<b>oo</b><meta>",
      "f<b>oo</b><meta><br>",
      "f<b>oo</b><meta style=\"\">",
      "f<b>oo</b><meta style=\"\"><br>",
    ]
  );
}, "Try to remove style by void element child");

promise_test(async () => {
  editor.innerHTML = "foo<meta>";
  const meta = editor.querySelector("meta");
  const text = document.createTextNode("bar");
  meta.append(text);
  assert_equals(meta.firstChild, text);
  getSelection().setBaseAndExtent(editor.firstChild, 1, meta.firstChild, 0);
  document.execCommand("bold");
  assert_in_array(
    editor.innerHTML,
    [
      "f<b>oo</b><meta>",
      "f<b>oo</b><meta><br>",
      "f<b>oo</b><meta style=\"\">",
      "f<b>oo</b><meta style=\"\"><br>",
    ]
  );
}, "Try to remove style by start of void element child");
</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/editing/other/editing-style-of-range-around-void-element-child.tentative.html
