pointerevent_touch-action-span-test_touch-manual.html (5003B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Span touch-action test</title> 5 <meta name="assert" content="TA15.18 - The touch-action CSS property applies to all elements except non-replaced inline elements." 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="pointerevent_support.js"></script> 11 <style> 12 #target0 { 13 height: 150px; 14 width: 200px; 15 overflow-y: auto; 16 background: black; 17 padding: 100px; 18 position: relative; 19 } 20 #testspan { 21 touch-action: none; 22 font-size: 72pt; 23 padding: 0px 0px 180px 0px; 24 border: 2px solid red; 25 } 26 </style> 27 </head> 28 <body onload="run()"> 29 <h2>Pointer Events touch-action attribute support</h2> 30 <h4 id="desc">Test Description: Try to scroll black element DOWN moving your touch outside of the red border. Wait for description update.</h4> 31 <p>Note: this test is for touch only</p> 32 <div id="target0"> 33 <span id="testspan"> 34 Test span 35 </span> 36 </div> 37 <input type="button" id="btnComplete" value="Complete test"> 38 39 <script type='text/javascript'> 40 var detected_pointertypes = {}; 41 42 var xScrollIsReceived = false; 43 var yScrollIsReceived = false; 44 var failScrollIsReceived = false; 45 var xScr0, yScr0, xScr1, yScr1; 46 var scrollReturnInterval = 500; 47 var isFirstPart = true; 48 setup({ explicit_timeout: true }); 49 add_completion_callback(showPointerTypes); 50 51 function run() { 52 var target0 = document.getElementById("target0"); 53 var btnComplete = document.getElementById("btnComplete"); 54 55 //TA 15.18 56 var test_touchaction_div = async_test("touch-action attribute test out of element"); 57 var test_touchaction_span = async_test("touch-action attribute test in element"); 58 59 xScr0 = target0.scrollLeft; 60 yScr0 = target0.scrollTop; 61 62 on_event(btnComplete, 'click', function(event) { 63 test_touchaction_span.step(function() { 64 assert_not_equals(target0.scrollLeft, 0, "span scroll x offset should not be 0 in the end of the test"); 65 assert_not_equals(target0.scrollTop, 0, "span scroll y offset should not be 0 in the end of the test"); 66 assert_true(!isFirstPart, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively"); 67 }); 68 test_touchaction_span.done(); 69 updateDescriptionComplete(); 70 }); 71 72 on_event(btnComplete, 'pointerdown', function(event) { 73 detected_pointertypes[event.pointerType] = true; 74 }); 75 76 on_event(target0, 'scroll', function(event) { 77 if(isFirstPart) { 78 xScr1 = target0.scrollLeft; 79 yScr1 = target0.scrollTop; 80 81 if(xScr1 != xScr0) { 82 xScrollIsReceived = true; 83 } 84 85 if(yScr1 != yScr0) { 86 test_touchaction_div.step(function () { 87 yScrollIsReceived = true; 88 }); 89 updateDescriptionSecondStepTouchActionElement(target0, scrollReturnInterval); 90 } 91 92 if(xScrollIsReceived && yScrollIsReceived) { 93 test_touchaction_div.done(); 94 updateDescriptionThirdStepTouchActionElement(target0, scrollReturnInterval, function () { 95 setTimeout(function() { 96 isFirstPart = false; 97 xScr0 = target0.scrollLeft; 98 xScr0 = target0.scrollLeft; 99 xScrollIsReceived = false; 100 yScrollIsReceived = false; 101 }, scrollReturnInterval); // avoid immediate triggering while scroll is still being performed 102 }); 103 } 104 } 105 }); 106 } 107 </script> 108 <h1>touch-action: none</h1> 109 <div id="complete-notice"> 110 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 111 </div> 112 <div id="log"></div> 113 </body> 114 </html>