OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <link rel="stylesheet" href="../../../js/resources/js-test-style.css"> | |
5 <script src="../../../js/resources/js-test-pre.js"></script> | |
6 <script src="resources/gesture-helpers.js"></script> | |
7 | |
8 </head> | |
9 | |
10 <body style="margin:0" onload="runTest()"> | |
11 <div id="container" style="width: 500px; overflow-x: scroll"> | |
12 <form> | |
13 <input id="box" style="height:100px; width:400px; font-size:xx-lar ge" type="text" value="asasd;flkajsd;flkasjdf;alksdjf;alskdfja;lksdja;sdlfjkas;l dkf"></input> | |
tdanderson
2013/08/08 20:01:16
Unless it would be too much of a pain, maybe speci
bokan
2013/08/12 16:19:29
I made the text large so it can be easily hit with
| |
14 </form> | |
15 <div style="background: green; height: 100px; width: 1000px"></div> | |
16 </div> | |
17 | |
18 <p id="description"></p> | |
tdanderson
2013/08/08 20:01:16
Also including something in this/another test to v
bokan
2013/08/12 16:19:29
Done.
| |
19 <div id="console"></div> | |
20 | |
21 <script type="text/javascript"> | |
22 var gestureX = 200; | |
23 var gestureY = 50; | |
24 var box; | |
25 var container; | |
26 var scrollableArea; | |
27 | |
28 function resetScroll() | |
29 { | |
30 container.scrollLeft = 0; | |
31 box.scrollLeft = 0; | |
32 } | |
33 | |
34 // Fling to scroll the inner text a little but not all the way | |
35 function flingGestureScroll() | |
36 { | |
37 resetScroll(); | |
38 | |
39 eventSender.gestureScrollBegin(gestureX, gestureY); | |
40 eventSender.gestureScrollUpdateWithoutPropagation(-10, 0); | |
41 eventSender.gestureScrollUpdateWithoutPropagation(-10, 0); | |
42 eventSender.gestureScrollUpdateWithoutPropagation(-10, 0); | |
43 eventSender.gestureScrollUpdateWithoutPropagation(-10, 0); | |
44 eventSender.gestureScrollEnd(0, 0); | |
45 | |
46 setTimeout('checkFlingOffset();', 100); | |
tdanderson
2013/08/08 20:01:16
Your actual reviewer probably won't like these set
bokan
2013/08/12 16:19:29
I thought event sender sent events asynchronously
| |
47 } | |
48 | |
49 function checkFlingOffset() | |
50 { | |
51 debug("Flinging input text should scroll the text"); | |
52 shouldBe('box.scrollLeft', '40'); | |
53 shouldBe('container.scrollLeft', '0'); | |
54 | |
55 flingGestureScrollPastEnd(); | |
56 } | |
57 | |
58 // Fling to scroll the inner text all the way, make sure the containing div isn't scrolled by the fling | |
59 function flingGestureScrollPastEnd() | |
60 { | |
61 resetScroll(); | |
62 | |
63 eventSender.gestureScrollBegin(gestureX, gestureY); | |
64 eventSender.gestureScrollUpdateWithoutPropagation(-scrollableArea, 0 ); | |
65 eventSender.gestureScrollUpdateWithoutPropagation(-300, 0); | |
66 eventSender.gestureScrollUpdateWithoutPropagation(-100, 0); | |
67 eventSender.gestureScrollUpdateWithoutPropagation(-100, 0); | |
68 eventSender.gestureScrollEnd(0, 0); | |
69 | |
70 setTimeout('checkFlingPastEndOffset();', 100); | |
71 } | |
72 | |
73 function checkFlingPastEndOffset() | |
74 { | |
75 debug("Flinging input text past the scrollable width shouldn't scrol l containing div"); | |
76 shouldBe('box.scrollLeft', 'box.scrollWidth - box.clientWidth'); | |
77 shouldBe('container.scrollLeft', '0'); | |
78 | |
79 flingFullyScrolledText(); | |
80 } | |
81 | |
82 // Fling the fully scrolled text to make sure it flings the containing d iv | |
83 function flingFullyScrolledText() | |
84 { | |
85 eventSender.gestureScrollBegin(gestureX, gestureY); | |
86 eventSender.gestureScrollUpdateWithoutPropagation(-30, 0); | |
87 eventSender.gestureScrollUpdateWithoutPropagation(-30, 0); | |
88 eventSender.gestureScrollEnd(0, 0); | |
89 | |
90 setTimeout('checkFlingFullyScrolledOffset();', 100); | |
91 } | |
92 | |
93 function checkFlingFullyScrolledOffset() | |
94 { | |
95 debug("Flinging fully scrolled input text should fling containing di v"); | |
96 shouldBe('box.scrollLeft', 'box.scrollWidth - box.clientWidth'); | |
97 shouldBe('container.scrollLeft', '60'); | |
98 | |
99 scrollText(); | |
100 } | |
101 | |
102 // Scroll input box using gesture scroll a little but not to the end | |
103 function scrollText() | |
104 { | |
105 resetScroll(); | |
106 | |
107 eventSender.gestureScrollBegin(gestureX, gestureY); | |
108 eventSender.gestureScrollUpdate(-30, 0); | |
109 eventSender.gestureScrollUpdate(-30, 0); | |
110 eventSender.gestureScrollEnd(0, 0); | |
111 | |
112 setTimeout('checkScrollOffset();', 100); | |
113 } | |
114 | |
115 function checkScrollOffset() | |
116 { | |
117 debug("Gesture scrolling input text a bit should scroll the text"); | |
118 shouldBe('box.scrollLeft', '60'); | |
119 shouldBe('container.scrollLeft', '0'); | |
120 | |
121 scrollTextPastEnd(); | |
122 } | |
123 | |
124 // Scroll input box using gesture scroll past the end of the scroll area . Containing div should scroll | |
125 function scrollTextPastEnd() | |
126 { | |
127 resetScroll(); | |
128 | |
129 eventSender.gestureScrollBegin(gestureX, gestureY); | |
130 eventSender.gestureScrollUpdate(-scrollableArea, 0); | |
131 eventSender.gestureScrollUpdate(-50, 0); | |
132 eventSender.gestureScrollEnd(0, 0); | |
133 | |
134 setTimeout('checkScrollPastEndOffset();', 100); | |
135 } | |
136 | |
137 function checkScrollPastEndOffset() | |
138 { | |
139 debug("Gesture scrolling input text past scroll width should scroll container div"); | |
140 shouldBe('box.scrollLeft', 'box.scrollWidth - box.clientWidth'); | |
141 shouldBe('container.scrollLeft', '50'); | |
142 | |
143 testRunner.notifyDone(); | |
tdanderson
2013/08/08 20:01:16
Once you're done testing horizontal fling and scro
bokan
2013/08/12 16:19:29
Done.
| |
144 } | |
145 | |
146 if (window.testRunner) | |
147 testRunner.waitUntilDone(); | |
148 | |
149 function runTest() | |
150 { | |
151 box = document.getElementById("box"); | |
152 container = document.getElementById("container"); | |
153 | |
154 scrollableArea = box.scrollWidth - box.clientWidth; | |
155 | |
156 if (window.eventSender) { | |
157 description('This tests that an input text field can be properly scrolled with touch gestures'); | |
158 | |
159 if (checkTestDependencies() && window.eventSender.gestureScrollU pdateWithoutPropagation) | |
160 flingGestureScroll(); | |
161 else | |
162 exitIfNecessary(); | |
163 } else { | |
164 debug("This test requires DumpRenderTree. Gesture-scroll the pa ge to validate the implementation."); | |
165 } | |
166 } | |
167 </script> | |
168 </body> | |
169 </html> | |
OLD | NEW |