third_party/WebKit/LayoutTests/fast/dom/elementFromPoint-relative-to-viewport.html

   1
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4     .test {
   5         width: 100px;
   6         height: 100px;
   7         outline: 1px solid black;
   8     }
   9     .testItem {
  10         z-index: 100;
  11         display: inline-block;
  12         width: 20px;
  13         height: 20px;
  14         outline: 1px solid red;
  15     }
  16     .pusher {
  17         width: 1000px;
  18         height: 1000px;
  19         outline: 1px solid black;
  20     }
  21     #subpixel-test {
  22       width: 4.5px;
  23     }
  24 </style>
  25 <div id="testArea">
  26     <br>
  27     <div id="test-initial" class="test"></div>
  28     <div class="pusher">This box is here to create scrollbars.</div>
  29     <div id="test-offscreen" class="test"></div>
  30     <div class="pusher">This box is here to create even more scrollbars!</div>
  31 </div>
  32 <p id="description"></p>
  33 <div id="console"></div>
  34 <script>
  35     window.onclick = function(e)
  36     {
  37         alert(e.clientX + " " + e.clientY + " " + document.elementFromPoint(e.clientX, e.clientY).textContent);
  38     }
  39
  40     if (window.testRunner)
  41         testRunner.dumpAsText();
  42
  43     description('This test document.elementFromPoint is evaluated in with respect to the viewport, not the document.');
  44
  45     function testElement(element, label, offsetX, offsetY, hasZoom) {
  46         for (var i = 0; i < 25; ++i) {
  47             var item = document.createElement("div");
  48             item.className = "testItem";
  49             item.textContent = String(i);
  50             element.appendChild(item);
  51         }
  52         var testX = 10;
  53         var testY = 10;
  54
  55         var unscrolledBox = "unscrolledBox" + label,
  56             scrolledDownBox = "scrolledDownBox" + label,
  57             scrolledRightBox = "scrolledRightBox" + label,
  58             scrolledDownAndRightBox = "scrolledDownAndRightBox" + label;
  59
  60         function relativeScroll(x, y) {
  61             window.scrollTo(offsetX + x, offsetY + y);
  62         }
  63
  64         function getFromPoint(x, y) {
  65             relativeScroll(x, y);
  66             var hitElement = document.elementFromPoint(testX, testY);
  67             // shouldn't return null range on any of these tests
  68             if (hitElement === null)
  69                 return null;
  70             else
  71                 return hitElement.textContent;
  72         }
  73         // Get initial box.
  74         window[unscrolledBox] = getFromPoint(0, 0);
  75
  76         // Test scrolling down
  77         window[scrolledDownBox] = getFromPoint(0, 20);
  78
  79         // Test scrolling right
  80         window[scrolledRightBox] = getFromPoint(50, 0);
  81
  82         // Test scrolling down and right
  83         window[scrolledDownAndRightBox] = getFromPoint(50, 20);
  84
  85         shouldBe(unscrolledBox, "'0'");
  86         shouldBe(scrolledDownBox, "'5'");
  87         shouldBe(scrolledRightBox, "'3'");
  88         shouldBe(scrolledDownAndRightBox, "'8'");
  89     }
  90
  91     var elementInitial = document.getElementById('test-initial');
  92     var elementOffscreen = document.getElementById('test-offscreen');
  93     var offset = elementInitial.getBoundingClientRect();
  94     testElement(elementInitial, "Initial", offset.left, offset.top);
  95     testElement(elementOffscreen, "Offscreen", offset.left, offset.top + 1100);
  96
  97     eventSender.zoomPageOut();
  98     testElement(elementInitial, "Initial", offset.left, offset.top, /* hasZoom */ true);
  99
 100     if (window.testRunner) {
 101         var area = document.getElementById('testArea');
 102         area.parentNode.removeChild(area);
 103     }
 104 </script>