third_party/WebKit/LayoutTests/fast/dom/Document/CaretRangeFromPoint/hittest-relative-to-viewport.html

   1 <script src="../../../../resources/ahem.js"></script>
   2 <script src="../../../../resources/js-test.js"></script>
   3 <style>
   4     .test {
   5         width: 100px;
   6         font-family: "Ahem";
   7     }
   8     .pusher {
   9         width: 4000px;
  10         height: 1000px;
  11         outline: 1px solid black;
  12     }
  13 </style>
  14
  15 <div id="testArea">
  16     <div id="test-top" class="test">xxxxx xxxxx xxxxx xxxxx</div>
  17     <div class="pusher">This box is here to create scrollbars.</div>
  18     <div id="test-bottom" class="test" style="margin-left: 900px;">xxxxx xxxxx xxxxx xxxxx</div>
  19     <div class="pusher">This box is here to create additional space for the hit tests which must initially be in the scroll area.</div>
  20 </div>
  21
  22 <p id="description"></p>
  23 <div id="console"></div>
  24
  25 <script>
  26     if (window.testRunner)
  27         testRunner.dumpAsText();
  28
  29     description('This checks for proper behavior of caretRangeFromPoint before and after scrolling.');
  30
  31     var elementTop = document.getElementById('test-top'),
  32         elementBottom = document.getElementById('test-bottom');
  33
  34     var BASE_DEVICE_PIXEL_RATIO = window.devicePixelRatio;
  35
  36     function testsWithBaseline(baselinePos, expectedContainer) {
  37         function test(expectedOffset, scrollByX, scrollByY) {
  38             var zoomRatio = BASE_DEVICE_PIXEL_RATIO / window.devicePixelRatio;
  39             var hitPosition = { x: 15 * zoomRatio, y: 15 * zoomRatio },
  40                 range,
  41                 doesContainerPass = function() { return range.startContainer === expectedContainer },
  42                 doesOffsetPass = function() { return Math.abs(range.startOffset - expectedOffset) < zoomRatio; };
  43
  44             // Scroll relative to target.
  45             scrollRelativeToBaseline(scrollByX, scrollByY);
  46
  47             range = document.caretRangeFromPoint(hitPosition.x, hitPosition.y);
  48
  49             // shouldn't return null range on any of these tests
  50             if (range === null) {
  51                 testFailed("null range was returned from document.caretRangeFromPoint(" + hitPosition.x + ", " + hitPosition.y + ") at window scroll position " + window.scrollX + "x" + window.scrollY);
  52                 return;
  53             }
  54
  55             // do an actual check
  56             function check(thunk, message) {
  57                 if (thunk())
  58                     testPassed(message);
  59                 else
  60                     testFailed(message);
  61             }
  62             check(doesContainerPass, "Range.startContainer check (got " + range.startContainer + ", expected " + expectedContainer + ")");
  63             check(doesOffsetPass, "Range.startOffset check (got " + range.startOffset + ", expected " + expectedOffset + ")");
  64         }
  65
  66         function scrollRelativeToBaseline(x, y) {
  67             window.scrollTo(baselinePos.x + x, baselinePos.y + y);
  68         }
  69
  70         test(0, 0, 0);
  71         test(12, 0, 25);
  72         test(2, 25, 0);
  73         test(14, 25, 25);
  74
  75         debug(" ");
  76     }
  77
  78     var rectTop = elementTop.getBoundingClientRect(),
  79         rectBottom = elementBottom.getBoundingClientRect(),
  80         // Subtract some distance so we aren't in the very top left of the target.
  81         topBaseline = { x: rectTop.left - 8, y: rectTop.top - 8 },
  82         bottomBaseline = { x: rectBottom.left - 8, y: rectBottom.top - 8 };
  83
  84      // Testing inside initial containing block (top left)
  85     testsWithBaseline(topBaseline, elementTop.firstChild);
  86
  87     // Testing outside initial containing block (mid-page)
  88     testsWithBaseline(bottomBaseline, elementBottom.firstChild);
  89
  90     eventSender.zoomPageOut();
  91     testsWithBaseline(topBaseline, elementTop.firstChild);
  92
  93     if (window.testRunner) {
  94         var area = document.getElementById('testArea');
  95         area.parentNode.removeChild(area);
  96     }
  97 </script>