<!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;';
const isMac = navigator.platform.indexOf('Mac') === 0;
const kBehaviors = window.internals ? ['mac', 'win'] : isMac ? ['mac'] : ['win'];
for (const behavior of kBehaviors) {
  if (window.internals) {
    internals.settings.setEditingBehavior(behavior);
    internals.settings.setSelectTrailingWhitespaceEnabled(behavior !== 'mac');
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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