ladybird/Tests/LibWeb/Text/input/css/invalidate-sibling-affected-by-has.html
Aliaksandr Kalenik 976af84287 LibWeb: Check all siblings in ancestors chain while invalidating :has()
Fixes underinvalidaiton of `:has()` selectors with sibling combinators.
2025-02-12 16:15:14 +01:00

59 lines
No EOL
1.4 KiB
HTML

<!DOCTYPE html>
<script src="../include.js"></script>
<style>
div {
min-height: 50px;
min-width: 50px;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
color: grey;
}
#parent {
border: 2px solid black;
padding: 10px;
}
.blue {
background-color: #eef;
}
.f_has_scope {
background-color: #efe;
border: 2px dotted green;
}
.invalid {
background-color: #ffc;
border: 2px solid orange;
}
.blue:has(~ #indirect_next:is(.p + .f_has_scope ~ .g)) {
color: blue;
background-color: #ccf;
border: 2px solid blue;
}
</style>
<div id="parent">
<div class="p"></div>
<div id="previous" class="f_has_scope"></div>
<div id="has_scope" class="blue"></div>
<div id="indirect_next" class="g"></div>
</div>
<script>
test(() => {
const blue = document.getElementById("has_scope");
println(`background-color before: ${getComputedStyle(blue).backgroundColor}`);
let insertBefore = document.getElementById("previous");
let parent = insertBefore.parentElement;
let div = document.createElement("div");
div.classList.add("invalid");
parent.insertBefore(div, insertBefore);
println(`background-color after: ${getComputedStyle(blue).backgroundColor}`);
});
</script>