caret-height-multi-line.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid red;
  padding: 12px;
  line-height: 1.66666667;
  width: 140px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
  <div contenteditable id="test1">
    The caret height
    should <span id="line2">be the same for each line.</span>
  </div>
  <div contenteditable id="test2">
    The <span id="large_font" style="font-size: 150%">caret</span> height should be obtained from a font of character before caret for LTR.
  </div>
 <div contenteditable id="test3" style="direction: RTL">גובה<span id="large_font_rtl" style="font-size: 150%">עבו</span> תו יש לקבל תו אחרי תו עבור RTL
  </div>
<script>
test(function () {
  let editor = document.getElementById('test1');
  editor.focus();

  assert_not_equals(window.internals, undefined, 'This test requires window.internals');
  let caretHeight1 = internals.absoluteCaretBounds().height;
  let sel = window.getSelection();
  sel.collapse(line2, 0);
  let caretHeight2 = internals.absoluteCaretBounds().height;

  assert_approx_equals(caretHeight1, caretHeight2, 1);
}, 'The caret height should be the same in every line');

test(function () {
  let editor = document.getElementById('test2');
  editor.focus();

  assert_not_equals(window.internals, undefined, 'This test requires window.internals');
  let caretHeight1 = internals.absoluteCaretBounds().height;
  let sel = window.getSelection();
  sel.collapse(large_font, 0);
  let caretHeight2 = internals.absoluteCaretBounds().height;

  assert_equals(caretHeight1, caretHeight2);
}, 'The caret height at the front of word(150%) should be the same as the caret height in other words(100%).');

test(function () {
  let editor = document.getElementById('test2');
  editor.focus();

  assert_not_equals(window.internals, undefined, 'This test requires window.internals');
  let sel = window.getSelection();
  sel.collapse(large_font, 0);
  sel.modify('move', 'right', 'character');
  let caretHeight1 = internals.absoluteCaretBounds().height;
  sel.collapse(large_font, 1);
  let caretHeight2 = internals.absoluteCaretBounds().height;

  assert_equals(caretHeight1, caretHeight2);
}, 'The caret height at the end of word should be the same as the caret height in the word.');

test(function () {
  let editor = document.getElementById('test3');
  editor.focus();

  assert_not_equals(window.internals, undefined, 'This test requires window.internals');
  let caretHeight1 = internals.absoluteCaretBounds().height;
  let sel = window.getSelection();
  sel.collapse(large_font_rtl, 0);
  let caretHeight2 = internals.absoluteCaretBounds().height;

  assert_equals(caretHeight1, caretHeight2);
}, 'In case of RTL, the caret height at the front of word(150%) should be the same as the caret height in other words(100%).');

test(function () {
  let editor = document.getElementById('test3');
  editor.focus();

  assert_not_equals(window.internals, undefined, 'This test requires window.internals');
  let sel = window.getSelection();
  sel.collapse(large_font_rtl, 0);
  sel.modify('move', 'left', 'character');
  let caretHeight1 = internals.absoluteCaretBounds().height;
  sel.collapse(large_font_rtl, 1);
  let caretHeight2 = internals.absoluteCaretBounds().height;

  assert_equals(caretHeight1, caretHeight2);
}, 'In case of RTL, the caret height at the end of word should be the same as the caret height in the word.');
</script>
</body>
</html>
chromium/third_party/blink/web_tests/editing/caret/caret-height-multi-line.html
