pointerevent_touch-action-rotated-divs_touch-manual.html (3291B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Event: touch-action in rotated divs</title> 5 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> 6 <link rel="author" title="Google" href="http://www.google.com "/> 7 <link rel="help" href="https://w3c.github.io/pointerevents/#declaring-candidate-regions-for-default-touch-behaviors" /> 8 <meta name="assert" content="Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space"/> 9 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script type="text/javascript" src="pointerevent_support.js"></script> 13 <script type="text/javascript"> 14 var event_log = []; 15 16 function resetTestState() { 17 event_log = []; 18 } 19 20 function run() { 21 var current_test = 0; 22 var test_params = [ 23 { 24 test_obj: setup_pointerevent_test("'touch-action: pan-x' in a rotated div", ["touch"]), 25 touch_action: "pan-x", 26 expected_events: "pointercancel, pointercancel, pointerup, pointerup" 27 }, 28 { 29 test_obj: setup_pointerevent_test("'touch-action: pan-y' in a rotated div", ["touch"]), 30 touch_action: "pan-y", 31 expected_events: "pointerup, pointerup, pointercancel, pointercancel" 32 }, 33 ]; 34 35 function setCurrentTouchAction() { 36 document.getElementById("target").style.touchAction = test_params[current_test].touch_action; 37 } 38 39 setCurrentTouchAction(); 40 41 on_event(document.getElementById("btnDone"), "click", function() { 42 test_params[current_test].test_obj.step(function () { 43 assert_equals(event_log.join(", "), test_params[current_test].expected_events); 44 }); 45 46 event_log = []; 47 48 test_params[current_test++].test_obj.done(); 49 if (current_test < 2) 50 setCurrentTouchAction(); 51 }); 52 53 ["pointerup", "pointercancel"].forEach(function(eventName) { 54 on_event(document.getElementById("target"), eventName, function (event) { 55 event_log.push(event.type); 56 }); 57 }); 58 } 59 </script> 60 <style> 61 #target { 62 width: 200px; 63 height: 200px; 64 margin: 10px; 65 float: left; 66 touch-action: none; 67 background-color: green; 68 transform: rotate(-90deg); 69 } 70 71 #btnDone { 72 padding: 20px; 73 } 74 </style> 75 </head> 76 <body onload="run()"> 77 <h1>Pointer Event: touch-action in rotated divs</h1> 78 <h2 id="pointerTypeDescription"></h2> 79 <h4> 80 Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space 81 </h4> 82 <ol> 83 <li>Make 4 separate touch drags on Green, in this order: drag UP, then drag DOWN, then drag LEFT, then drag RIGHT.</li> 84 <li>Tap on Done.</li> 85 <li>Repeat the touch drags once again, in the same order.</li> 86 <li>Tap on Done.</li> 87 </ol> 88 <div id="target"></div> 89 <input type="button" id="btnDone" value="Done" /> 90 <div id="log"></div> 91 </body> 92 </html>