Add an editing command for creating and inserting child lists
[WebKit-https.git] / LayoutTests / editing / execCommand / insert-nested-lists.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../editing.js"></script>
5 <script src="../../resources/dump-as-markup.js"></script>
6 </head>
7 <body>
8 <div contenteditable id="editor"></div>
9 </body>
10 <script>
11 (async () => {
12     Markup.waitUntilDone();
13     Markup.description("Verifies that 'InsertNestedUnorderedList' and 'InsertNestedOrderedList' work as expected. This test requires WebKitTestRunner or DumpRenderTree.");
14     editor.focus();
15
16     [..."foo"].map(typeCharacterCommand);
17     document.execCommand("InsertNestedUnorderedList");
18     Markup.dump("editor", "After unordered list insertion");
19
20     document.execCommand("InsertNestedOrderedList");
21     [..."bar"].map(typeCharacterCommand);
22     Markup.dump("editor", "After typing and ordered sublist insertion");
23
24     // By default, AppKit on macOS coalesces undo operations that occur within the same runloop. Wait until the next
25     // runloop before inserting another unordered list to ensure that it gets its own entry in the undo stack.
26     await new Promise(resolve => requestAnimationFrame(resolve));
27
28     document.execCommand("InsertNestedUnorderedList");
29     Markup.dump("editor", "After the second unordered list insertion");
30
31     undoCommand();
32     Markup.dump("editor", "After undoing the last list insertion");
33
34     redoCommand();
35     Markup.dump("editor", "After redoing the last list insertion");
36
37     execExtendSelectionBackwardByLineCommand();
38     document.execCommand("InsertNestedUnorderedList");
39     Markup.dump("editor", "After selecting a range and inserting another unordered list");
40
41     document.execCommand("Outdent");
42     Markup.dump("editor", "After outdenting");
43
44     [..."baz"].map(typeCharacterCommand);
45     document.execCommand("Outdent");
46     Markup.dump("editor", "After outdenting again");
47     Markup.notifyDone();
48 })();
49 </script>
50 </html>