modify-line-grid-basic.tentative.html (1839B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Selection.modify(): line navigation on a grid container</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 7 <link rel="author" title="Mozilla" href="https://mozilla.org"> 8 <div id="container" style="display: grid; font-family: monospace"> 9 <p id="one">One</p> 10 <p id="two">Two</p> 11 <p id="three">Three</p> 12 <p id="four">Four</p> 13 </div> 14 <script> 15 const selection = getSelection(); 16 test(() => { 17 // Put the caret in the second character in "One" 18 selection.collapse(one.childNodes[0], 2); 19 // Move forward a line, selection should be after "Tw". 20 selection.modify("extend", "forward", "line") 21 assert_equals(selection.focusNode, two.childNodes[0]); 22 assert_equals(selection.focusOffset, 2); 23 24 // Move forward another line, selection should be after "Th". 25 selection.modify("extend", "forward", "line") 26 assert_equals(selection.focusNode, three.childNodes[0]); 27 assert_equals(selection.focusOffset, 2); 28 29 assert_equals(selection.toString().replaceAll("\r\n", "\n"), "e\n\nTwo\n\nTh"); 30 }, "forward"); 31 32 test(() => { 33 // Put the caret in the second character in "Three" 34 selection.collapse(three.childNodes[0], 2); 35 // Move backward a line, selection should be after "Tw". 36 selection.modify("extend", "backward", "line") 37 assert_equals(selection.focusNode, two.childNodes[0]); 38 assert_equals(selection.focusOffset, 2); 39 40 // Move backward another line, selection should be after "On". 41 selection.modify("extend", "backward", "line") 42 assert_equals(selection.focusNode, one.childNodes[0]); 43 assert_equals(selection.focusOffset, 2); 44 45 assert_equals(selection.toString().replaceAll("\r\n", "\n"), "e\n\nTwo\n\nTh"); 46 }, "backward"); 47 </script>