third_party/WebKit/LayoutTests/fast/events/hit-test-cache.html

   1 <!DOCTYPE html>
   2 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
   3 <style>
   4 html {
   5   font-family: Ahem;
   6   font-size: 10px;
   7 }
   8 #testArea {
   9   height: 6000px;
  10   width: 500px;
  11   background: red;
  12 }
  13 #target {
  14   position: fixed;
  15   left: 10px;
  16   top: 10px;
  17   width: 40px;
  18   height: 40px;
  19   background: yellow;
  20 }
  21 #frame {
  22   display: block;
  23   width: 100px;
  24   height: 100px;
  25 }
  26 </style>
  27 <div id=testArea>
  28   <div id=target></div>
  29 <br>
  30 <br>
  31 <br>
  32 <iframe id=frame srcdoc='<div id="innerContent" style="width: 75px; height: 50px; background: blue"><input></input<div>'></iframe>
  33 </div>
  34 <p id="description"></p>
  35 <div id="console"></div>
  36 <script src="../../resources/js-test.js"></script>
  37 <script>
  38
  39 setPrintTestResultsLazily();
  40 if (window.internals) {
  41     window.internals.settings.setViewportEnabled(true);
  42     window.internals.settings.setMockScrollbarsEnabled(true);
  43 }
  44
  45 description("Ensure hit test cache works in correct scenarios of scrolling, dom and style changes.");
  46
  47 function hitTestCountDelta()
  48 {
  49     var lastCount = 0;
  50     if ('lastHitTestCount' in document)
  51       lastCount = document.lastHitTestCount;
  52     var newCount = internals.hitTestCount(document);
  53     document.lastHitTestCount = newCount;
  54     return newCount - lastCount;
  55 }
  56
  57 function hitTestCacheHitsDelta()
  58 {
  59     var lastCount = 0;
  60     if ('lastHitTestCacheHits' in document)
  61       lastCount = document.lastHitTestCacheHits;
  62     var newCount = internals.hitTestCacheHits(document);
  63     document.lastHitTestCacheHits = newCount;
  64     return newCount - lastCount;
  65 }
  66
  67 function clearCounts()
  68 {
  69     internals.clearHitTestCache(document);
  70     document.lastHitTestCount = internals.hitTestCount(document);
  71     document.lastHitTestCacheHits = internals.hitTestCacheHits(document);
  72 }
  73
  74 function checkElementAt(x, y, expectedHitTestCount, expectedHitTestCacheCount)
  75 {
  76     shouldBe("document.elementFromPoint(" + x + "," + y + ")",
  77              "internals.clearHitTestCache(document); internals.elementFromPoint(document, " + x + ", " + y + ", false, false)");
  78     shouldBeEqualToNumber("hitTestCountDelta()", expectedHitTestCount);
  79     shouldBeEqualToNumber("hitTestCacheHitsDelta()", expectedHitTestCacheCount);
  80 }
  81
  82 function checkChildFrameElementAt(x, y)
  83 {
  84     shouldBe("internals.elementFromPoint(document, " + x + ", " + y + ", false, true)",
  85              "internals.clearHitTestCache(document); internals.elementFromPoint(document, " + x + ", " + y + ", false, true)");
  86 }
  87
  88 onload = function() {
  89     clearCounts();
  90     debug('Hit test main div');
  91     debug('---------------------');
  92
  93     // Verify that the cache is working; the second call
  94     // to checkElementAt should end up using the cache from the first call.
  95     checkElementAt(60, 60, 2, 0);
  96     checkElementAt(60, 60, 2, 1);
  97
  98     debug('');
  99     debug('Hit test fixed div after scroll');
 100     debug('---------------------');
 101
 102     // Verify that after scroll the hit cache isn't used but the
 103     // correct element is returned for the fixed position elements.
 104     document.lastHitNode = document.elementFromPoint(12, 12);
 105     clearCounts();
 106     checkElementAt(12, 12, 2, 0);
 107     window.scrollTo(0,  50);
 108     checkElementAt(12, 12, 2, 0);
 109     shouldBe("document.lastHitNode", "document.elementFromPoint(12, 12)");
 110
 111     debug('');
 112     debug('Hit test after main frame scroll');
 113     debug('---------------------');
 114
 115     // Verify that after scroll the hit cache isn't used but
 116     // the same element is returned for the adjusted co-ordinate.
 117     window.scrollTo(0, 0);
 118     document.lastHitNode = document.elementFromPoint(60, 75);
 119     clearCounts();
 120     checkElementAt(60, 75, 2, 0);
 121     window.scrollTo(0, 50);
 122     checkElementAt(60, 25, 2, 0);
 123     shouldBe("document.lastHitNode", "document.elementFromPoint(60, 25)");
 124
 125     clearCounts();
 126     debug('');
 127     debug('Hit test after style change');
 128     debug('---------------------');
 129     checkElementAt(12, 12, 2, 0);
 130     document.getElementById('target').style.background = "blue";
 131     checkElementAt(12, 12, 2, 0);
 132
 133     clearCounts();
 134     debug('');
 135     debug('Hit test after dom manipulation');
 136     debug('---------------------');
 137     checkElementAt(12, 12, 2, 0);
 138     document.getElementById('target').setAttribute("foo", "bar");
 139     checkElementAt(12, 12, 2, 0);
 140
 141     clearCounts();
 142     document.getElementById('target').style.display = "none";
 143     window.scrollTo(0, 0);
 144     debug('');
 145     debug('Hit test iframe; ensuring child co-ordinates are not in parent cache');
 146     debug('---------------------');
 147     checkChildFrameElementAt(25, 80);
 148     checkChildFrameElementAt(15, 40);
 149
 150     finishJSTest();
 151 }
 152 </script>