Bug 1380258 - A reftest for stopping CSS animations on discarded pseudo elements. r=birtles
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Mon, 24 Jul 2017 09:20:22 +0900
changeset 419204 61f7864e2701dfd68b233aa8dfd69c012b2b2424
parent 419203 174b43f8eeb91b0504e2e0f83acc395f98c3ba87
child 419205 758016d026077ebaf65aaecc8df437a7164dd9b5
child 419229 e09385879b6e71ab3d61e3aa2f8e5bbef0d10999
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1380258
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1380258 - A reftest for stopping CSS animations on discarded pseudo elements. r=birtles This reftest fails without the first patch on stylo. MozReview-Commit-ID: E5pBzBw9x8B
layout/reftests/css-animations/reftest.list
layout/reftests/css-animations/stop-animation-on-discarded-pseudo-element.html
--- a/layout/reftests/css-animations/reftest.list
+++ b/layout/reftests/css-animations/reftest.list
@@ -46,9 +46,11 @@ fails == background-position-important.h
 == mask-position-after-finish-1b.html mask-anim-ref.html
 == mask-position-in-delay-1a.html mask-anim-ref.html
 == mask-position-in-delay-1b.html mask-anim-ref.html
 == mask-size-after-finish-1a.html mask-anim-ref.html
 == mask-size-after-finish-1b.html mask-anim-ref.html
 == mask-size-in-delay-1a.html mask-anim-ref.html
 == mask-size-in-delay-1b.html mask-anim-ref.html
 
+== stop-animation-on-discarded-pseudo-element.html about:blank
+
 == updating-animation-on-pseudo-element.html updating-animation-on-pseudo-element-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/stop-animation-on-discarded-pseudo-element.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+@keyframes anim {
+  0% { background-color: red; }
+  100% { background-color: red; }
+}
+#target.x::before,
+#target.y::before {
+  content: "";
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+#target.x::before {
+  animation: anim 100s infinite;
+}
+</style>
+<div id="target"></div>
+<script>
+var target = document.getElementById('target');
+requestAnimationFrame(() => {
+  // Create ::before, start animation
+  target.className = 'x';
+  requestAnimationFrame(() => {
+    // Remove ::before, stop animation
+    target.className = '';
+
+    requestAnimationFrame(() => {
+      // Create ::before, should not be animating
+      target.className = 'y';
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  });
+});
+</script>