<!doctype html> <meta charset=utf-8> <title>Selection.modify(): line navigation on a row-oriented flex container</title> <script src=/resources/testharness.js></script> <script src=/resources/testharnessreport.js></script> <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> <link rel="author" title="Mozilla" href="https://mozilla.org"> <style> p { display: flex } </style> <div id="container" style="font-family: monospace"> <p><div></div><div id="one">One</div></p> <p><div></div><div id="two">Two</div></p> <p><div></div><div id="three">Three</div></p> <p><div></div><div id="four">Four</div></p> </div> <script> const selection = getSelection(); test(() => { // Put the caret in the second character in "One" selection.collapse(one.childNodes[0], 2); // Move forward a line, selection should be after "Tw". selection.modify("extend", "forward", "line") assert_equals(selection.focusNode, two.childNodes[0]); assert_equals(selection.focusOffset, 2); // Move forward another line, selection should be after "Th". selection.modify("extend", "forward", "line") assert_equals(selection.focusNode, three.childNodes[0]); assert_equals(selection.focusOffset, 2); assert_equals(selection.toString().replaceAll("\r\n", "\n"), "e\n\nTwo\n\nTh"); }, "forward"); test(() => { // Put the caret in the second character in "Three" selection.collapse(three.childNodes[0], 2); // Move backward a line, selection should be after "Tw". selection.modify("extend", "backward", "line") assert_equals(selection.focusNode, two.childNodes[0]); assert_equals(selection.focusOffset, 2); // Move backward another line, selection should be after "On". selection.modify("extend", "backward", "line") assert_equals(selection.focusNode, one.childNodes[0]); assert_equals(selection.focusOffset, 2); assert_equals(selection.toString().replaceAll("\r\n", "\n"), "e\n\nTwo\n\nTh"); }, "backward"); </script>