Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(557)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field.html

Issue 22488004: Made text inside <input> elements scrollable using touch gestures (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: layout test fixes Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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; height: 200px; overflow-y: scroll ; overflow-x: scroll">
12 <form>
13 <input id="box" size="10" style="height:100px; font-size:xx-large" type="text" value="asasd;flkajsd;flkasjdf;alksdjf;alskdfja;lksdja;sdlfjkas;ldkf "></input>
14 </form>
15 <div style="background: green; height: 1000px; width: 1000px"></div>
16 </div>
17
18 <p id="description"></p>
19 <div id="console"></div>
20
21 <script type="text/javascript">
22 var gestureX = 100;
23 var gestureY = 50;
24 var box;
25 var container;
26 var fullyScrolled;
27
28 function calculateFullScroll()
29 {
30 fullyScrolled = box.scrollWidth - box.clientWidth;
31
32 // FIXME: Mac has a quirk where the text box text can actually be sc rolled a little bit
33 // past the end. That is, scrollLeft = (scrollWidth - clientWidth) + 2 on Mac. Once
34 // this is fixed we can remove this adjustment.
35 box.scrollLeft = 100000;
36 fullyScrolled += box.scrollLeft - fullyScrolled;
37
38 resetScroll();
39 }
40
41 function resetScroll()
42 {
43 container.scrollLeft = 0;
44 box.scrollLeft = 0;
45 container.scrollTop = 0;
46 box.scrollTop = 0;
47 }
48
49 function testFlingGestureScroll()
50 {
51 debug("===Testing fling behavior===");
52 resetScroll();
53
54 shouldBe('box.scrollLeft', '0');
55 shouldBe('container.scrollLeft', '0');
56
57 eventSender.gestureScrollBegin(gestureX, gestureY);
58 eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
59 eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
60 eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
61 eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
62 eventSender.gestureScrollEnd(0, 0);
63
64 debug("Flinging input text should scroll text by the specified amoun t");
65 shouldBe('box.scrollLeft', '40');
66 shouldBe('container.scrollLeft', '0');
67
68 resetScroll();
69
70 eventSender.gestureScrollBegin(gestureX, gestureY);
71 eventSender.gestureScrollUpdateWithoutPropagation(-fullyScrolled, 0) ;
72 eventSender.gestureScrollUpdateWithoutPropagation(-300, 0);
73 eventSender.gestureScrollUpdateWithoutPropagation(-100, 0);
74 eventSender.gestureScrollUpdateWithoutPropagation(-100, 0);
75 eventSender.gestureScrollEnd(0, 0);
76
77 debug("Flinging input text past the scrollable width shouldn't scrol l containing div");
78
79 shouldBe('box.scrollLeft', 'fullyScrolled');
80 shouldBe('container.scrollLeft', '0');
81
82 eventSender.gestureScrollBegin(gestureX, gestureY);
83 eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
84 eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
85 eventSender.gestureScrollEnd(0, 0);
86
87 debug("Flinging fully scrolled input text should fling containing di v");
88 shouldBe('box.scrollLeft', 'fullyScrolled');
89 shouldBe('container.scrollLeft', '60');
90 }
91
92 function testGestureScroll()
93 {
94 debug("===Testing scroll behavior===");
95 resetScroll();
96
97 shouldBe('box.scrollLeft', '0');
98 shouldBe('container.scrollLeft', '0');
99
100 eventSender.gestureScrollBegin(gestureX, gestureY);
101 eventSender.gestureScrollUpdate(-30, 0);
102 eventSender.gestureScrollUpdate(-30, 0);
103 eventSender.gestureScrollEnd(0, 0);
104
105 debug("Gesture scrolling input text should scroll text the specified amount");
106 shouldBe('box.scrollLeft', '60');
107 shouldBe('container.scrollLeft', '0');
108
109 resetScroll();
110
111 eventSender.gestureScrollBegin(gestureX, gestureY);
112 eventSender.gestureScrollUpdate(-fullyScrolled, 0);
113 eventSender.gestureScrollUpdate(-50, 0);
114 eventSender.gestureScrollEnd(0, 0);
115
116 debug("Gesture scrolling input text past scroll width should scroll container div");
117 shouldBe('box.scrollLeft', 'fullyScrolled');
118 shouldBe('container.scrollLeft', '50');
119 }
120
121 function testVerticalScroll()
122 {
123 debug("===Testing vertical scroll behavior===");
124 resetScroll();
125
126 shouldBe('box.scrollTop', '0');
127 shouldBe('container.scrollTop', '0');
128
129 eventSender.gestureScrollBegin(gestureX, gestureY);
130 eventSender.gestureScrollUpdate(0, -30);
131 eventSender.gestureScrollUpdate(0, -30);
132 eventSender.gestureScrollEnd(0, 0);
133
134 debug("Vertically gesture scrolling input text should scroll contain ing div the specified amount");
135 shouldBe('box.scrollTop', '0');
136 shouldBe('container.scrollTop', '60');
137
138 resetScroll();
139
140 shouldBe('box.scrollTop', '0');
141 shouldBe('container.scrollTop', '0');
142
143 eventSender.gestureScrollBegin(gestureX, gestureY);
144 eventSender.gestureScrollUpdateWithoutPropagation(0, -30);
145 eventSender.gestureScrollUpdateWithoutPropagation(0, -30);
146 eventSender.gestureScrollEnd(0, 0);
147
148 debug("Vertically flinging input text should scroll the containing d iv the specified amount");
149 shouldBe('box.scrollTop', '0');
150 shouldBe('container.scrollTop', '60');
151 }
152
153 function testNonOverflowingText()
154 {
155 debug("===Testing non-overflow scroll behavior===");
156 box.value = "short";
157
158 debug("Input box without overflow should not scroll");
159 shouldBe('box.scrollLeft', '0');
160 shouldBe('container.scrollLeft', '0');
161 shouldBeGreaterThanOrEqual('box.clientWidth', 'box.scrollWidth');
162
163 eventSender.gestureScrollBegin(gestureX, gestureY);
164 eventSender.gestureScrollUpdate(-30, 0);
165 eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
166 eventSender.gestureScrollEnd(0, 0);
167
168 shouldBe('box.scrollLeft', '0');
169 shouldBe('container.scrollLeft', '60');
170 }
171
172 if (window.testRunner)
173 testRunner.waitUntilDone();
174
175 function runTest()
176 {
177 box = document.getElementById("box");
178 container = document.getElementById("container");
179
180 if (window.eventSender) {
181 description('This tests that an input text field can be properly scrolled with touch gestures');
182
183 if (checkTestDependencies() && window.eventSender.gestureScrollU pdateWithoutPropagation) {
184 calculateFullScroll();
185 testFlingGestureScroll();
186 testGestureScroll();
187 testVerticalScroll();
188 testNonOverflowingText();
189 testRunner.notifyDone();
190 } else
191 exitIfNecessary();
192 } else {
193 debug("This test requires DumpRenderTree. Gesture-scroll the pa ge to validate the implementation.");
194 }
195 }
196 </script>
197 </body>
198 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698