LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field.html - Issue 22488004: Made text inside <input> elements scrollable using touch gestures

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 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 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') | LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field-expected.txt » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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 Unless it would be too much of a pain, maybe specify the <input> attribute size=n, where n is the number of characters (and then make the font the default size)? That way someone reading the html can be confident that there is/is not a horizontal overflow. Maybe this change isn't too worthwhile, though... just a thought. bokan 2013/08/12 16:19:29 I made the text large so it can be easily hit with Show quoted text On 2013/08/08 20:01:16, tdanderson wrote: > Unless it would be too much of a pain, maybe specify the <input> attribute > size=n, where n is the number of characters (and then make the font the default > size)? That way someone reading the html can be confident that there is/is not a > horizontal overflow. Maybe this change isn't too worthwhile, though... just a > thought. I made the text large so it can be easily hit with a touch screen and so it's easy to target in the test, but I've changed the input box to use size=10.
	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 Also including something in this/another test to verify that everything works as intended when the user tries to scroll a text field for which the text does not overflow. bokan 2013/08/12 16:19:29 Done. Show quoted text On 2013/08/08 20:01:16, tdanderson wrote: > Also including something in this/another test to verify that everything works as > intended when the user tries to scroll a text field for which the text does not > overflow. 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 Your actual reviewer probably won't like these setTimeout()s. Are they necessary? bokan 2013/08/12 16:19:29 I thought event sender sent events asynchronously Show quoted text On 2013/08/08 20:01:16, tdanderson wrote: > Your actual reviewer probably won't like these setTimeout()s. Are they > necessary? I thought event sender sent events asynchronously but it looks like I was wrong, I've rearranged everything without these kinds of calls.
	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 Once you're done testing horizontal fling and scroll, I would reset the state again and check that everything works as intended with vertical fling/scroll. bokan 2013/08/12 16:19:29 Done. Show quoted text On 2013/08/08 20:01:16, tdanderson wrote: > Once you're done testing horizontal fling and scroll, I would reset the state > again and check that everything works as intended with vertical fling/scroll. 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