mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-01-24 02:03:06 -05:00
LibWeb: Add a test for the new event dispatcher
This commit is contained in:
Luke
Andreas Kling
parent
c5e15d9282
commit
e68348298f
Notes:
sideshowbarker
2024-07-19 01:18:38 +09:00
Author: https://github.com/Lubrsi Commit: https://github.com/SerenityOS/serenity/commit/e68348298f1 Pull-request: https://github.com/SerenityOS/serenity/pull/4131 Reviewed-by: https://github.com/awesomekling
2 changed files with 187 additions and 0 deletions
186
Base/res/html/misc/event-bubbling-and-multiple-listeners.html
Normal file
186
Base/res/html/misc/event-bubbling-and-multiple-listeners.html
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Event Bubbling and Multiple Listeners</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>There are four lists listening to the mousedown event.</p>
|
||||
<ul>
|
||||
<li>The first list demonstrates standard event bubbling and multiple listeners.</li>
|
||||
<li>The second list demonstrates stopPropagation()</li>
|
||||
<li>The third list demonstrates stopImmediatePropagation()</li>
|
||||
<li>The fourth list removes the second listener from within the first listener.</li>
|
||||
</ul>
|
||||
<p>For the test to pass, it must match the reference.</p>
|
||||
<p>Only the first click counts. (I didn't want to figure out stopping multiple clicks)</p>
|
||||
|
||||
<h2>List One:</h2>
|
||||
<h3>Result:</h3>
|
||||
<div class="listener1">
|
||||
<p></p>
|
||||
<div class="listener1">
|
||||
<p></p>
|
||||
<p class="listener1" style="cursor: pointer;">
|
||||
Click me!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Reference:</h3>
|
||||
<div>
|
||||
<p>3 (PASS)</p>
|
||||
<p>2 (PASS)</p>
|
||||
<p>1 (PASS)</p>
|
||||
</div>
|
||||
|
||||
<h2>List Two:</h2>
|
||||
<h3>Result:</h3>
|
||||
<div class="listener2">
|
||||
<p></p>
|
||||
<div class="listener2">
|
||||
<p></p>
|
||||
<p class="listener2" style="cursor: pointer;">
|
||||
Click me!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Reference:</h3>
|
||||
<div>
|
||||
<p>2 (PASS)</p>
|
||||
<p>1 (PASS)</p>
|
||||
</div>
|
||||
|
||||
<h2>List Three:</h2>
|
||||
<p>(Test fails if FAIL is shown on screen)</p>
|
||||
<h3>Result:</h3>
|
||||
<div class="listener3">
|
||||
<p></p>
|
||||
<div class="listener3">
|
||||
<p></p>
|
||||
<p class="listener3" style="cursor: pointer;">
|
||||
Click me!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Reference:</h3>
|
||||
<div>
|
||||
<p>1 (PASS)</p>
|
||||
</div>
|
||||
|
||||
<h2>List Four:</h2>
|
||||
<p>(Test fails if FAIL is shown on screen)</p>
|
||||
<h3>Result:</h3>
|
||||
<div class="listener4">
|
||||
<p></p>
|
||||
<div class="listener4">
|
||||
<p></p>
|
||||
<p class="listener4" style="cursor: pointer;">
|
||||
Click me!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Reference:</h3>
|
||||
<div>
|
||||
<p>3 (PASS)</p>
|
||||
<p>2 (PASS)</p>
|
||||
<p>1 (PASS)</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let first_listener_count = 1;
|
||||
let second_listener_count = 1;
|
||||
let third_listener_count = 1;
|
||||
let fourth_listener_count = 1;
|
||||
|
||||
function get_p_element_from_event(event) {
|
||||
let result_p_element = event.currentTarget.firstElementChild;
|
||||
|
||||
if (!result_p_element) {
|
||||
result_p_element = event.currentTarget;
|
||||
}
|
||||
|
||||
return result_p_element;
|
||||
}
|
||||
|
||||
function first_listener(event) {
|
||||
let result_p_element = get_p_element_from_event(event);
|
||||
|
||||
result_p_element.innerText = first_listener_count;
|
||||
first_listener_count++;
|
||||
}
|
||||
|
||||
function second_listener(event) {
|
||||
let result_p_element = get_p_element_from_event(event);
|
||||
|
||||
result_p_element.innerText = second_listener_count;
|
||||
second_listener_count++;
|
||||
|
||||
if (second_listener_count == 3) {
|
||||
event.stopPropagation();
|
||||
second_listener_count = 1;
|
||||
}
|
||||
}
|
||||
|
||||
function third_listener(event) {
|
||||
let result_p_element = get_p_element_from_event(event);
|
||||
|
||||
result_p_element.innerText = third_listener_count;
|
||||
|
||||
if (third_listener_count > 1) {
|
||||
result_p_element.innerText += " (FAIL)";
|
||||
} else {
|
||||
result_p_element.innerText += " (PASS)";
|
||||
}
|
||||
|
||||
third_listener_count++;
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
function fourth_listener(event) {
|
||||
let result_p_element = get_p_element_from_event(event);
|
||||
|
||||
result_p_element.innerText = fourth_listener_count + " (PASS)";
|
||||
fourth_listener_count++;
|
||||
|
||||
if (result_p_element.className == "listener4")
|
||||
result_p_element.removeEventListener("mousedown", listener_fail);
|
||||
else
|
||||
result_p_element.parentNode.removeEventListener("mousedown", listener_fail);
|
||||
}
|
||||
|
||||
function listener_pass(event) {
|
||||
let result_p_element = get_p_element_from_event(event);
|
||||
result_p_element.innerText += " (PASS)";
|
||||
}
|
||||
|
||||
function listener_fail(event) {
|
||||
let result_p_element = get_p_element_from_event(event);
|
||||
result_p_element.innerText += " (FAIL)";
|
||||
}
|
||||
|
||||
const first_listeners = document.querySelectorAll(".listener1");
|
||||
const second_listeners = document.querySelectorAll(".listener2");
|
||||
const third_listeners = document.querySelectorAll(".listener3");
|
||||
const fourth_listeners = document.querySelectorAll(".listener4");
|
||||
|
||||
for (const element of first_listeners) {
|
||||
element.addEventListener("mousedown", first_listener);
|
||||
element.addEventListener("mousedown", listener_pass);
|
||||
}
|
||||
|
||||
for (const element of second_listeners) {
|
||||
element.addEventListener("mousedown", second_listener);
|
||||
element.addEventListener("mousedown", listener_pass);
|
||||
}
|
||||
|
||||
for (const element of third_listeners) {
|
||||
element.addEventListener("mousedown", third_listener);
|
||||
element.addEventListener("mousedown", listener_fail);
|
||||
}
|
||||
|
||||
for (const element of fourth_listeners) {
|
||||
element.addEventListener("mousedown", fourth_listener);
|
||||
element.addEventListener("mousedown", listener_fail);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -35,6 +35,7 @@ span#loadtime {
|
|||
<p>This page loaded in <b><span id="loadtime"></span></b> ms</p>
|
||||
<p>Some small test pages:</p>
|
||||
<ul>
|
||||
<li><a href="event-bubbling-and-multiple-listeners.html">event bubbling and multiple listeners</a></li>
|
||||
<li><a href="checkbox.html">checkbox</a></li>
|
||||
<li><a href="canvas-rotate.html">canvas rotate()</a></li>
|
||||
<li><a href="margin-collapse-2.html">margin collapsing 2</a></li>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue