move-vertically-with-paddings-borders.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
// This test ensures Blink takes paddings and borders into account when moving vertically.

const kStyle = `
<style>
p {
  font: 20px monospace;
  width: 10em;
  word-wrap: normal
}
</style>`;

selection_test(
    [
      kStyle,
      '<p contenteditable>le|ft1 <a href>right1 left2</a> right2</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href>right1 le|ft2</a> right2</p>'
    ],
    '1-1 Forward from left1 to left2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href>ri|ght1 left2</a> right2</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href>right1 left2</a> ri|ght2</p>'
    ],
    '1-2 Forward from right1 to right2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href>right1 le|ft2</a> right2</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>le|ft1 <a href>right1 left2</a> right2</p>'
    ],
    '1-3 Backward from left2 to left1');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href>right1 left2</a> ri|ght2</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href>ri|ght1 left2</a> right2</p>'
    ],
    '1-4 Backward from right2 to right1');

selection_test(
    [
      kStyle,
      '<p contenteditable>le|ft1 <a href style="border: solid 5px blue;">right1 left2</a> right2</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="border: solid 5px blue;">right1 le|ft2</a> right2</p>'
    ],
    '2-1 Forward from left1 to left2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="border: solid 5px blue;">ri|ght1 left2</a> right2</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="border: solid 5px blue;">right1 left2</a> ri|ght2</p>'
    ],
    '2-2 Forward from right1 to right2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="border: solid 5px blue;">right1 le|ft2</a> right2</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>le|ft1 <a href style="border: solid 5px blue;">right1 left2</a> right2</p>'
    ],
    '2-3 Backward from left2 to left1');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="border: solid 5px blue;">right1 left2</a> ri|ght2</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="border: solid 5px blue;">ri|ght1 left2</a> right2</p>'
    ],
    '2-4 Backward from left2 to left1');

selection_test(
    [
      kStyle,
      '<p contenteditable>le|ft1 <a href style="padding: 5px;">right1 left2</a> right2</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 le|ft2</a> right2</p>'
    ],
    '3-1 Forward from left1 to left2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">ri|ght1 left2</a> right2</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2</a> ri|ght2</p>'
    ],
    '3-2 Forward from right1 to right2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 le|ft2</a> right2</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>le|ft1 <a href style="padding: 5px;">right1 left2</a> right2</p>'
    ],
    '3-3 Backward from left2 to left1');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2</a> ri|ght2</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">ri|ght1 left2</a> right2</p>'
    ],
    '3-4 Backward from right2 to right1');

selection_test(
    [
      kStyle,
      '<p contenteditable>le|ft1 <a href style="padding: 5px;">right1 left2 right2 left3</a> right3</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 le|ft2 right2 left3</a> right3</p>'
    ],
    '4-1 Forward from left1 to left2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">ri|ght1 left2 right2 left3</a> right3</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2 ri|ght2 left3</a> right3</p>'
    ],
    '4-2 Forward from right1 to right2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 le|ft2 right2 left3</a> right3</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>le|ft1 <a href style="padding: 5px;">right1 left2 right2 left3</a> right3</p>'
    ],
    '4-3 Backward from left2 to left1');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2 ri|ght2 left3</a> right3</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">ri|ght1 left2 right2 left3</a> right3</p>'
    ],
    '4-4 Backward from right2 to right1');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 le|ft2 right2 left3</a> right3</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2 right2 le|ft3</a> right3</p>'
    ],
    '4-5 Forward from left2 to left3');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2 ri|ght2 left3</a> right3</p>'
    ],
    selection => selection.modify('move', 'forward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2 right2 left3</a> ri|ght3</p>'
    ],
    '4-6 Forward from right2 to right3');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2 right2 le|ft3</a> right3</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 le|ft2 right2 left3</a> right3</p>'
    ],
    '4-7 Backward from left3 to left2');

selection_test(
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2 right2 left3</a> ri|ght3</p>'
    ],
    selection => selection.modify('move', 'backward', 'line'),
    [
      kStyle,
      '<p contenteditable>left1 <a href style="padding: 5px;">right1 left2 ri|ght2 left3</a> right3</p>'
    ],
    '4-8 Backward from right3 to right2');
</script>
chromium/third_party/blink/web_tests/editing/selection/move-vertically-with-paddings-borders.html
