pointerevent_touch-action-table-test_touch-manual.html (6463B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Table touch-action test</title> 5 <meta name="assert" content="TA15.19 The touch-action CSS property applies to all elements except table rows, row groups, table columns, and column groups."> 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 #testtable{ 21 color: white; 22 width: 350px; 23 padding: 0px 0px 200px 0px; 24 border: 2px solid green; 25 } 26 .testtd, .testth { 27 border: 2px solid green; 28 height: 80px; 29 } 30 #row1 { 31 touch-action: none; 32 } 33 #cell3 { 34 touch-action: none; 35 } 36 </style> 37 </head> 38 <body onload="run()"> 39 <h2>Pointer Events touch-action attribute support</h2> 40 <h4 id="desc">Test Description: Try to scroll element DOWN starting your touch over the 1st Row. Wait for description update.</h4> 41 <p>Note: this test is for touch only</p> 42 <div id="target0"> 43 <table id="testtable"> 44 <caption>The caption, first row element, and cell 3 have touch-action: none.</caption> 45 <tr id="row1"><th class="testth">Header 1 <td class="testtd">Cell 1 <td class="testtd">Cell 2</tr> 46 <tr id="row2"><th class="testth">Header 2 <td id="cell3" class="testtd">Cell 3 <td class="testtd">Cell 4</tr> 47 <tr id="row3"> <th class="testth">Header 3 <td class="testtd">Cell 5 <td class="testtd"> Cell 6</tr> 48 </table> 49 </div> 50 <br> 51 <input type="button" id="btnComplete" value="Complete test"> 52 53 <script type='text/javascript'> 54 var detected_pointertypes = {}; 55 var xScrollIsReceived = false; 56 var yScrollIsReceived = false; 57 var xScr0, yScr0, xScr1, yScr1; 58 var scrollReturnInterval = 1000; 59 var isFirstPart = true; 60 setup({ explicit_timeout: true }); 61 add_completion_callback(showPointerTypes); 62 63 function run() { 64 var target0 = document.getElementById("target0"); 65 var btnComplete = document.getElementById("btnComplete"); 66 67 //TA 15.19 68 var test_touchaction_cell = async_test("touch-action attribute test on the cell"); 69 var test_touchaction_row = async_test("touch-action attribute test on the row"); 70 71 xScr0 = target0.scrollLeft; 72 yScr0 = target0.scrollTop; 73 74 on_event(btnComplete, 'click', function(event) { 75 test_touchaction_cell.step(function() { 76 assert_equals(target0.scrollLeft, 0, "table scroll x offset should be 0 in the end of the test"); 77 assert_equals(target0.scrollTop, 0, "table scroll y offset should be 0 in the end of the test"); 78 assert_true(xScrollIsReceived && yScrollIsReceived, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively"); 79 }); 80 test_touchaction_cell.done(); 81 updateDescriptionComplete(); 82 }); 83 84 on_event(btnComplete, 'pointerdown', function(event) { 85 detected_pointertypes[event.pointerType] = true; 86 }); 87 88 on_event(target0, 'scroll', function(event) { 89 if(isFirstPart) { 90 xScr1 = target0.scrollLeft; 91 yScr1 = target0.scrollTop; 92 93 if(xScr1 != xScr0) { 94 xScrollIsReceived = true; 95 } 96 97 if(yScr1 != yScr0) { 98 test_touchaction_row.step(function () { 99 yScrollIsReceived = true; 100 }); 101 updateDescriptionSecondStepTable(target0, scrollReturnInterval); 102 } 103 104 if(xScrollIsReceived && yScrollIsReceived) { 105 test_touchaction_row.done(); 106 updateDescriptionThirdStepTable(target0, scrollReturnInterval, function() { 107 setTimeout(function() { 108 isFirstPart = false; 109 }, scrollReturnInterval); // avoid immediate triggering while scroll is still being performed 110 }); 111 } 112 } 113 else { 114 test_touchaction_cell.step(failOnScroll, "scroll received while shouldn't"); 115 } 116 }); 117 } 118 119 function updateDescriptionSecondStepTable(target, returnInterval, element) { 120 window.setTimeout(function() { 121 objectScroller(target, 'up', 0); 122 } 123 , returnInterval); 124 document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT staring your touch over the Row 1"; 125 } 126 127 function updateDescriptionThirdStepTable(target, returnInterval, callback = null) { 128 window.setTimeout(function() { 129 objectScroller(target, 'left', 0); 130 if (callback) { 131 callback(); 132 } 133 } 134 , returnInterval); 135 document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the Cell 3"; 136 } 137 138 </script> 139 <h1>touch-action: none</h1> 140 <div id="complete-notice"> 141 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 142 </div> 143 <div id="log"></div> 144 </body> 145 </html>