src/third_party/WebKit/LayoutTests/fast/transforms/hit-test-large-scale.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script>
   5     if (window.testRunner)
   6         window.testRunner.dumpAsText()
   7
   8     function runTest()
   9     {
  10         document.body.offsetWidth;
  11         var elt = document.elementFromPoint(130, 130);
  12         if (elt == document.getElementById('progress'))
  13             document.getElementById('console').innerHTML = 'PASS';
  14         else
  15             document.getElementById('console').innerHTML = 'FAIL';
  16     }
  17 </script>
  18 <style type="text/css">
  19     #progress {
  20         width: 2px;
  21         height: 2px;
  22         margin: 10px;
  23         transform: scale(60);
  24         -webkit-transform-origin: 0 0;
  25         background-color: blue;
  26     }
  27
  28     #progress:hover {
  29         background-color: red;
  30     }
  31 </style>
  32 </head>
  33 <body onload="runTest()">
  34     <p>The blue box only responds to hover over some of its area. It has a scale() transform</p>
  35     <div id="progress"></div>
  36
  37     <div id="console"></div>
  38 </body>
  39 </html>