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

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