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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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 minor fix 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field-expected.txt » ('j') | LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field-expected.txt » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field.html
diff --git a/LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field.html b/LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field.html
new file mode 100644
index 0000000000000000000000000000000000000000..2c364511b562878d19a6491d72d6967812ee3c1d
--- /dev/null
+++ b/LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" href="../../../js/resources/js-test-style.css">
+ <script src="../../../js/resources/js-test-pre.js"></script>
+ <script src="resources/gesture-helpers.js"></script>
+
+ </head>
+
+ <body style="margin:0" onload="runTest()">
+ <div id="container" style="width: 500px; overflow-x: scroll">
+ <form>
+ <input id="box" style="height:100px; width:400px; font-size:xx-large" type="text" value="asasd;flkajsd;flkasjdf;alksdjf;alskdfja;lksdja;sdlfjkas;ldkf"></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
+ </form>
+ <div style="background: green; height: 100px; width: 1000px"></div>
+ </div>
+
+ <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.
+ <div id="console"></div>
+
+ <script type="text/javascript">
+ var gestureX = 200;
+ var gestureY = 50;
+ var box;
+ var container;
+ var scrollableArea;
+
+ function resetScroll()
+ {
+ container.scrollLeft = 0;
+ box.scrollLeft = 0;
+ }
+
+ // Fling to scroll the inner text a little but not all the way
+ function flingGestureScroll()
+ {
+ resetScroll();
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ 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
+ }
+
+ function checkFlingOffset()
+ {
+ debug("Flinging input text should scroll the text");
+ shouldBe('box.scrollLeft', '40');
+ shouldBe('container.scrollLeft', '0');
+
+ flingGestureScrollPastEnd();
+ }
+
+ // Fling to scroll the inner text all the way, make sure the containing div isn't scrolled by the fling
+ function flingGestureScrollPastEnd()
+ {
+ resetScroll();
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdateWithoutPropagation(-scrollableArea, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-300, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-100, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-100, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ setTimeout('checkFlingPastEndOffset();', 100);
+ }
+
+ function checkFlingPastEndOffset()
+ {
+ debug("Flinging input text past the scrollable width shouldn't scroll containing div");
+ shouldBe('box.scrollLeft', 'box.scrollWidth - box.clientWidth');
+ shouldBe('container.scrollLeft', '0');
+
+ flingFullyScrolledText();
+ }
+
+ // Fling the fully scrolled text to make sure it flings the containing div
+ function flingFullyScrolledText()
+ {
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ setTimeout('checkFlingFullyScrolledOffset();', 100);
+ }
+
+ function checkFlingFullyScrolledOffset()
+ {
+ debug("Flinging fully scrolled input text should fling containing div");
+ shouldBe('box.scrollLeft', 'box.scrollWidth - box.clientWidth');
+ shouldBe('container.scrollLeft', '60');
+
+ scrollText();
+ }
+
+ // Scroll input box using gesture scroll a little but not to the end
+ function scrollText()
+ {
+ resetScroll();
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdate(-30, 0);
+ eventSender.gestureScrollUpdate(-30, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ setTimeout('checkScrollOffset();', 100);
+ }
+
+ function checkScrollOffset()
+ {
+ debug("Gesture scrolling input text a bit should scroll the text");
+ shouldBe('box.scrollLeft', '60');
+ shouldBe('container.scrollLeft', '0');
+
+ scrollTextPastEnd();
+ }
+
+ // Scroll input box using gesture scroll past the end of the scroll area. Containing div should scroll
+ function scrollTextPastEnd()
+ {
+ resetScroll();
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdate(-scrollableArea, 0);
+ eventSender.gestureScrollUpdate(-50, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ setTimeout('checkScrollPastEndOffset();', 100);
+ }
+
+ function checkScrollPastEndOffset()
+ {
+ debug("Gesture scrolling input text past scroll width should scroll container div");
+ shouldBe('box.scrollLeft', 'box.scrollWidth - box.clientWidth');
+ shouldBe('container.scrollLeft', '50');
+
+ 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.
+ }
+
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ function runTest()
+ {
+ box = document.getElementById("box");
+ container = document.getElementById("container");
+
+ scrollableArea = box.scrollWidth - box.clientWidth;
+
+ if (window.eventSender) {
+ description('This tests that an input text field can be properly scrolled with touch gestures');
+
+ if (checkTestDependencies() && window.eventSender.gestureScrollUpdateWithoutPropagation)
+ flingGestureScroll();
+ else
+ exitIfNecessary();
+ } else {
+ debug("This test requires DumpRenderTree. Gesture-scroll the page to validate the implementation.");
+ }
+ }
+ </script>
+ </body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field-expected.txt » ('j') | LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field-expected.txt » ('J')

Powered by Google App Engine
This is Rietveld 408576698