| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Event handlers processing algorithm: manual tests</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-event-handler-processing-algorithm"> |
| <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> |
| |
| <style> |
| div[id^="d"] { |
| width: 100px; |
| height: 100px; |
| background-color: blue; |
| } |
| </style> |
| |
| <div id="log"></div> |
| |
| <p>Mouseover these four divs</p> |
| |
| <div id="d1"></div> |
| <div id="d2"></div> |
| |
| <div id="d3" onmouseover="return false"></div> |
| <div id="d4" onmouseover="return true"></div> |
| |
| <script> |
| "use strict"; |
| async_test(t => { |
| const div = document.querySelector("#d1"); |
| |
| div.onmouseover = t.step_func(() => false); |
| div.addEventListener("mouseover", t.step_func_done(e => { |
| assert_equals(e.defaultPrevented, true); |
| })); |
| }, "Listener added via JavaScript, returns false: cancels the event"); |
| |
| async_test(t => { |
| const div = document.querySelector("#d2"); |
| |
| div.onmouseover = t.step_func(() => true); |
| div.addEventListener("mouseover", t.step_func_done(e => { |
| assert_equals(e.defaultPrevented, false); |
| })); |
| }, "Listener added via JavaScript, returns true: does not cancel the event"); |
| |
| async_test(t => { |
| const div = document.querySelector("#d3"); |
| |
| div.addEventListener("mouseover", t.step_func_done(e => { |
| assert_equals(e.defaultPrevented, true); |
| })); |
| }, "Listener added via markup, returns false: cancels the event"); |
| |
| async_test(t => { |
| const div = document.querySelector("#d4"); |
| |
| div.addEventListener("mouseover", t.step_func_done(e => { |
| assert_equals(e.defaultPrevented, false); |
| })); |
| }, "Listener added via markup, returns true: does not cancel the event"); |
| </script> |
