src/third_party/WebKit/LayoutTests/compositing/gestures/gesture-tapHighlight-shadow-tree.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script src="resources/link-highlight-helper.js"></script>
   4 <body onload="runTest();">
   5
   6 <template id="shadow-tree">
   7 <a href="" id="targetLink" style="-webkit-tap-highlight-color: rgb(0, 255, 0)"><content></content></a>
   8 </template>
   9
  10 <div id="host" style="-webkit-transform: translateZ(0); padding: 20px;">
  11 <img width="320" height="240" src="resources/dice.png">
  12 </div>
  13
  14 <script>
  15 useMockHighlight();
  16 var shadowRoot = document.querySelector('#host').createShadowRoot();
  17 shadowRoot.appendChild(document.importNode(document.querySelector('#shadow-tree').content, true));
  18 var targetLink = shadowRoot.querySelector('#targetLink');
  19
  20 function runTest() {
  21     var clientRect = targetLink.getBoundingClientRect();
  22     x = (clientRect.left + clientRect.right) / 2;
  23     y = (clientRect.top + clientRect.bottom) / 2;
  24     if (window.testRunner) {
  25         testRunner.dumpAsTextWithPixelResults();
  26         testRunner.waitUntilDone();
  27     }
  28
  29     if (window.eventSender) {
  30         eventSender.gestureShowPress(x, y);
  31         window.setTimeout(function() { window.testRunner.notifyDone(); }, 0);
  32     } else {
  33         debug("This test requires DumpRenderTree.");
  34         debug("This test is successful if the image below is covered in a green box with square ranges.");
  35     }
  36 }
  37 </script>
  38 </body>
  39 </html>