rtl-selection-rect-with-fallback.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
div {
  /* Must be a font that causes fallback for Arabic.
    'MS PGothic' for Windows, TakaoPGothic for Linux, Times for Mac. */
  font-family: 'MS PGothic', TakaoPGothic, Times;
}

.PASS {
  background-color: lime;
}

.FAIL {
  background-color: red;
}
</style>
<div id="container">
  <div id="ltr">'ص</div>
  <div id="rtl" dir="rtl">'ص</div>
</div>
<script>
Array.prototype.forEach.call(container.children, function (element) {
  test(function () {
    var textNode = element.firstChild;
    var width0 = getWidth(textNode, 0);
    var width1 = getWidth(textNode, 1);
    element.className = width0 < width1 ? "PASS" : "FAIL";
    assert_less_than(width0, width1);
  }, element.id);
});

function getWidth(node, offset) {
  var range = document.createRange();
  range.setStart(node, offset);
  range.setEnd(node, offset + 1);
  var rect = range.getBoundingClientRect();
  return rect.width;
}

if (window.testRunner)
  container.style.display = "none";
</script>

chromium/third_party/blink/web_tests/virtual/text-antialias/international/rtl-selection-rect-with-fallback.html