RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 12:07:45 +00:00
Code Issues Activity Actions

LibWeb: Add a test for the new event dispatcher

Browse source
This commit is contained in:
Luke 2020-11-21 18:34:40 +00:00 • committed by Andreas Kling
parent c5e15d9282
commit e68348298f
2 changed files with 187 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

186
Base/res/html/misc/event-bubbling-and-multiple-listeners.html Normal file
View 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>

1
Base/res/html/misc/welcome.html
View file

@ -35,6 +35,7 @@ span#loadtime {
<p>This page loaded in <b><span id="loadtime"></span></b> ms</p> <p>This page loaded in <b><span id="loadtime"></span></b> ms</p>
<p>Some small test pages:</p> <p>Some small test pages:</p>
<ul> <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="checkbox.html">checkbox</a></li>
<li><a href="canvas-rotate.html">canvas rotate()</a></li> <li><a href="canvas-rotate.html">canvas rotate()</a></li>
<li><a href="margin-collapse-2.html">margin collapsing 2</a></li> <li><a href="margin-collapse-2.html">margin collapsing 2</a></li>