third_party/WebKit/LayoutTests/editing/selection/offset-from-point.html

   1 <!DOCTYPE html>
   2 <style>
   3 p {
   4     font:20px/1 Ahem;
   5     margin:.2em;
   6 }
   7 .vlr {
   8     -webkit-writing-mode:vertical-lr;
   9 }
  10 .vrl {
  11     -webkit-writing-mode:vertical-rl;
  12 }
  13 </style>
  14 <p title="LTR"><span>12 345 6789</span></p>
  15 <p title="RTL" dir=rtl><span>12 345 6789</span></p>
  16 <p title="VERTICAL-LR" class=vlr><span>12 345 6789</span></p>
  17 <p title="VERTICAL-RL" class=vrl><span>12 345 6789</span></p>
  18 <div id=log></div>
  19 <script>
  20 Array.prototype.forEach.call(document.querySelectorAll("p"), function (e) {
  21     testOffsetFromPoint(e.firstChild, e.title);
  22     e.style.textRendering = "optimizeLegibility";
  23     testOffsetFromPoint(e.firstChild, e.title + " (Complex Path)");
  24 });
  25
  26 function testOffsetFromPoint(element, name) {
  27     var writingMode = getComputedStyle(element).webkitWritingMode;
  28     var isVertical = writingMode && writingMode[0] == "v";
  29     var results = [ name ];
  30     getOffsetFromPoint(element, isVertical, results);
  31     if (isVertical) // The last character in vertical is flaky by win/mac/linux
  32         results.splice(-1, 1);
  33     for (var result of results) {
  34         var div = document.createElement("div");
  35         div.innerText = result;
  36         log.appendChild(div);
  37     }
  38 }
  39
  40 function getOffsetFromPoint(element, isVertical, results) {
  41     if (isVertical) {
  42         var x = element.offsetLeft + element.offsetWidth / 2;
  43         var ymin = element.offsetTop;
  44         var width = element.offsetHeight;
  45     } else {
  46         var y = element.offsetTop + element.offsetHeight / 2;
  47         var xmin = element.offsetLeft;
  48         width = element.offsetWidth;
  49     }
  50     var lastCharacterOffset = null;
  51     var lastPosition = null;
  52     for (var position = -1; position <= width + 1; ++position) {
  53         if (isVertical)
  54             y = ymin + position;
  55         else
  56             x = xmin + position;
  57         var result = document.caretRangeFromPoint(x, y);
  58         var characterOffset = result ? result.startOffset : null;
  59         if (characterOffset === lastCharacterOffset)
  60             continue;
  61         var advance = position - lastPosition;
  62         results.push(characterOffset + "=" + position + " (" + advance + ")");
  63         lastCharacterOffset = characterOffset;
  64         lastPosition = position;
  65     }
  66     return results;
  67 }
  68
  69 if (window.testRunner)
  70     testRunner.dumpAsText();
  71 </script>