| <!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> |