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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/events/pointerevents/pointerevent_touch-action-pinch_zoom_touch.html

Issue 2126323002: Add support for touch-action: pinch-zoom. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Check in scroll begin for pointer count and add test Created 4 years, 3 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
« third_party/WebKit/LayoutTests/fast/css/touch-action-parsing.html ('K') | « third_party/WebKit/LayoutTests/fast/css/touch-action-parsing-expected.txt ('k') | third_party/WebKit/LayoutTests/imported/wpt_automation/pointerevents/pointerevent_common_input.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>touch-action: pan-up</title> 4 <title>touch-action: pinch-zoom</title>
5 <meta name="assert" content="TA15.4 - With `touch-action: pan-up` on a s wiped or click/dragged element, only panning in the y-axis up direction should b e possible."> 5 <meta name="assert" content="TA15.4 - With `touch-action: pinch-zoom` on a swiped or click/dragged element, only pinch zoom and two finger pan should be possible.">
Rick Byers 2016/09/14 15:47:51 Add a comment saying this should be upstreamed to
dtapuska 2016/09/21 19:29:38 Done.
6 <meta name="viewport" content="width=device-width"> 6 <meta name="viewport" content="width=device-width">
7 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 7 <link rel="stylesheet" type="text/css" href="../../../imported/wpt/point erevents/pointerevent_styles.css">
8 <script src="/resources/testharness.js"></script> 8 <script src="../../../resources/testharness.js"></script>
9 <script src="/resources/testharnessreport.js"></script> 9 <script src="../../../resources/testharnessreport.js"></script>
10 <script src="pointerevent_support.js"></script> 10 <script src="../../../imported/wpt/pointerevents/pointerevent_support.js "></script>
11 <style> 11 <style>
12 #target0 { 12 #target0 {
13 width: 700px; 13 width: 700px;
14 height: 430px; 14 height: 430px;
15 touch-action: pan-up; 15 touch-action: pinch-zoom;
16 } 16 }
17 </style> 17 </style>
18 </head> 18 </head>
19 <body onload="run()"> 19 <body id="target14" onload="run()">
20 <h1>Pointer Events touch-action attribute support</h1> 20 <h1>Pointer Events touch-action attribute support</h1>
21 <h4 id="desc">Test Description: Try to scroll element DOWN (drag up), th en RIGHT (drag left), then UP (drag down). Tap Complete button under the rectang le when done. Expected: only pans in up direction.</h4> 21 <h4 id="desc">Test Description: Place one finger down, pan down. Lift fi nger and place two fingers down and try to pinch zoom. Expected: only pinch zoom s.</h4>
22 <p>Note: this test is for touch-devices only</p> 22 <p>Note: this test is for touch-devices only</p>
23 <div id="target0"> 23 <div id="target0">
24 <p> 24 <p>
25 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di em 25 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di em
26 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam e rat volutpat. 26 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam e rat volutpat.
27 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamc orper suscipit 27 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamc orper suscipit
28 lobortis nisl ut aliquip ex ea commodo consequat. 28 lobortis nisl ut aliquip ex ea commodo consequat.
29 </p> 29 </p>
30 <p>Lorem ipsum dolor sit amet...</p> 30 <p>Lorem ipsum dolor sit amet...</p>
31 <p>Lorem ipsum dolor sit amet...</p> 31 <p>Lorem ipsum dolor sit amet...</p>
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after
76 </div> 76 </div>
77 <input type="button" id="btnComplete" value="Complete test"> 77 <input type="button" id="btnComplete" value="Complete test">
78 <script type='text/javascript'> 78 <script type='text/javascript'>
79 var detected_pointertypes = {}; 79 var detected_pointertypes = {};
80 var test_touchaction = async_test("touch-action attribute test"); 80 var test_touchaction = async_test("touch-action attribute test");
81 add_completion_callback(showPointerTypes); 81 add_completion_callback(showPointerTypes);
82 82
83 function run() { 83 function run() {
84 var target0 = document.getElementById("target0"); 84 var target0 = document.getElementById("target0");
85 var btnComplete = document.getElementById("btnComplete"); 85 var btnComplete = document.getElementById("btnComplete");
86 target0.scrollTop = 200;
87 86
88 var scrollListenerExecuted = false; 87 var scrollListenerExecuted = false;
89 target0.addEventListener("scroll", function(event) { 88 target0.addEventListener("scroll", function(event) {
90 scrollListenerExecuted = true; 89 scrollListenerExecuted = true;
91 assert_less_than_equal(target0.scrollTop, 200);
92 }); 90 });
93 91
94 // Check if "touch-action: pan-up" attribute works properly 92 // Check if "touch-action: pinch-zoom" attribute works properly
95 //TA: 15.4 93 //TA: 15.4
96 on_event(btnComplete, 'click', function(event) { 94 on_event(btnComplete, 'click', function(event) {
97 detected_pointertypes[event.pointerType] = true; 95 detected_pointertypes[event.pointerType] = true;
98 test_touchaction.step(function() { 96 test_touchaction.step(function() {
99 assert_true(scrollListenerExecuted, "scroll listener sho uld have been executed by the end of the test"); 97 assert_true(scrollListenerExecuted, "scroll listener sho uld not have been executed by the end of the test");
100 assert_equals(target0.scrollLeft, 0, "scroll x offset sh ould be 0 in the end of the test"); 98 assert_equals(target0.scrollLeft, 0, "scroll x offset sh ould be 0 in the end of the test");
101 assert_less_than(target0.scrollTop, 200, "scroll y offse t should be less than 200 in the end of the test"); 99 assert_equals(target0.scrollTop, 0, "scroll y offset sho uld be 0 in the end of the test");
100 assert_greater_than(window.visualViewport.scale, 1, "sca le should be greater than 1 in the end of the test");
102 }); 101 });
103 test_touchaction.done(); 102 test_touchaction.done();
104 updateDescriptionComplete(); 103 updateDescriptionComplete();
105 }); 104 });
106 } 105 }
107 </script> 106 </script>
108 <h1>touch-action: pan-up</h1> 107 <h1>touch-action: pinch-zoom</h1>
109 <div id="complete-notice"> 108 <div id="complete-notice">
110 <p>The following pointer types were detected: <span id="pointertype- log"></span>.</p> 109 <p>The following pointer types were detected: <span id="pointertype- log"></span>.</p>
111 </div> 110 </div>
112 <div id="log"></div> 111 <div id="log"></div>
112
113 <script>
114 function inject_input() {
115 return touchScrollInTarget('#target0', 'down').then(function() {
116 return pinchZoomInTarget('#target0', 3.0);
117 }).then(function() {
118 return touchTapInTarget('#btnComplete');
119 });
120 }
121 </script>
122 <script src='../../../imported/wpt_automation/pointerevents/pointerevent _common_input.js'></script>
113 </body> 123 </body>
114 </html> 124 </html>
OLDNEW
« third_party/WebKit/LayoutTests/fast/css/touch-action-parsing.html ('K') | « third_party/WebKit/LayoutTests/fast/css/touch-action-parsing-expected.txt ('k') | third_party/WebKit/LayoutTests/imported/wpt_automation/pointerevents/pointerevent_common_input.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698