86e0e281a0
Track the synthetic pseudo-elements that matched while computing an originating element's normal style. Store the transient match set as a bitfield, then copy those bits into ComputedProperties. Use them during style invalidation to skip pseudo style recomputation when neither the old nor new originating style matched pseudo rules and no pseudo style already exists. This shaves roughly 500 ms off loading the Ladybird GitHub repository. Materialize synthetic pseudo styles on demand for CSSOM reads so getComputedStyle(element, "::before") still computes skipped styles when script asks for them. Add coverage for a universal pseudo selector, and update style invalidation counter expectations for the reduced work.
40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<style>
|
|
#foo {
|
|
color: grey;
|
|
background-color: yellow;
|
|
}
|
|
#foo::before {
|
|
content: "hi";
|
|
background-color: cyan;
|
|
}
|
|
::after {
|
|
content: "bye";
|
|
color: green;
|
|
}
|
|
</style>
|
|
<div id="foo"></div>
|
|
<script>
|
|
test(() => {
|
|
const foo = document.getElementById("foo");
|
|
const style = getComputedStyle(foo);
|
|
const beforeStyle = getComputedStyle(foo, "::before");
|
|
const afterStyle = getComputedStyle(foo, "::after");
|
|
const propertyValues = [
|
|
"color",
|
|
"background-color",
|
|
];
|
|
println("#foo:");
|
|
for (const property of propertyValues) {
|
|
println(` ${property}: ${style.getPropertyValue(property)}`);
|
|
}
|
|
println("#foo::before:");
|
|
for (const property of propertyValues) {
|
|
println(` ${property}: ${beforeStyle.getPropertyValue(property)}`);
|
|
}
|
|
println("#foo::after:");
|
|
println(` content: ${afterStyle.getPropertyValue("content")}`);
|
|
println(` color: ${afterStyle.getPropertyValue("color")}`);
|
|
});
|
|
</script>
|