648a063d6cb7979505d08e2af19ad8755f0e53ac
[WebKit-https.git] / LayoutTests / touchadjustment / rotated-node.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>Test touch adjustment to a non-rectilinear element.</title>
5     <script src="../resources/js-test-pre.js"></script>
6     <script src="resources/touchadjustment.js"></script>
7     <style>
8         body { margin: 0px; padding: 0px; }
9         #container {
10             -webkit-box-sizing: border-box;
11             position: relative;
12             border: 1px solid black;
13             height: 100px;
14             width: 100px;
15         }
16         #rotated {
17             -webkit-box-sizing: border-box;
18             -webkit-transform: rotate(45deg);
19             border: 1px solid black;
20             height: 40px;
21             left: 10px;
22             position: absolute;
23             top: 10px;
24             width: 40px;
25         }
26     </style>
27
28 </head>
29
30 <body>
31
32 <div id="container">
33     <div id="rotated"></div>
34 </div>
35
36 <p id='description'></p>
37 <div id='console'></div>
38
39 <script>
40     // Set up shortcut access to elements
41     var e = {};
42     ['container', 'rotated'].forEach(function(a) {
43         e[a] = document.getElementById(a);
44         e[a].addEventListener('click', function() {}, false);
45     });
46
47     function testDirectTouches()
48     {
49         debug('Direct Touches');
50
51         testTouchPoint(touchPoint(30, 30, 20), e.rotated);
52         testTouchPoint(touchPoint(20, 30, 20), e.rotated);
53         testTouchPoint(touchPoint(40, 30, 20), e.rotated);
54         testTouchPoint(touchPoint(30, 20, 20), e.rotated);
55         testTouchPoint(touchPoint(30, 40, 20), e.rotated);
56
57         testTouchPoint(touchPoint(80, 80, 20), e.container);
58         testTouchPoint(touchPoint(80, 20, 20), e.container);
59         testTouchPoint(touchPoint(20, 80, 20), e.container);
60     }
61
62     function testAdjustedTouches()
63     {
64         debug('\nAdjusted Touches');
65
66         // Touch overlaps center of element.
67         testTouchPoint(touchPoint(10, 10, 30), e.rotated);
68
69         // Touch overlaps corner of element.
70         testTouchPoint(touchPoint(20, 0, 20), e.rotated);
71
72         debug('\nNear Misses');
73
74         // Touch overlaps bounding-box of element, but not the actual bounds.
75         testTouchPoint(touchPoint(71, 0, 20), e.container);
76         testTouchPoint(touchPoint(71, 60, 20), e.container);
77     }
78
79     function testAdjustedPoints()
80     {
81         debug('\nAdjusted point within bounds');
82         var adjustedPoint = adjustTouchPoint(touchPoint(20, 0, 20))
83         shouldBeWithin(adjustedPoint, touchPoint(20, 0, 20));
84
85         adjustedPoint = adjustTouchPoint(touchPoint(60, 60, 20))
86         shouldBeWithin(adjustedPoint, touchPoint(60, 60, 20));
87
88         adjustedPoint = adjustTouchPoint(touchPoint(0, 60, 40, 20))
89         shouldBeWithin(adjustedPoint, touchPoint(0, 60, 40, 20));
90
91         adjustedPoint = adjustTouchPoint(touchPoint(70, 20, 20, 40))
92         shouldBeWithin(adjustedPoint, touchPoint(70, 20, 20, 40));
93     }
94
95     function runTests()
96     {
97         document.addEventListener('click', function() {}, false);
98         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
99             description(document.title);
100             testDirectTouches();
101             testAdjustedTouches();
102             testAdjustedPoints()
103             e.container.style.display = 'none';
104         }
105     }
106     runTests();
107 </script>
108 <script src="../resources/js-test-post.js"></script>
109
110 </body>
111 </html>