| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Test touch adjustment to a non-rectilinear element.</title> |
| <script src="../fast/js/resources/js-test-pre.js"></script> |
| <script src="resources/touchadjustment.js"></script> |
| <style> |
| body { margin: 0px; padding: 0px; } |
| #container { |
| -webkit-box-sizing: border-box; |
| position: relative; |
| border: 1px solid black; |
| height: 100px; |
| width: 100px; |
| } |
| #rotated { |
| -webkit-box-sizing: border-box; |
| -webkit-transform: rotate(45deg); |
| border: 1px solid black; |
| height: 40px; |
| left: 10px; |
| position: absolute; |
| top: 10px; |
| width: 40px; |
| } |
| </style> |
| |
| </head> |
| |
| <body> |
| |
| <div id="container"> |
| <div id="rotated"></div> |
| </div> |
| |
| <p id='description'></p> |
| <div id='console'></div> |
| |
| <script> |
| // Set up shortcut access to elements |
| var e = {}; |
| ['container', 'rotated'].forEach(function(a) { |
| e[a] = document.getElementById(a); |
| e[a].addEventListener('click', function() {}, false); |
| }); |
| |
| function testDirectTouches() |
| { |
| debug('Direct Touches'); |
| |
| testTouchPoint(touchPoint(30, 30, 20), e.rotated); |
| testTouchPoint(touchPoint(20, 30, 20), e.rotated); |
| testTouchPoint(touchPoint(40, 30, 20), e.rotated); |
| testTouchPoint(touchPoint(30, 20, 20), e.rotated); |
| testTouchPoint(touchPoint(30, 40, 20), e.rotated); |
| |
| testTouchPoint(touchPoint(80, 80, 20), e.container); |
| testTouchPoint(touchPoint(80, 20, 20), e.container); |
| testTouchPoint(touchPoint(20, 80, 20), e.container); |
| } |
| |
| function testAdjustedTouches() |
| { |
| debug('\nAdjusted Touches'); |
| |
| // Touch overlaps center of element. |
| testTouchPoint(touchPoint(10, 10, 30), e.rotated); |
| |
| // Touch overlaps corner of element. |
| testTouchPoint(touchPoint(20, 0, 20), e.rotated); |
| |
| debug('\nNear Misses'); |
| |
| // Touch overlaps bounding-box of element, but not the actual bounds. |
| testTouchPoint(touchPoint(71, 0, 20), e.container); |
| testTouchPoint(touchPoint(71, 60, 20), e.container); |
| } |
| |
| function testAdjustedPoints() |
| { |
| debug('\nAdjusted point within bounds'); |
| var adjustedPoint = adjustTouchPoint(touchPoint(20, 0, 20)) |
| shouldBeWithin(adjustedPoint, touchPoint(20, 0, 20)); |
| |
| adjustedPoint = adjustTouchPoint(touchPoint(60, 60, 20)) |
| shouldBeWithin(adjustedPoint, touchPoint(60, 60, 20)); |
| |
| adjustedPoint = adjustTouchPoint(touchPoint(0, 60, 40, 20)) |
| shouldBeWithin(adjustedPoint, touchPoint(0, 60, 40, 20)); |
| |
| adjustedPoint = adjustTouchPoint(touchPoint(70, 20, 20, 40)) |
| shouldBeWithin(adjustedPoint, touchPoint(70, 20, 20, 40)); |
| } |
| |
| function runTests() |
| { |
| document.addEventListener('click', function() {}, false); |
| if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) { |
| description(document.title); |
| testDirectTouches(); |
| testAdjustedTouches(); |
| testAdjustedPoints() |
| e.container.style.display = 'none'; |
| } |
| } |
| runTests(); |
| </script> |
| <script src="../fast/js/resources/js-test-post.js"></script> |
| |
| </body> |
| </html> |
