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

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 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 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') | no next file with comments »
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..c83e882f39805513bbb01dbd3015876119966462
--- /dev/null
+++ b/LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field.html
@@ -0,0 +1,198 @@
+<!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; height: 200px; overflow-y: scroll; overflow-x: scroll">
+ <form>
+ <input id="box" size="10" style="height:100px; font-size:xx-large" type="text" value="asasd;flkajsd;flkasjdf;alksdjf;alskdfja;lksdja;sdlfjkas;ldkf"></input>
+ </form>
+ <div style="background: green; height: 1000px; width: 1000px"></div>
+ </div>
+
+ <p id="description"></p>
+ <div id="console"></div>
+
+ <script type="text/javascript">
+ var gestureX = 100;
+ var gestureY = 50;
+ var box;
+ var container;
+ var fullyScrolled;
+
+ function calculateFullScroll()
+ {
+ fullyScrolled = box.scrollWidth - box.clientWidth;
+
+ // FIXME: Mac has a quirk where the text box text can actually be scrolled a little bit
+ // past the end. That is, scrollLeft = (scrollWidth - clientWidth) + 2 on Mac. Once
+ // this is fixed we can remove this adjustment.
+ box.scrollLeft = 100000;
+ fullyScrolled += box.scrollLeft - fullyScrolled;
+
+ resetScroll();
+ }
+
+ function resetScroll()
+ {
+ container.scrollLeft = 0;
+ box.scrollLeft = 0;
+ container.scrollTop = 0;
+ box.scrollTop = 0;
+ }
+
+ function testFlingGestureScroll()
+ {
+ debug("===Testing fling behavior===");
+ resetScroll();
+
+ shouldBe('box.scrollLeft', '0');
+ shouldBe('container.scrollLeft', '0');
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-10, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ debug("Flinging input text should scroll text by the specified amount");
+ shouldBe('box.scrollLeft', '40');
+ shouldBe('container.scrollLeft', '0');
+
+ resetScroll();
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdateWithoutPropagation(-fullyScrolled, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-300, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-100, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-100, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ debug("Flinging input text past the scrollable width shouldn't scroll containing div");
+
+ shouldBe('box.scrollLeft', 'fullyScrolled');
+ shouldBe('container.scrollLeft', '0');
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ debug("Flinging fully scrolled input text should fling containing div");
+ shouldBe('box.scrollLeft', 'fullyScrolled');
+ shouldBe('container.scrollLeft', '60');
+ }
+
+ function testGestureScroll()
+ {
+ debug("===Testing scroll behavior===");
+ resetScroll();
+
+ shouldBe('box.scrollLeft', '0');
+ shouldBe('container.scrollLeft', '0');
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdate(-30, 0);
+ eventSender.gestureScrollUpdate(-30, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ debug("Gesture scrolling input text should scroll text the specified amount");
+ shouldBe('box.scrollLeft', '60');
+ shouldBe('container.scrollLeft', '0');
+
+ resetScroll();
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdate(-fullyScrolled, 0);
+ eventSender.gestureScrollUpdate(-50, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ debug("Gesture scrolling input text past scroll width should scroll container div");
+ shouldBe('box.scrollLeft', 'fullyScrolled');
+ shouldBe('container.scrollLeft', '50');
+ }
+
+ function testVerticalScroll()
+ {
+ debug("===Testing vertical scroll behavior===");
+ resetScroll();
+
+ shouldBe('box.scrollTop', '0');
+ shouldBe('container.scrollTop', '0');
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdate(0, -30);
+ eventSender.gestureScrollUpdate(0, -30);
+ eventSender.gestureScrollEnd(0, 0);
+
+ debug("Vertically gesture scrolling input text should scroll containing div the specified amount");
+ shouldBe('box.scrollTop', '0');
+ shouldBe('container.scrollTop', '60');
+
+ resetScroll();
+
+ shouldBe('box.scrollTop', '0');
+ shouldBe('container.scrollTop', '0');
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdateWithoutPropagation(0, -30);
+ eventSender.gestureScrollUpdateWithoutPropagation(0, -30);
+ eventSender.gestureScrollEnd(0, 0);
+
+ debug("Vertically flinging input text should scroll the containing div the specified amount");
+ shouldBe('box.scrollTop', '0');
+ shouldBe('container.scrollTop', '60');
+ }
+
+ function testNonOverflowingText()
+ {
+ debug("===Testing non-overflow scroll behavior===");
+ box.value = "short";
+
+ debug("Input box without overflow should not scroll");
+ shouldBe('box.scrollLeft', '0');
+ shouldBe('container.scrollLeft', '0');
+ shouldBeGreaterThanOrEqual('box.clientWidth', 'box.scrollWidth');
+
+ eventSender.gestureScrollBegin(gestureX, gestureY);
+ eventSender.gestureScrollUpdate(-30, 0);
+ eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
+ eventSender.gestureScrollEnd(0, 0);
+
+ shouldBe('box.scrollLeft', '0');
+ shouldBe('container.scrollLeft', '60');
+ }
+
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ function runTest()
+ {
+ box = document.getElementById("box");
+ container = document.getElementById("container");
+
+ if (window.eventSender) {
+ description('This tests that an input text field can be properly scrolled with touch gestures');
+
+ if (checkTestDependencies() && window.eventSender.gestureScrollUpdateWithoutPropagation) {
+ calculateFullScroll();
+ testFlingGestureScroll();
+ testGestureScroll();
+ testVerticalScroll();
+ testNonOverflowingText();
+ testRunner.notifyDone();
+ } 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') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698