Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-14 13:55:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1392851 - Try to update running CSS animations when CSS rules are changed. r=birtles

Browse Source 
In the case where values in CSS rules changed directly by CSSOM, the old
value in the CSS rule block is immediately replaced by the new one. So if
the element, which is applied to the CSS rule, has running animations, the
new value is used during cascading process in animation-only restyle. Thus
in a subsequent normal restyle, we can't tell whether the value in the CSS
rule has changed or not. As a result, transitions may not be triggered
(bug 1393323) and CSS animations may not be cancelled if the updated
animation-name is 'none' (this bug).

For the latter case of CSS animations where animation-name has been updated to
'none', this patch introduces a workaround whereby we trigger an update of
running animations whenever the traversal is triggered by changes to CSS rules
and we have existing CSS animations.

change-animation-name-to-none-in-rule.html fails without servo #18214, succeeds
with this patch.  Other two tests succeed regardless of the PR.

MozReview-Commit-ID: BrZgTNk9w41

--HG--
extra : rebase_source : 7a55f54a0f94c8db02639f9d8c89f785b3a17a1b
This commit is contained in:
Hiroyuki Ikezoe 2017-08-24 18:27:10 +09:00
parent f1eb5aaa84
commit 3fc40c42f2
5 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
layout/reftests/css-animations/change-animation-name-in-rule-ref.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<style>
div {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<div></div>

25
layout/reftests/css-animations/change-animation-name-to-non-existent-in-rule.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<style>
#target {
animation: red 100s;
}
@keyframes red {
0% { background-color: red; }
100% { background-color: red; }
}
div {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<div id="target"></div>
<script>
document.addEventListener('MozReftestInvalidate', () => {
requestAnimationFrame(() => {
document.styleSheets[0].cssRules[0].style.animationName = 'non-existent';
document.documentElement.classList.remove('reftest-wait');
});
}, false);
</script>

25
layout/reftests/css-animations/change-animation-name-to-none-in-rule.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<style>
#target {
animation: red 100s;
}
@keyframes red {
0% { background-color: red; }
100% { background-color: red; }
}
div {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<div id="target"></div>
<script>
document.addEventListener('MozReftestInvalidate', () => {
requestAnimationFrame(() => {
document.styleSheets[0].cssRules[0].style.animationName = 'none';
document.documentElement.classList.remove('reftest-wait');
});
}, false);
</script>

29
layout/reftests/css-animations/change-animation-name-to-other-in-rule.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<style>
#target {
animation: red 100s;
}
@keyframes red {
0% { background-color: red; }
100% { background-color: red; }
}
@keyframes green {
0% { background-color: green; }
100% { background-color: green; }
}
div {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<div id="target"></div>
<script>
document.addEventListener('MozReftestInvalidate', () => {
requestAnimationFrame(() => {
document.styleSheets[0].cssRules[0].style.animationName = 'green';
document.documentElement.classList.remove('reftest-wait');
});
}, false);
</script>

3
layout/reftests/css-animations/reftest.list
View File

@ -57,3 +57,6 @@ fails == background-position-important.html background-position-ref.html # This
== content-on-pseudo-element-at-beginning.html content-on-pseudo-element-ref.html
== content-on-pseudo-element-at-half.html content-on-pseudo-element-ref.html
== reframe-and-animation-starts-at-the-same-time.html reframe-and-animation-starts-at-the-same-time-ref.html
== change-animation-name-to-none-in-rule.html change-animation-name-in-rule-ref.html
== change-animation-name-to-other-in-rule.html change-animation-name-in-rule-ref.html
== change-animation-name-to-non-existent-in-rule.html change-animation-name-in-rule-ref.html