Bug 1392851 - A reftest to check that we don't share styles for elements that have animations which is about to be removed. r?birtles
This was a test case for
bug 1379203 (Goole Inbox issue), but to pass this test
also needs the fix in this series to cancel animations when changing
animation-name to 'none' in the specified CSS rule.
Actually the fix in this series also fixes the Google Inbox issue so that this
test can pass without the fix for the Goole Inbox issue. But even so without
the fix for
bug 1379203, the style data for the first div element in this test
is cached and the second div element uses the cached data.
MozReview-Commit-ID: GfKSDfTZef4
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/no-style-sharing-with-animations-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<style>
+div {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+}
+</style>
+<div></div>
+<div></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/no-style-sharing-with-animations.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+.animation {
+ animation: anim 100s forwards;
+}
+@keyframes anim {
+ 0% { background-color: red; }
+ 100% { background-color: red; }
+}
+div {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+}
+</style>
+<div class="animation"></div>
+<div class="animation"></div>
+<script>
+//requestAnimationFrame(() => {
+// // Start background color animations on div elements that have the same
+// // class name.
+// var targets = document.querySelectorAll('div');
+// targets[0].classList.add('animation');
+// targets[1].classList.add('animation');
+// requestAnimationFrame(() => {
+// // Stop the background color animations without changing the class name.
+// targets[0].classList.add('no-animation');
+// targets[1].classList.add('no-animation');
+// //document.styleSheets[0].cssRules[0].style.animationName = 'none';
+// //document.documentElement.classList.remove('reftest-wait');
+// });
+//});
+document.addEventListener('MozReftestInvalidate', () => {
+ requestAnimationFrame(() => {
+ document.styleSheets[0].cssRules[0].style.animationName = 'none';
+ document.documentElement.classList.remove('reftest-wait');
+ });
+}, false);
+</script>
--- a/layout/reftests/css-animations/reftest.list
+++ b/layout/reftests/css-animations/reftest.list
@@ -55,8 +55,9 @@ fails == background-position-important.h
== updating-animation-on-pseudo-element.html updating-animation-on-pseudo-element-ref.html
== 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-inexistent-in-rule.html change-animation-name-in-rule-ref.html
+== no-style-sharing-with-animations.html no-style-sharing-with-animations-ref.html
