pointerevent_touch-action-svg-test_touch-manual.html (5295B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>SVG test</title> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="pointerevent_support.js"></script> 10 <style> 11 #target0 { 12 height: 350px; 13 width: 300px; 14 overflow-y: auto; 15 background: black; 16 padding: 100px; 17 position: relative; 18 } 19 </style> 20 </head> 21 <body onload="run()"> 22 <h2>Pointer Events touch-action attribute support</h2> 23 <h4 id="desc">Test Description: Try to scroll black element DOWN moving your touch outside of the red border. Wait for description update.</h4> 24 <p>Note: this test is for touch only</p> 25 <div id="target0"> 26 <svg id="testSvg" width="555" height="555" style="touch-action: none; border: 4px double red;"> 27 <circle cx="305" cy="305" r="250" stroke="green" stroke-width="4" fill="yellow" /> 28 Sorry, your browser does not support inline SVG. 29 </svg> 30 </div> 31 <br> 32 <input type="button" id="btnComplete" value="Complete test"> 33 <script type='text/javascript'> 34 var detected_pointertypes = {}; 35 var xScrollIsReceived = false; 36 var yScrollIsReceived = false; 37 var xScr0, yScr0, xScr1, yScr1; 38 var scrollReturnInterval = 1000; 39 var isFirstPart = true; 40 setup({ explicit_timeout: true }); 41 add_completion_callback(showPointerTypes); 42 43 function run() { 44 var target0 = document.getElementById("target0"); 45 var btnComplete = document.getElementById("btnComplete"); 46 47 var test_touchaction_div = async_test("touch-action attribute test out of SVG"); 48 var test_touchaction_svg = async_test("touch-action attribute test in SVG"); 49 50 xScr0 = target0.scrollLeft; 51 yScr0 = target0.scrollTop; 52 53 on_event(btnComplete, 'click', function(event) { 54 test_touchaction_svg.step(function() { 55 assert_equals(target0.scrollLeft, 0, "SVG scroll x offset should be 0 in the end of the test"); 56 assert_equals(target0.scrollTop, 0, "SVG scroll y offset should be 0 in the end of the test"); 57 }); 58 test_touchaction_svg.done(); 59 updateDescriptionComplete(); 60 }); 61 62 on_event(btnComplete, 'pointerdown', function(event) { 63 detected_pointertypes[event.pointerType] = true; 64 }); 65 66 on_event(target0, 'scroll', function(event) { 67 if(isFirstPart) { 68 xScr1 = target0.scrollLeft; 69 yScr1 = target0.scrollTop; 70 71 if(xScr1 != xScr0) { 72 xScrollIsReceived = true; 73 } 74 75 if(yScr1 != yScr0) { 76 test_touchaction_div.step(function () { 77 yScrollIsReceived = true; 78 assert_true(true, "y-scroll received."); 79 }); 80 updateDescriptionSecondStepSVG(); 81 } 82 83 if(xScrollIsReceived && yScrollIsReceived) { 84 test_touchaction_div.done(); 85 updateDescriptionThirdStepSVG(); 86 setTimeout(function() { 87 isFirstPart = false; 88 }, 2 * scrollReturnInterval); 89 } 90 } 91 }); 92 } 93 94 function updateDescriptionSecondStepSVG() { 95 window.setTimeout(function() { 96 objectScroller(target0, 'up', 0);} 97 , scrollReturnInterval); 98 document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT moving your touch outside of the red border"; 99 } 100 101 function updateDescriptionThirdStepSVG() { 102 window.setTimeout(function() { 103 objectScroller(target0, 'left', 0);} 104 , scrollReturnInterval); 105 document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the circle. Tap Complete button under the rectangle when done"; 106 } 107 108 function objectScroller(target, direction, value) { 109 if (direction == 'up') { 110 target.scrollTop = 0; 111 } else if (direction == 'left') { 112 target.scrollLeft = 0; 113 } 114 } 115 </script> 116 <h1>touch-action: none</h1> 117 <div id="complete-notice"> 118 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 119 </div> 120 <div id="log"></div> 121 </body> 122 </html>