chromium/src
0
Fork 0
Code Activity

Avoid SetAnimationStyleChange(true) without a ComputedStyle

Browse Source 
If the IsAnimationStyleChange is true, then CSSAnimations::
CalculateAnimationUpdate expects any CSS animations defined by the base
style to actually be present in |running_animations_|. However, this
will not be the case for elements with ShouldStoreComputedStyle()=false,
since any pending animation updates are canceled in Element::
RecalcOwnStyle if we ultimately don't want to store the newly
produced ComputedStyle.

Fixed: 1264236
Change-Id: I07dbdfe861de33f1d29e973b2fe6b5daf9b530c7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3291749
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#943552}
This commit is contained in:
Anders Hartvoll Ruud
2021-11-19 16:32:00 +00:00
committed by Chromium LUCI CQ
parent bd0af2c334
commit 6ecc70e0b8
2 changed files with 28 additions and 1 deletions
third_party/blink
renderer
core
dom
element.cc
web_tests
external
wpt
svg
animations
svg-style-animate-crash.html

7
third_party/blink/renderer/core/dom/element.cc vendored

@@ -3628,8 +3628,13 @@ void Element::SetNeedsAnimationStyleRecalc() {
SetNeedsStyleRecalc(kLocalStyleChange, StyleChangeReasonForTracing::Create(
style_change_reason::kAnimation));
if (NeedsStyleRecalc())
// Setting this flag to 'true' only makes sense if there's an existing style,
// otherwise there is no previous style to use as the basis for the new one.
if (NeedsStyleRecalc() && GetComputedStyle() &&
!GetComputedStyle()->IsEnsuredInDisplayNone()) {
SetAnimationStyleChange(true);
}
}
void Element::SetNeedsCompositingUpdate() {

22
third_party/blink/web_tests/external/wpt/svg/animations/svg-style-animate-crash.html vendored Normal file

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>Starting a CSS Animation and Web Animation at the same time on SVG style elements</title>
<link rel="help" href="https://crbug.com/1264236">
<style>
@keyframes anim {
from { color: green; }
to { color: red; }
}
#target {
animation: anim 1s linear;
}
</style>
<svg>
<style id=target>Test</style>
</svg>
<script>
addEventListener('load', () => {
target.animate({'top': ['0px', '10px']}, 1000);
target.offsetTop;
});
</script>