| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="../../resources/js-test.js"></script> | 4 <script src="resources/link-highlight-helper.js"></script> |
| 5 <link rel="stylesheet" type="text/css" href="resources/link-highlight-style.css"
> |
| 5 </head> | 6 </head> |
| 6 <body onload="runTest();"> | 7 <body onload="runTest();"> |
| 7 <div style="-webkit-transform: translateZ(0); padding: 20px;"> | 8 <div style="padding: 20px"> |
| 8 <div id="targetLink" style="width: 320px; height: 240px; cursor: pointer; -web
kit-tap-highlight-color: rgb(0, 255, 0)"></div> | 9 <div id="targetLink" style="-webkit-transform: translateZ(0); margin:0px; padd
ing: 0px; width: 320px;"> |
| 10 <!--Note we set the height to 1 less than the actual highlight. Determining
the size here programatically |
| 11 is challenging as the highlight code uses a (I believe) buggy line box calcu
lation and it's not exposed |
| 12 via javascript. To see this, highlight the <a> element in dev tools and not
that it's at the bottom of |
| 13 the image yet it's .top() method is 28px --> |
| 14 <a href="#"><img width="320" height="239" src="resources/dice.png"></a> |
| 9 </div> | 15 </div> |
| 16 </div> |
| 10 <script> | 17 <script> |
| 11 function runTest() { | 18 function runTest() { |
| 12 var clientRect = document.getElementById('targetLink').getBoundingClientRect
(); | 19 var targetLink = document.getElementById('targetLink'); |
| 13 x = (clientRect.left + clientRect.right) / 2; | 20 createSquareCompositedHighlight(targetLink); |
| 14 y = (clientRect.top + clientRect.bottom) / 2; | 21 if (window.testRunner) |
| 15 if (window.testRunner) { | |
| 16 testRunner.dumpAsTextWithPixelResults(); | 22 testRunner.dumpAsTextWithPixelResults(); |
| 17 testRunner.waitUntilDone(); | |
| 18 } | |
| 19 | |
| 20 if (window.eventSender) { | |
| 21 eventSender.gestureShowPress(x, y); | |
| 22 window.setTimeout(function() { window.testRunner.notifyDone(); }, 0); | |
| 23 } else { | |
| 24 debug("This test requires DumpRenderTree."); | |
| 25 debug("This test is successful if the image below is covered in a green
rectangle with rounded corners."); | |
| 26 } | |
| 27 } | 23 } |
| 28 </script> | 24 </script> |
| 29 </script> | 25 </script> |
| 30 </body> | 26 </body> |
| 31 </html> | 27 </html> |
| OLD | NEW |