Add first-letter assert exception in RenderButton::setupInnerStyle().
[WebKit-https.git] / LayoutTests / touchadjustment / search-cancel.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>Touch Adjustment : Shadow DOM Element Search Cancel Button - bug 91894</title>
5     <script src="../resources/js-test-pre.js"></script>
6     <script src="resources/touchadjustment.js"></script>
7     <style>
8         input[type='search'] {
9         -webkit-appearance: none;
10         -webkit-box-sizing: border-box;
11         border: 1px solid #999;
12         padding: 5px;
13         }
14
15         input[type='search']::-webkit-search-cancel-button {
16         -webkit-appearance: none;
17         -webkit-box-sizing: border-box;
18         background: #999;
19         height: 10px;
20         margin: 0;
21         padding: 0;
22         width: 10px;
23         }
24     </style>
25 </head>
26
27 <body>
28
29 <div>
30   <input id="target" type="search" value="abcd">
31 </div>
32
33 <p id='description'></p>
34 <div id='console'></div>
35
36 <script>
37     var element;
38     var adjustedNode;
39     var adjustedPoint;
40     var inputBounds;
41     var cancelBounds;
42     var textContentBounds;
43     var touchBounds;
44     var targetBounds;
45     var targetContainsPoint;
46     var touchContainsPoint;
47
48     function runTouchTests() {
49         document.addEventListener('click', function() {}, false);
50
51         element = document.getElementById('target');
52         
53         inputBounds = findAbsoluteBounds(element);
54
55         var touchRadius = 20;
56         var offset = touchRadius / 2;
57
58         // Center of cancel button.
59         var midX = inputBounds.left + inputBounds.width - 11;
60         var midY = inputBounds.top + inputBounds.height / 2;
61
62         cancelBounds = {
63             left: midX - 5,
64             top: midY - 5,
65             width: 10,
66             height: 10
67         };
68
69         textContentBounds = {
70            left: inputBounds.left,
71            top: inputBounds.top,
72            width: inputBounds.width - 16,
73            height: inputBounds.height
74         };
75
76         debug('\nTouch centered on cancel button but overlapping neighboring candidate.');
77         testTouch(midX, midY, touchRadius, cancelBounds);
78
79         debug('\nOff-center touches enclosing cancel button.');
80         testTouch(midX - offset, midY, touchRadius, cancelBounds);
81         testTouch(midX - offset, midY + offset, touchRadius, cancelBounds);
82         testTouch(midX - offset, midY - offset, touchRadius, cancelBounds);
83
84         debug('\nTouches clipping left edge of cancel-button.');
85         testTouch(midX - touchRadius - 2, midY, touchRadius, textContentBounds);
86         testTouch(midX - touchRadius - 2, midY - offset, touchRadius, textContentBounds);
87         testTouch(midX - touchRadius - 2, midY + offset, touchRadius, textContentBounds);
88     }
89
90     function testTouch(touchX, touchY, radius, bounds) {
91
92         targetBounds = bounds;
93
94         touchBounds = {
95             left: touchX - radius,
96             top: touchY - radius,
97             width: 2 * radius,
98             height: 2 * radius
99         };
100         adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touchBounds.left, touchBounds.top, touchBounds.width, touchBounds.height);
101         targetContainsPoint = containsPoint(targetBounds, adjustedPoint);
102         touchContainsPoint = containsPoint(touchBounds, adjustedPoint);
103         shouldBeTrue('targetContainsPoint');
104         shouldBeTrue('touchContainsPoint');
105     }
106
107     function containsPoint(bounds, point) {
108         return bounds.left <= point.x && bounds.top <= point.y && bounds.left + bounds.width >= point.x && bounds.left + bounds.height >= point.y;
109     }
110
111     function runTests()
112     {
113         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
114             description('Test touch adjustment on a search field with a visible cancel button.');
115             runTouchTests();
116         }
117     }
118     runTests();
119 </script>
120 <script src="../resources/js-test-post.js"></script>
121 </body>
122 </html>