pointerevent_disabled_form_control.html (4400B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Events properties tests</title> 5 <meta name="viewport" content="width=device-width"> 6 <meta name="variant" content="?mouse"> 7 <meta name="variant" content="?touch"> 8 <meta name="variant" content="?pen"> 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 src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <script src="/resources/testdriver-vendor.js"></script> 15 <!-- Additional helper script for common checks across event types --> 16 <script type="text/javascript" src="pointerevent_support.js"></script> 17 <script> 18 var inputSource = location.search.substring(1); 19 var detected_pointertypes = {}; 20 var detected_eventTypes = {}; 21 var eventList = ['pointerout', 'pointerover', 'pointerenter', 'pointermove', 'pointerdown', 'gotpointercapture', 'pointerup', 'lostpointercapture', 'pointerleave']; 22 23 function resetTestState() { 24 detected_eventTypes = {}; 25 } 26 function run() { 27 var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", [inputSource]); 28 var target = document.getElementById("target0"); 29 var actions_promise; 30 31 eventList.forEach(function(eventName) { 32 on_event(target, eventName, function (event) { 33 detected_eventTypes[event.type] = true; 34 detected_pointertypes[event.pointerType] = true; 35 36 if (event.type === "pointerdown") { 37 target.setPointerCapture(event.pointerId); 38 } 39 40 if (Object.keys(detected_eventTypes).length == eventList.length) { 41 // Make sure the test finishes after all the input actions are completed. 42 actions_promise.then( () => { 43 test_pointerEvent.done(); 44 }); 45 } 46 }); 47 }); 48 on_event(target, "click", function (event) { 49 assert_unreached("click should not fire on disabled element"); 50 }); 51 52 // Inject inputs. 53 switch (inputSource) { 54 case "touch": 55 actions_promise = pointerDragInTarget(inputSource, target, 'right'); 56 break; 57 case "mouse": 58 case "pen": 59 actions_promise = clickInTarget(inputSource, target).then(function() { 60 return new test_driver.Actions() 61 .addPointer(inputSource + "Pointer1", inputSource) 62 .pointerMove(0, 0, {origin: target}) 63 .pointerMove(0, 0) 64 .send(); 65 }); 66 break; 67 } 68 } 69 </script> 70 <style> 71 #target0 { 72 background: purple; 73 border: 1px solid orange; 74 touch-action: none; 75 width: 200px; 76 height: 100px; 77 } 78 </style> 79 </head> 80 <body onload="run()"> 81 <h1> Pointer Event: pointerevents fire to disabled form controls</h1> 82 <h2 id="pointerTypeDescription"></h2> 83 <h4> 84 Test Description: 85 Pointerevents are dispatched to disabled form controls. 86 </h4> 87 <div id="instructions"> 88 Use the mouse or pen to press on the purple button. Or with touch, tap on the purple box. 89 </div> 90 <button id="target0" disabled>Disabled button</button> 91 <div id="complete-notice"> 92 <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> 93 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 94 <p>Refresh the page to run the tests again with a different pointer type.</p> 95 </div> 96 <div id="log"></div> 97 </body> 98 </html>