wheel-basic.html (3232B)
1 <!doctype html> 2 <head> 3 <meta charset=utf-8> 4 <title>WheelEvent - basic wheel event</title> 5 <style> 6 .testarea{ margin: auto; width: 800px; height: 250px; border: 1px solid grey; position: relative; } 7 8 #wheelbox, #scrollbox { background-color: red; border: 1px solid black; margin: 0; padding: 0; } 9 #wheelbox.green, #scrollbox.green { background-color: green; } 10 #wheelbox { position: absolute; left: 15%; top: 15%; width: 50%; height: 50% } 11 #scrollbox { position: absolute; right: 15%; bottom: 15%; width: 50%; height: 50% } 12 </style> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="/resources/testdriver.js"></script> 16 <script src="/resources/testdriver-actions.js"></script> 17 <script src="/resources/testdriver-vendor.js"></script> 18 <script> 19 setup({explicit_timeout: true}); 20 </script> 21 <script src="/uievents/resources/eventrecorder.js"></script> 22 </head> 23 24 <body> 25 <p><strong>Description</strong>: Verifies that wheel events are captured and sent</p> 26 <p><strong>Instructions</strong>: </p> 27 <ol> 28 <li>Place your mouse pointer over the top box</li> 29 <li>Scroll the mouse wheel to change the box color</li> 30 <li>Move the mouse pointer to the second box</li> 31 <li>Scroll the mouse wheel again to change this box's color</li> 32 </ol> 33 <p><strong>Test Passes</strong> if the box turns green and the word 'PASS' appears below</p> 34 35 <section class="testarea"> 36 <div id="scrollbox"></div> 37 <div id="wheelbox"></div> 38 </section> 39 40 <script> 41 var wheelbox = document.getElementById("wheelbox"); 42 var scrollbox = document.getElementById("scrollbox"); 43 var test_wheel = async_test("wheel event test"); 44 var actions_promise; 45 46 EventRecorder.configure({ 47 mergeEventTypes: ['wheel'], 48 objectMap: { 49 "div#wheelbox": wheelbox, 50 "div#scrollbox": scrollbox 51 } 52 }); 53 54 wheelbox.addRecordedEventListener('wheel', function (e) { 55 e.stopPropagation(); 56 this.className = "green"; 57 }); 58 59 scrollbox.addRecordedEventListener('wheel', function (e) { 60 e.stopPropagation(); 61 this.className = "green"; 62 endTest(); 63 // Make sure the test finishes after all the input actions are completed. 64 actions_promise.then( () => { 65 test_wheel.done(); 66 }); 67 }); 68 69 function endTest() { 70 EventRecorder.stop(); 71 var results = EventRecorder.getRecords(); 72 test_wheel.step(function () { 73 // Check results: 74 assert_equals(results.length, 2, "Two mousemove events"); 75 assert_equals(results[0].event.type, 'wheel', "First event is a wheel event"); 76 assert_equals(results[1].event.type, 'wheel', "Second event is a wheel event"); 77 assert_equals(results[0].event.target, 'div#wheelbox', "First event targetted wheelbox"); 78 assert_equals(results[1].event.target, 'div#scrollbox', "Second event targetted scrollbox"); 79 }); 80 } 81 82 EventRecorder.start(); 83 84 // Inject wheel inputs. 85 actions_promise = new test_driver.Actions() 86 .scroll(0, 0, 0, 10, {origin: wheelbox}) 87 .scroll(160, 50, 0, 20, {origin: scrollbox}) 88 .send(); 89 </script> 90 </body> 91 </html>