Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /editing/other/editing-style-of-range-around-void-element-child.tentative.html - WPT Dashboard Interop Dashboard
<!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>