mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-25 01:19:45 +00:00
714ff4e3f9
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
...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.
54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
<!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>
|