mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 10:07:15 +02:00
44ed698d4f
We were conflating elements being the active element and elements being activated. The :active pseudo class is supposed to be based on whether an element will have its activation behavior run upon a button being released. Store whether an element is being activated as a flag that is set/reset by EventHandler. Doing this allows label elements to visually activate their control without doing a weird paintable hack, so the Labelable classes have been yeeted.
66 lines
2.0 KiB
HTML
66 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
#outer {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: yellowgreen;
|
|
}
|
|
|
|
#inner {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: magenta;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="outer"><div id="inner"></div></div>
|
|
<input type="checkbox" id="checkbox"><label id="label" for="checkbox">Label text</label>
|
|
</body>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
test(() => {
|
|
println(":active before click:");
|
|
println(` inner: ${inner.matches(':active')}`);
|
|
println(` outer: ${outer.matches(':active')}`);
|
|
|
|
internals.clickAndHold(25, 25);
|
|
println(":active during mousedown on #inner:");
|
|
println(` inner: ${inner.matches(':active')}`);
|
|
println(` outer: ${outer.matches(':active')}`);
|
|
println(` body: ${document.body.matches(':active')}`);
|
|
|
|
internals.mouseUp(25, 25);
|
|
println(":active after mouseup:");
|
|
println(` inner: ${inner.matches(':active')}`);
|
|
println(` outer: ${outer.matches(':active')}`);
|
|
|
|
// Test :active propagation from label to its control.
|
|
internals.clickAndHold(6, 110);
|
|
println(":active during mousedown on #checkbox:");
|
|
println(` label: ${label.matches(':active')}`);
|
|
println(` checkbox: ${checkbox.matches(':active')}`);
|
|
|
|
internals.mouseUp(6, 110);
|
|
println(":active after mouseup on #label:");
|
|
println(` label: ${label.matches(':active')}`);
|
|
println(` checkbox: ${checkbox.matches(':active')}`);
|
|
|
|
internals.clickAndHold(24, 110);
|
|
println(":active during mousedown on #label:");
|
|
println(` label: ${label.matches(':active')}`);
|
|
println(` checkbox: ${checkbox.matches(':active')}`);
|
|
|
|
internals.mouseUp(24, 110);
|
|
println(":active after mouseup on #label:");
|
|
println(` label: ${label.matches(':active')}`);
|
|
println(` checkbox: ${checkbox.matches(':active')}`);
|
|
|
|
});
|
|
</script>
|