pointerevent_touch-action-button-test_touch-manual.html (4817B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Button touch-action test</title> 5 <meta name="assert" content="TA15.11 -The touch-action CSS property applies to button 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 button { 21 touch-action: none; 22 width: 350px; 23 height: 350px; 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 <button id="testButton">Test Button</button> 34 </div> 35 <br> 36 <input type="button" id="btnComplete" value="Complete test"> 37 38 <script type='text/javascript'> 39 var detected_pointertypes = {}; 40 var xScrollIsReceived = false; 41 var yScrollIsReceived = false; 42 var xScr0, yScr0, xScr1, yScr1; 43 var scrollReturnInterval = 1000; 44 var isFirstPart = true; 45 setup({ explicit_timeout: true }); 46 add_completion_callback(showPointerTypes); 47 48 function run() { 49 var target0 = document.getElementById("target0"); 50 var btnComplete = document.getElementById("btnComplete"); 51 52 //TA 15.11 53 var test_touchaction_div = async_test("touch-action attribute test out of element"); 54 var test_touchaction_button = async_test("touch-action attribute test in element"); 55 56 xScr0 = target0.scrollLeft; 57 yScr0 = target0.scrollTop; 58 59 on_event(btnComplete, 'click', function(event) { 60 test_touchaction_button.step(function() { 61 assert_equals(target0.scrollLeft, 0, "button scroll x offset should be 0 in the end of the test"); 62 assert_equals(target0.scrollTop, 0, "button scroll y offset should be 0 in the end of the test"); 63 assert_true(xScrollIsReceived && yScrollIsReceived, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively"); 64 }); 65 test_touchaction_button.done(); 66 updateDescriptionComplete(); 67 }); 68 69 on_event(btnComplete, 'pointerdown', function(event) { 70 detected_pointertypes[event.pointerType] = true; 71 }); 72 73 on_event(target0, 'scroll', function(event) { 74 if(isFirstPart) { 75 xScr1 = target0.scrollLeft; 76 yScr1 = target0.scrollTop; 77 78 if(xScr1 != xScr0) { 79 xScrollIsReceived = true; 80 } 81 82 if(yScr1 != yScr0) { 83 test_touchaction_div.step(function () { 84 yScrollIsReceived = true; 85 }); 86 updateDescriptionSecondStepTouchActionElement(target0, scrollReturnInterval); 87 } 88 89 if(xScrollIsReceived && yScrollIsReceived) { 90 test_touchaction_div.done(); 91 updateDescriptionThirdStepTouchActionElement(target0, scrollReturnInterval, function () { 92 setTimeout(function() { 93 isFirstPart = false; 94 }, scrollReturnInterval); // avoid immediate triggering while scroll is still being performed 95 }); 96 } 97 } 98 else { 99 test_touchaction_button.step(failOnScroll, "scroll received while shouldn't"); 100 } 101 }); 102 } 103 </script> 104 <h1>touch-action: none</h1> 105 <div id="complete-notice"> 106 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 107 </div> 108 <div id="log"></div> 109 </body> 110 </html>