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

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: Add exception for mac Created 4 years, 2 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 | « third_party/WebKit/LayoutTests/fast/css/touch-action-parsing-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/events/pointerevents/pointerevent_touch-action-verification.html » ('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 <!-- This test should be integrated into web-platform-test when the pinch-zoom
4 is accepted into the specification.
5 See https://github.com/w3c/pointerevents/issues/29 -->
3 <head> 6 <head>
4 <title>touch-action: pan-up</title> 7 <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."> 8 <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.">
6 <meta name="viewport" content="width=device-width"> 9 <meta name="viewport" content="width=device-width">
7 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 10 <link rel="stylesheet" type="text/css" href="../../../imported/wpt/point erevents/pointerevent_styles.css">
8 <script src="/resources/testharness.js"></script> 11 <script src="../../../resources/testharness.js"></script>
9 <script src="/resources/testharnessreport.js"></script> 12 <script src="../../../resources/testharnessreport.js"></script>
10 <script src="pointerevent_support.js"></script> 13 <script src="../../../imported/wpt/pointerevents/pointerevent_support.js "></script>
11 <style> 14 <style>
12 #target0 { 15 #target0 {
13 width: 700px; 16 width: 700px;
14 height: 430px; 17 height: 430px;
15 touch-action: pan-up; 18 touch-action: pinch-zoom;
16 } 19 }
17 </style> 20 </style>
18 </head> 21 </head>
19 <body onload="run()"> 22 <body id="target14" onload="run()">
20 <h1>Pointer Events touch-action attribute support</h1> 23 <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> 24 <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> 25 <p>Note: this test is for touch-devices only</p>
23 <div id="target0"> 26 <div id="target0">
24 <p> 27 <p>
25 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di em 28 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di em
26 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam e rat volutpat. 29 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 30 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamc orper suscipit
28 lobortis nisl ut aliquip ex ea commodo consequat. 31 lobortis nisl ut aliquip ex ea commodo consequat.
29 </p> 32 </p>
30 <p>Lorem ipsum dolor sit amet...</p> 33 <p>Lorem ipsum dolor sit amet...</p>
31 <p>Lorem ipsum dolor sit amet...</p> 34 <p>Lorem ipsum dolor sit amet...</p>
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after
76 </div> 79 </div>
77 <input type="button" id="btnComplete" value="Complete test"> 80 <input type="button" id="btnComplete" value="Complete test">
78 <script type='text/javascript'> 81 <script type='text/javascript'>
79 var detected_pointertypes = {}; 82 var detected_pointertypes = {};
80 var test_touchaction = async_test("touch-action attribute test"); 83 var test_touchaction = async_test("touch-action attribute test");
81 add_completion_callback(showPointerTypes); 84 add_completion_callback(showPointerTypes);
82 85
83 function run() { 86 function run() {
84 var target0 = document.getElementById("target0"); 87 var target0 = document.getElementById("target0");
85 var btnComplete = document.getElementById("btnComplete"); 88 var btnComplete = document.getElementById("btnComplete");
86 target0.scrollTop = 200;
87 89
88 var scrollListenerExecuted = false; 90 var scrollListenerExecuted = false;
89 target0.addEventListener("scroll", function(event) { 91 target0.addEventListener("scroll", function(event) {
90 scrollListenerExecuted = true; 92 scrollListenerExecuted = true;
91 assert_less_than_equal(target0.scrollTop, 200);
92 }); 93 });
93 94
94 // Check if "touch-action: pan-up" attribute works properly 95 // Check if "touch-action: pinch-zoom" attribute works properly
95 //TA: 15.4 96 //TA: 15.4
96 on_event(btnComplete, 'click', function(event) { 97 on_event(btnComplete, 'click', function(event) {
97 detected_pointertypes[event.pointerType] = true; 98 detected_pointertypes[event.pointerType] = true;
98 test_touchaction.step(function() { 99 test_touchaction.step(function() {
99 assert_true(scrollListenerExecuted, "scroll listener sho uld have been executed by the end of the test"); 100 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"); 101 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"); 102 assert_equals(target0.scrollTop, 0, "scroll y offset sho uld be 0 in the end of the test");
103 assert_greater_than(window.visualViewport.scale, 1, "sca le should be greater than 1 in the end of the test");
102 }); 104 });
103 test_touchaction.done(); 105 test_touchaction.done();
104 updateDescriptionComplete(); 106 updateDescriptionComplete();
105 }); 107 });
106 } 108 }
107 </script> 109 </script>
108 <h1>touch-action: pan-up</h1> 110 <h1>touch-action: pinch-zoom</h1>
109 <div id="complete-notice"> 111 <div id="complete-notice">
110 <p>The following pointer types were detected: <span id="pointertype- log"></span>.</p> 112 <p>The following pointer types were detected: <span id="pointertype- log"></span>.</p>
111 </div> 113 </div>
112 <div id="log"></div> 114 <div id="log"></div>
115
116 <script>
117 function inject_input() {
118 return touchScrollInTarget('#target0', 'down').then(function() {
119 return pinchZoomInTarget('#target0', 3.0);
120 }).then(function() {
121 return touchTapInTarget('#btnComplete');
122 });
123 }
124 </script>
125 <script src='../../../imported/wpt_automation/pointerevents/pointerevent _common_input.js'></script>
113 </body> 126 </body>
114 </html> 127 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css/touch-action-parsing-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/events/pointerevents/pointerevent_touch-action-verification.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698