mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-11 18:50:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Fix previous style calculation for CSS transitions on pseudo
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Details
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Details
Lint Code / lint (push) Waiting to run
Details
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Details
Push notes / build (push) Waiting to run
Details

Browse source 
...elements. Adds missing pseudo-element type passed into computed
properties getter.

Previously, due to this bug, we were using the element's computed
properties as the previous computed properties for its pseudo-elements.
This caused an excessive number of unintended CSS transitions to run.
The issue was particularly noticeable in Discord's emoji picker, where
each emoji has `::after` pseudo-element. We were incorrectly triggering
transitions on all their properties, resulting in significant
unnecessary work in style computation and animation event dispatching.
This commit is contained in:
Aliaksandr Kalenik 2025-07-18 19:53:32 +02:00 • committed by Andreas Kling
commit 714ff4e3f9
Notes: github-actions[bot] 2025-07-18 19:20:41 +00:00
3 changed files with 56 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -2724,7 +2724,7 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& elem
// 9. Transition declarations [css-transitions-1] // 9. Transition declarations [css-transitions-1]
// Theoretically this should be part of the cascade, but it works with computed values, which we don't have until now. // Theoretically this should be part of the cascade, but it works with computed values, which we don't have until now.
compute_transitioned_properties(computed_style, element, pseudo_element); compute_transitioned_properties(computed_style, element, pseudo_element);
if (auto previous_style = element.computed_properties(); previous_style) { if (auto previous_style = element.computed_properties(pseudo_element)) {
start_needed_transitions(*previous_style, computed_style, element, pseudo_element); start_needed_transitions(*previous_style, computed_style, element, pseudo_element);
} }

1
Tests/LibWeb/Text/expected/WebAnimations/transitions/transition-on-pseudo-element.txt Normal file
View file

@ -0,0 +1 @@
running animations count (0) should be zero

54
Tests/LibWeb/Text/input/WebAnimations/transitions/transition-on-pseudo-element.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../include.js"></script>
<style>
.container {
display: flex;
gap: 2rem;
padding: 2rem;
font-size: 4rem;
flex-wrap: wrap;
}
.emojiItem_fc7141 {
position: relative;
}
.emojiItem_fc7141:after {
border: 3px solid #fde047;
content: "";
height: 100%;
width: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: 5;
transition: all 1s ease-in-out;
}
</style>
</head>
<body class="full-motion">
<div id="emojiContainer" class="container">
<span class="emojiItem_fc7141">😀</span>
<span class="emojiItem_fc7141">😎</span>
<span class="emojiItem_fc7141">🚀</span>
</div>
<script>
const container = document.getElementById("emojiContainer");
asyncTest(done => {
const span = document.createElement("span");
span.className = "emojiItem_fc7141";
span.textContent = "🌟";
container.appendChild(span);
requestAnimationFrame(() => {
println(
`running animations count (${
document.getAnimations().length
}) should be zero`
);
done();
});
});
</script>
</body>
</html>