<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../assert_selection.js"></script>
<script>
// Soft line break before white space
const kStyle = 'line-break:before-white-space; width: 100px; font: 20px monospace;';
selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">|line1 line2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">^line1 |line2 a line3</div>`,
  '21-0 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">l|ine1 line2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">l^ine1 |line2 a line3</div>`,
  '21-1 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">li|ne1 line2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">li^ne1 |line2 a line3</div>`,
  '21-2 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">lin|e1 line2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">lin^e1 |line2 a line3</div>`,
  '21-3 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line|1 line2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line^1 |line2 a line3</div>`,
  '21-4 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1| line2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1^ |line2 a line3</div>`,
  '21-5 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 |line2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 ^line2 a |line3</div>`,
  '21-6 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 l|ine2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 l^ine2 a |line3</div>`,
  '21-7 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 li|ne2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 li^ne2 a |line3</div>`,
  '21-8 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 lin|e2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 lin^e2 a |line3</div>`,
  '21-9 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line|2 a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line^2 a |line3</div>`,
  '21-10 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line2| a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line2^ a |line3</div>`,
  '21-11 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line2 |a line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line2 ^a |line3</div>`,
  '21-12 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line2 a| line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line2 a^ |line3</div>`,
  '21-13 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line2 a |line3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line2 a ^line3|</div>`,
  '21-14 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line2 a l|ine3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line2 a l^ine3|</div>`,
  '21-15 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line2 a li|ne3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line2 a li^ne3|</div>`,
  '21-16 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line2 a lin|e3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line2 a lin^e3|</div>`,
  '21-17 rtl forward lineboundary');

selection_test(
  `<div contenteditable dir="rtl" style="${kStyle}">line1 line2 a line|3</div>`,
  selection => selection.modify('extend', 'forward', 'lineboundary'),
  `<div contenteditable dir="rtl" style="line-break:before-white-space; width: 100px; font: 20px monospace;">line1 line2 a line^3|</div>`,
  '21-18 rtl forward lineboundary');
</script>