pointerevent_touch-action-svg-none-test_touch.html (3636B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>SVG test</title> 5 <meta name="timeout" content="long"> 6 <meta name="viewport" content="width=device-width"> 7 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="pointerevent_support.js"></script> 14 <style> 15 #target0 { 16 height: 350px; 17 width: 300px; 18 overflow-y: auto; 19 background: black; 20 padding: 100px; 21 position: relative; 22 } 23 </style> 24 </head> 25 <body onload="run()"> 26 <h2>Pointer Events touch-action attribute support</h2> 27 <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the circle. Tap Complete button under the rectangle when done.</h4> 28 <p>Note: this test is for touch only</p> 29 <div id="target0"> 30 <svg id="testSvg" width="555" height="555" style="touch-action: none; border: 4px double red;"> 31 <circle cx="305" cy="305" r="250" stroke="green" stroke-width="4" fill="yellow" /> 32 Sorry, your browser does not support inline SVG. 33 </svg> 34 </div> 35 <br> 36 <input type="button" id="btnComplete" value="Complete test"> 37 <script type='text/javascript'> 38 var detected_pointertypes = {}; 39 add_completion_callback(showPointerTypes); 40 41 function run() { 42 var target0 = document.getElementById("target0"); 43 var btnComplete = document.getElementById("btnComplete"); 44 var actions_promise; 45 46 var test_touchaction = async_test("touch-action attribute test in SVG"); 47 48 on_event(btnComplete, 'click', function(event) { 49 test_touchaction.step(function() { 50 assert_equals(target0.scrollLeft, 0, "SVG scroll x offset should be 0 in the end of the test"); 51 assert_equals(target0.scrollTop, 0, "SVG scroll y offset should be 0 in the end of the test"); 52 }); 53 54 // Make sure the test finishes after all the input actions are completed. 55 actions_promise.then( () => { 56 test_touchaction.done(); 57 }); 58 updateDescriptionComplete(); 59 }); 60 61 on_event(btnComplete, 'pointerdown', function(event) { 62 detected_pointertypes[event.pointerType] = true; 63 }); 64 65 on_event(target0, 'scroll', function(event) { 66 test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); 67 }); 68 69 // Inject touch inputs. 70 actions_promise = touchScrollInTarget(testSvg, 'down').then(function() { 71 return touchScrollInTarget(testSvg, 'right'); 72 }).then(function() { 73 return clickInTarget("touch", btnComplete); 74 }); 75 } 76 </script> 77 <h1>touch-action: none</h1> 78 <div id="complete-notice"> 79 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 80 </div> 81 <div id="log"></div> 82 </body> 83 </html>