caret-in-svg-text.xhtml | Explore in Territory

<html xmlns="http://www.w3.org/1999/xhtml">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body style="margin: 0px; ">
  <div style="width: 400px; height: 100px;">
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <text x="20" y="30"><tspan id="ts1">Sheriff Woody</tspan></text>
        <text x="20" y="50"><tspan id="ts2">שדגש</tspan></text>
    </svg>
  </div>
<script>
test(() => {
  let range = document.createRange();
  const text1 = document.querySelectorAll('#ts1')[0].firstChild;

  // Start edge of the LTR text
  range.setStart(text1, 0);
  range.setEnd(text1, 0);
  let text1Start1 = range.getBoundingClientRect();
  assert_less_than(text1Start1.y, 30);
  assert_equals(text1Start1.x, 20);

  // End edge of the LTR text
  range.setStart(text1, 13);
  range.setEnd(text1, 13);
  let text1End = range.getBoundingClientRect();
  assert_greater_than(text1End.x, text1Start1.x);
}, 'Caret position of a LTR text');

test(() => {
  let range = document.createRange();

  // Start edge of the RTL text
  const text2 = document.querySelectorAll('#ts2')[0].firstChild;
  range.setStart(text2, 0);
  range.setEnd(text2, 0);
  let text2Start = range.getBoundingClientRect();
  assert_greater_than(text2Start.y, 30);
  assert_less_than(text2Start.y, 50);
  assert_greater_than(text2Start.x, 20);

  // End edge of the RTL text
  range.setStart(text2, 4);
  range.setEnd(text2, 4);
  let text2End = range.getBoundingClientRect();
  assert_equals(text2End.x, 20);
}, 'Caret position of a RTL text');
</script>
</body>
</html>
chromium/third_party/blink/web_tests/svg/text/caret-in-svg-text.xhtml
