test_cmd_absPos.html (7771B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Testing cmd_absPos command</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 8 </head> 9 <body contenteditable></body> 10 <script> 11 SimpleTest.waitForExplicitFinish(); 12 SimpleTest.waitForFocus(() => { 13 (function testTogglingPositionInBodyChildText() { 14 const description = "testTogglingPositionInBodyChildText"; 15 const textNode = document.createTextNode("abc"); 16 document.body.appendChild(textNode); 17 getSelection().collapse(textNode, 1); 18 19 SpecialPowers.doCommand(window, "cmd_absPos"); 20 const div = textNode.parentNode; 21 is( 22 div.tagName.toLowerCase(), 23 "div", 24 `${ 25 description 26 }: a <div> element should be created and the text node should be wrapped in it` 27 ); 28 is( 29 div.style.position, 30 "absolute", 31 `${description}: position of the <div> should be set to "absolute"` 32 ); 33 isnot( 34 div.style.top, 35 "", 36 `${description}: top of the <div> should be set` 37 ); 38 isnot( 39 div.style.left, 40 "", 41 `${description}: left of the <div> should be set` 42 ); 43 ok( 44 getSelection().isCollapsed, 45 `${ 46 description 47 }: selection should be collapsed (making it absolutely positioned)` 48 ); 49 // Collapsing selection to start of the absolutely positioned <div> seems 50 // odd. Why don't we keep selection in the new <div>? 51 is( 52 getSelection().focusNode, 53 div, 54 `${ 55 description 56 }: selection should be collapsed in the absolutely positioned <div>` 57 ); 58 is( 59 getSelection().focusOffset, 60 0, 61 `${ 62 description 63 }: selection should be collapsed at start of the absolutely positioned <div>` 64 ); 65 66 SpecialPowers.doCommand(window, "cmd_absPos"); 67 ok( 68 !div.isConnected, 69 `${description}: the <div> should be removed from the <body>` 70 ); 71 is( 72 div.style.position, 73 "", 74 `${description}: position of the <div> should be unset` 75 ); 76 is( 77 div.style.top, 78 "", 79 `${description}: top of the <div> should be unset` 80 ); 81 is( 82 div.style.left, 83 "", 84 `${description}: left of the <div> should be unset` 85 ); 86 ok( 87 getSelection().isCollapsed, 88 `${ 89 description 90 }: selection should be collapsed (making it in normal flow)` 91 ); 92 // If we change the above behavior, we can keep selection collapsed in the 93 // text node here. 94 is( 95 getSelection().focusNode, 96 document.body, 97 `${description}: selection should be collapsed in the <body>` 98 ); 99 todo_is( 100 getSelection().focusNode.childNodes.item( 101 getSelection().focusOffset 102 ), 103 textNode, 104 `${description}: selection should be collapsed after the text node` 105 ); 106 textNode.remove(); 107 })(); 108 109 (function testTogglingPositionOfDivContainingCaret() { 110 const description = "testTogglingPositionOfDivContainingCaret"; 111 const div = document.createElement("div"); 112 div.innerHTML = "abc"; 113 document.body.appendChild(div); 114 const textNode = div.firstChild; 115 getSelection().collapse(textNode, 1); 116 SpecialPowers.doCommand(window, "cmd_absPos"); 117 is( 118 div.style.position, 119 "absolute", 120 `${description}: position of the <div> should be set to "absolute"` 121 ); 122 isnot( 123 div.style.top, 124 "", 125 `${description}: top of the <div> should be set` 126 ); 127 isnot( 128 div.style.left, 129 "", 130 `${description}: left of the <div> should be set` 131 ); 132 ok( 133 getSelection().isCollapsed, 134 `${ 135 description 136 }: selection should be collapsed (making it absolutely positioned)` 137 ); 138 is( 139 getSelection().focusNode, 140 textNode, 141 `${ 142 description 143 }: selection should be collapsed in the absolutely positioned <div>` 144 ); 145 is( 146 getSelection().focusOffset, 147 1, 148 `${ 149 description 150 }: selection should be collapsed at same offset in the absolutely positioned <div>` 151 ); 152 153 SpecialPowers.doCommand(window, "cmd_absPos"); 154 ok( 155 !div.isConnected, 156 `${description}: the <div> should be removed from the <body>` 157 ); 158 is( 159 div.style.position, 160 "", 161 `${description}: position of the <div> should be unset` 162 ); 163 is( 164 div.style.top, 165 "", 166 `${description}: top of the <div> should be unset` 167 ); 168 is( 169 div.style.left, 170 "", 171 `${description}: left of the <div> should be unset` 172 ); 173 ok( 174 getSelection().isCollapsed, 175 `${ 176 description 177 }: selection should be collapsed (making it in normal flow)` 178 ); 179 is( 180 getSelection().focusNode, 181 textNode, 182 `${description}: selection should be collapsed in the <div>` 183 ); 184 is( 185 getSelection().focusOffset, 186 1, 187 `${description}: selection should be collapsed at same offset in the <div>` 188 ); 189 div.remove(); 190 textNode.remove(); 191 })(); 192 193 (function testTogglingPositionOfDivContainingSelectionRange() { 194 const description = "testTogglingPositionOfDivContainingSelectionRange"; 195 const div = document.createElement("div"); 196 div.innerHTML = "abc"; 197 document.body.appendChild(div); 198 const textNode = div.firstChild; 199 getSelection().setBaseAndExtent(textNode, 1, textNode, 2); 200 SpecialPowers.doCommand(window, "cmd_absPos"); 201 is( 202 div.style.position, 203 "absolute", 204 `${description}: position of the <div> should be set to "absolute"` 205 ); 206 isnot( 207 div.style.top, 208 "", 209 `${description}: top of the <div> should be set` 210 ); 211 isnot( 212 div.style.left, 213 "", 214 `${description}: left of the <div> should be set` 215 ); 216 is( 217 getSelection().anchorNode, 218 textNode, 219 `${ 220 description 221 }: selection should start from the text node in the absolutely positioned <div>` 222 ); 223 is( 224 getSelection().anchorOffset, 225 1, 226 `${ 227 description 228 }: selection should start from "b" in the text node in the absolutely positioned <div>` 229 ); 230 is( 231 getSelection().focusNode, 232 textNode, 233 `${ 234 description 235 }: selection should end in the text node in the absolutely positioned <div>` 236 ); 237 is( 238 getSelection().focusOffset, 239 2, 240 `${ 241 description 242 }: selection should end after "b" absolutely positioned <div>` 243 ); 244 245 getSelection().setBaseAndExtent(textNode, 1, textNode, 2); 246 SpecialPowers.doCommand(window, "cmd_absPos"); 247 ok( 248 !div.isConnected, 249 `${description}: the <div> should be removed from the <body>` 250 ); 251 is( 252 div.style.position, 253 "", 254 `${description}: position of the <div> should be unset` 255 ); 256 is( 257 div.style.top, 258 "", 259 `${description}: top of the <div> should be unset` 260 ); 261 is( 262 div.style.left, 263 "", 264 `${description}: left of the <div> should be unset` 265 ); 266 is( 267 getSelection().anchorNode, 268 textNode, 269 `${description}: selection should start from the text node in the <div>` 270 ); 271 is( 272 getSelection().anchorOffset, 273 1, 274 `${ 275 description 276 }: selection should start from "b" in the text node in the <div>` 277 ); 278 is( 279 getSelection().focusNode, 280 textNode, 281 `${description}: selection should end in the text node in the <div>` 282 ); 283 is( 284 getSelection().focusOffset, 285 2, 286 `${description}: selection should end after "b" <div>` 287 ); 288 div.remove(); 289 textNode.remove(); 290 })(); 291 292 document.body.removeAttribute("contenteditable"); 293 SimpleTest.finish(); 294 }); 295 </script> 296 </html>