editing-style-of-range-around-void-element-child.tentative.html (4582B)
1 <!doctype html> 2 <html> 3 <meta charset=utf-8> 4 <title>Test toggling style a range which starts from or ends by a child of a void element</title> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <body> 8 <div contenteditable></div> 9 <script> 10 "use strict"; 11 12 /** 13 * The expected behavior is based on Chromium, but this is edge case tests. 14 * So, failures of this are not important unless crash. 15 */ 16 17 const editor = document.querySelector("div[contenteditable]"); 18 19 promise_test(async () => { 20 await new Promise(resolve => { 21 addEventListener("load", () => { 22 assert_true(true, "The document is loaded"); 23 resolve(); 24 }, { once: true }); 25 }); 26 }, "Waiting for load..."); 27 28 promise_test(async () => { 29 editor.innerHTML = "<meta>bar"; 30 const meta = editor.querySelector("meta"); 31 const text = document.createTextNode("foo"); 32 meta.append(text); 33 assert_equals(meta.firstChild, text); 34 getSelection().setBaseAndExtent(meta.firstChild, 1, meta.nextSibling, 1); 35 document.execCommand("bold"); 36 assert_in_array( 37 editor.innerHTML, 38 [ 39 "<meta><b>b</b>ar", 40 "<meta><b>b</b>ar<br>", 41 ] 42 ); 43 }, "Try to apply style from void element child"); 44 45 promise_test(async () => { 46 editor.innerHTML = "foo<meta>"; 47 const meta = editor.querySelector("meta"); 48 const text = document.createTextNode("bar"); 49 meta.append(text); 50 assert_equals(meta.firstChild, text); 51 getSelection().setBaseAndExtent(editor.firstChild, 1, meta.firstChild, 2); 52 document.execCommand("bold"); 53 assert_in_array( 54 editor.innerHTML, 55 [ 56 "f<b>oo</b><meta>", 57 "f<b>oo</b><meta><br>", 58 ] 59 ); 60 }, "Try to apply style by void element child"); 61 62 promise_test(async () => { 63 editor.innerHTML = "<meta>"; 64 const meta = editor.querySelector("meta"); 65 const text = document.createTextNode("foo"); 66 meta.append(text); 67 assert_equals(meta.firstChild, text); 68 getSelection().setBaseAndExtent(meta.firstChild, 1, meta.firstChild, 2); 69 document.execCommand("bold"); 70 assert_in_array( 71 editor.innerHTML, 72 [ 73 "<meta>", 74 "<meta><br>", 75 ] 76 ); 77 }, "Try to apply style in void element child"); 78 79 promise_test(async () => { 80 editor.innerHTML = "<meta>bar"; 81 const meta = editor.querySelector("meta"); 82 meta.setAttribute("style", "font-weight: bold"); 83 const text = document.createTextNode("foo"); 84 meta.append(text); 85 assert_equals(meta.firstChild, text); 86 getSelection().setBaseAndExtent(meta.firstChild, 1, meta.nextSibling, 1); 87 document.execCommand("bold"); 88 assert_in_array( 89 editor.innerHTML, 90 [ 91 "<meta><b>b</b>ar", 92 "<meta><b>b</b>ar<br>", 93 "<meta style=\"\"><b>b</b>ar", 94 "<meta style=\"\"><b>b</b>ar<br>", 95 ] 96 ); 97 }, "Try to remove style from void element child"); 98 99 promise_test(async () => { 100 editor.innerHTML = "<meta>bar"; 101 const meta = editor.querySelector("meta"); 102 meta.setAttribute("style", "font-weight: bold"); 103 const text = document.createTextNode("foo"); 104 meta.append(text); 105 assert_equals(meta.firstChild, text); 106 getSelection().setBaseAndExtent(meta.firstChild, meta.firstChild.length, meta.nextSibling, 1); 107 document.execCommand("bold"); 108 assert_in_array( 109 editor.innerHTML, 110 [ 111 "<meta><b>b</b>ar", 112 "<meta><b>b</b>ar<br>", 113 "<meta style=\"\"><b>b</b>ar", 114 "<meta style=\"\"><b>b</b>ar<br>", 115 ] 116 ); 117 }, "Try to remove style from end of void element child"); 118 119 promise_test(async () => { 120 editor.innerHTML = "foo<meta>"; 121 const meta = editor.querySelector("meta"); 122 const text = document.createTextNode("bar"); 123 meta.append(text); 124 assert_equals(meta.firstChild, text); 125 getSelection().setBaseAndExtent(editor.firstChild, 1, meta.firstChild, 2); 126 document.execCommand("bold"); 127 assert_in_array( 128 editor.innerHTML, 129 [ 130 "f<b>oo</b><meta>", 131 "f<b>oo</b><meta><br>", 132 "f<b>oo</b><meta style=\"\">", 133 "f<b>oo</b><meta style=\"\"><br>", 134 ] 135 ); 136 }, "Try to remove style by void element child"); 137 138 promise_test(async () => { 139 editor.innerHTML = "foo<meta>"; 140 const meta = editor.querySelector("meta"); 141 const text = document.createTextNode("bar"); 142 meta.append(text); 143 assert_equals(meta.firstChild, text); 144 getSelection().setBaseAndExtent(editor.firstChild, 1, meta.firstChild, 0); 145 document.execCommand("bold"); 146 assert_in_array( 147 editor.innerHTML, 148 [ 149 "f<b>oo</b><meta>", 150 "f<b>oo</b><meta><br>", 151 "f<b>oo</b><meta style=\"\">", 152 "f<b>oo</b><meta style=\"\"><br>", 153 ] 154 ); 155 }, "Try to remove style by start of void element child"); 156 </script> 157 </body>