pointerevent_touch-action-table-none-test_touch.html (6088B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Table touch-action test</title> 5 <meta name="timeout" content="long"> 6 <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."> 7 <meta name="viewport" content="width=device-width"> 8 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <script src="pointerevent_support.js"></script> 15 <style> 16 #target0 { 17 height: 150px; 18 width: 200px; 19 overflow-y: auto; 20 background: black; 21 padding: 100px; 22 position: relative; 23 } 24 #testtable{ 25 color: white; 26 width: 350px; 27 padding: 0px 0px 200px 0px; 28 border: 2px solid green; 29 } 30 .testtd, .testth { 31 border: 2px solid green; 32 height: 80px; 33 } 34 #row1 { 35 touch-action: none; 36 } 37 #cell3 { 38 touch-action: none; 39 } 40 </style> 41 </head> 42 <body onload="run()"> 43 <h2>Pointer Events touch-action attribute support</h2> 44 <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT starting your touch over the 1st Row. <br> 45 And try to scroll element DOWN then RIGHT starting your touch inside of the Cell 3, then tap complete button.</h4> 46 <p>Note: this test is for touch only</p> 47 <div id="target0"> 48 <table id="testtable"> 49 <caption>The caption, first row element, and cell 3 have touch-action: none.</caption> 50 <tr id="row1"><th class="testth">Header 1 <td class="testtd">Cell 1 <td class="testtd">Cell 2</tr> 51 <tr id="row2"><th class="testth">Header 2 <td id="cell3" class="testtd">Cell 3 <td class="testtd">Cell 4</tr> 52 <tr id="row3"> <th class="testth">Header 3 <td class="testtd">Cell 5 <td class="testtd"> Cell 6</tr> 53 </table> 54 </div> 55 <br> 56 <input type="button" id="btnComplete" value="Complete test"> 57 58 <script type='text/javascript'> 59 var detected_pointertypes = {}; 60 var xScrollIsReceived = false; 61 var yScrollIsReceived = false; 62 var xScr0, yScr0, xScr1, yScr1; 63 var isFirstPart = true; 64 add_completion_callback(showPointerTypes); 65 66 function run() { 67 var target0 = document.getElementById("target0"); 68 var btnComplete = document.getElementById("btnComplete"); 69 var actions_promise; 70 71 //TA 15.19 72 var test_touchaction_cell = async_test("touch-action attribute test on the cell"); 73 var test_touchaction_row = async_test("touch-action attribute test on the row"); 74 75 xScr0 = target0.scrollLeft; 76 yScr0 = target0.scrollTop; 77 78 on_event(btnComplete, 'click', function(event) { 79 test_touchaction_cell.step(function() { 80 assert_equals(target0.scrollLeft, xScr1, "table scroll x offset should be 0 in the end of the test"); 81 assert_equals(target0.scrollTop, yScr1, "table scroll y offset should be 0 in the end of the test"); 82 assert_true(xScrollIsReceived && yScrollIsReceived, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively"); 83 }); 84 85 // Make sure the test finishes after all the input actions are completed. 86 actions_promise.then( () => { 87 test_touchaction_cell.done(); 88 }); 89 updateDescriptionComplete(); 90 }); 91 92 on_event(btnComplete, 'pointerdown', function(event) { 93 detected_pointertypes[event.pointerType] = true; 94 }); 95 96 on_event(target0, 'scroll', function(event) { 97 if(isFirstPart) { 98 xScr1 = target0.scrollLeft; 99 yScr1 = target0.scrollTop; 100 101 if(xScr1 != xScr0) { 102 xScrollIsReceived = true; 103 } 104 105 if(yScr1 != yScr0) { 106 test_touchaction_row.step(function () { 107 yScrollIsReceived = true; 108 }); 109 } 110 111 if(xScrollIsReceived && yScrollIsReceived) { 112 test_touchaction_row.done(); 113 } 114 } 115 else { 116 test_touchaction_cell.step(failOnScroll, "scroll received while shouldn't"); 117 } 118 }); 119 120 // Inject touch inputs. 121 actions_promise = touchScrollInTarget(row1, 'down').then(function() { 122 return touchScrollInTarget(row1, 'right'); 123 }).then(function() { 124 isFirstPart = false; 125 return touchScrollInTarget(cell3, 'down'); 126 }).then(function() { 127 return touchScrollInTarget(cell3, 'right'); 128 }).then(function() { 129 return clickInTarget("touch", btnComplete); 130 }); 131 } 132 </script> 133 <h1>touch-action: none</h1> 134 <div id="complete-notice"> 135 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 136 </div> 137 <div id="log"></div> 138 </body> 139 </html>