summaryrefslogtreecommitdiffstats
path: root/layout/reftests/web-animations
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/web-animations')
-rw-r--r--layout/reftests/web-animations/1246046-1.html25
-rw-r--r--layout/reftests/web-animations/1267937-1.html58
-rw-r--r--layout/reftests/web-animations/1267937-ref.html18
-rw-r--r--layout/reftests/web-animations/1298742-1.html32
-rw-r--r--layout/reftests/web-animations/1298742-ref.html13
-rw-r--r--layout/reftests/web-animations/1363639-1.html28
-rw-r--r--layout/reftests/web-animations/animation-utils.js13
-rw-r--r--layout/reftests/web-animations/cancel-animation-with-selector-matching.html26
-rw-r--r--layout/reftests/web-animations/child-in-animating-element-display-none-ref.html18
-rw-r--r--layout/reftests/web-animations/child-in-animating-element-display-none.html33
-rw-r--r--layout/reftests/web-animations/green-box.html17
-rw-r--r--layout/reftests/web-animations/reftest.list26
-rw-r--r--layout/reftests/web-animations/restyle-after-display-none.html43
-rw-r--r--layout/reftests/web-animations/stacking-context-animation-changing-target-ref.html24
-rw-r--r--layout/reftests/web-animations/stacking-context-animation-on-table-ref.html20
-rw-r--r--layout/reftests/web-animations/stacking-context-animation-ref.html19
-rw-r--r--layout/reftests/web-animations/stacking-context-opacity-changing-effect.html33
-rw-r--r--layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html30
-rw-r--r--layout/reftests/web-animations/stacking-context-opacity-changing-keyframe.html28
-rw-r--r--layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html36
-rw-r--r--layout/reftests/web-animations/stacking-context-opacity-changing-target.html31
-rw-r--r--layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html32
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-changing-display-property.html29
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-changing-effect-on-table.html37
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-changing-effect.html35
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html31
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-changing-keyframe.html28
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html36
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-changing-target.html31
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html33
-rw-r--r--layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html31
-rw-r--r--layout/reftests/web-animations/style-updates-for-iteration-composite-ref.html11
-rw-r--r--layout/reftests/web-animations/style-updates-on-current-iteration-changed.html25
-rw-r--r--layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html28
-rw-r--r--layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html28
35 files changed, 986 insertions, 0 deletions
diff --git a/layout/reftests/web-animations/1246046-1.html b/layout/reftests/web-animations/1246046-1.html
new file mode 100644
index 0000000000..ced7e5b283
--- /dev/null
+++ b/layout/reftests/web-animations/1246046-1.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html class="reftest-wait">
+ <head>
+ <meta charset=utf-8>
+ <title>Bug 1246046</title>
+ <style>
+ div {
+ width: 0px;
+ height: 100px;
+ background: green;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ <script>
+ var target = document.querySelector("div");
+ var anim = target.animate(
+ [ { width: "0px" }, { width: "200px" } ], 2000);
+ anim.pause();
+ anim.currentTime = 1000;
+ document.documentElement.removeAttribute("class");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/web-animations/1267937-1.html b/layout/reftests/web-animations/1267937-1.html
new file mode 100644
index 0000000000..6288ec1628
--- /dev/null
+++ b/layout/reftests/web-animations/1267937-1.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html class="reftest-wait reftest-no-flush">
+<head>
+<meta charset=utf-8>
+<title>Bug 1267937</title>
+<style>
+#target {
+ width: 100px;
+ height: 100px;
+ background: green;
+}
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+ var target = document.getElementById("target");
+ var anim = target.animate(
+ { marginLeft: [ "0px", "10px" ] },
+ { duration: 500000 /* 500s */, easing: "steps(2, start)" });
+
+ anim.ready.then(function() {
+ // Set currentTime in before phase, i.e., GetComputedTimingAt() returns
+ // null progress in the phase so that we can skip ComposeStyle().
+ // This currentTime value should be far from zero in order to skip
+ // restyles requested by setting currentTime or frames in a next tick.
+ // If this value is near by zero, say -1, the restyles will be processed in
+ // the next tick and current time in the next tick must be greater than
+ // zero at that point, that means the animation with new frame values will
+ // be painted. As a result, this test will be useless.
+ anim.currentTime = -500;
+
+ // Setting another frame does not cause any visual changes because
+ // the animation is still in the before phase.
+ anim.effect.setKeyframes({ marginLeft: [ "0px", "400px" ] });
+
+ var beforePhaseFrames = 0;
+ window.requestAnimationFrame(function handleFrame() {
+ if (anim.effect.getComputedTiming().progress === null) {
+ beforePhaseFrames++;
+ }
+ if (anim.effect.getComputedTiming().progress !== null) {
+ if (beforePhaseFrames == 0) {
+ console.log("WARNING: We never got frames in the before phase. " +
+ "This test is going to be passed accidentally. " +
+ "Consider setting smaller current time, e.g. -1000ms.");
+ }
+ // After starting the animation, progress should be 0.5, that means
+ // margin-left is 200px.
+ document.documentElement.classList.remove("reftest-wait");
+ return;
+ }
+ window.requestAnimationFrame(handleFrame);
+ });
+ });
+</script>
+</body>
+</html>
diff --git a/layout/reftests/web-animations/1267937-ref.html b/layout/reftests/web-animations/1267937-ref.html
new file mode 100644
index 0000000000..538e27fde8
--- /dev/null
+++ b/layout/reftests/web-animations/1267937-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Reference of bug 1267937</title>
+<style>
+#target {
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin-left: 200px;
+}
+</style>
+</head>
+<body>
+<div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/web-animations/1298742-1.html b/layout/reftests/web-animations/1298742-1.html
new file mode 100644
index 0000000000..fcca85f4ad
--- /dev/null
+++ b/layout/reftests/web-animations/1298742-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>Bug 1298742</title>
+<style>
+div {
+ width: 100px;
+ height: 100px;
+ background: blue;
+ transform: translate(10px);
+}
+</style>
+<div id="target"></div>
+<script>
+ const MS_PER_SEC = 1000;
+ var elem = document.getElementById("target");
+ var animA =
+ elem.animate({ transform: [ 'translate(0px)', 'translate(60px)' ] },
+ 100 * MS_PER_SEC);
+ var animB =
+ elem.animate({ transform: [ 'translate(60px)', 'translate(0px)' ] },
+ 100 * MS_PER_SEC);
+ animA.pause();
+ animB.pause();
+
+ Promise.all([animA.ready, animB.ready]).then(function() {
+ animB.effect = null;
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+</script>
+</html>
diff --git a/layout/reftests/web-animations/1298742-ref.html b/layout/reftests/web-animations/1298742-ref.html
new file mode 100644
index 0000000000..7cb860e9d4
--- /dev/null
+++ b/layout/reftests/web-animations/1298742-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<title>Reference of bug 1298742</title>
+<style>
+div {
+ width: 100px;
+ height: 100px;
+ background: blue;
+ transform: translate(0px);
+}
+</style>
+<div></div>
+</html>
diff --git a/layout/reftests/web-animations/1363639-1.html b/layout/reftests/web-animations/1363639-1.html
new file mode 100644
index 0000000000..e18a8f16f8
--- /dev/null
+++ b/layout/reftests/web-animations/1363639-1.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html class="reftest-wait">
+ <head>
+ <meta charset=utf-8>
+ <title>Bug 1363639</title>
+ <style>
+ #outer {
+ position: absolute;
+ width: 100px;
+ height: 200px;
+ background: green;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer"><div id="inner"></div></div>
+ <script>
+ var target = document.querySelector("#outer");
+ var anim = target.animate([
+ {clip: 'rect(0px, auto, 0px, 0px)'},
+ {clip: 'rect(0px, auto, 200px, 0px)'}
+ ], 2000);
+ anim.pause();
+ anim.currentTime = 1000;
+ document.documentElement.removeAttribute("class");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/web-animations/animation-utils.js b/layout/reftests/web-animations/animation-utils.js
new file mode 100644
index 0000000000..d34ba635a1
--- /dev/null
+++ b/layout/reftests/web-animations/animation-utils.js
@@ -0,0 +1,13 @@
+function waitForIterationChange(animation) {
+ var initialIteration = animation.effect.getComputedTiming().currentIteration;
+ return new Promise(resolve => {
+ window.requestAnimationFrame(handleFrame = () => {
+ if (animation.effect.getComputedTiming().currentIteration !=
+ initialIteration) {
+ resolve();
+ } else {
+ window.requestAnimationFrame(handleFrame);
+ }
+ });
+ });
+}
diff --git a/layout/reftests/web-animations/cancel-animation-with-selector-matching.html b/layout/reftests/web-animations/cancel-animation-with-selector-matching.html
new file mode 100644
index 0000000000..7c78bc414e
--- /dev/null
+++ b/layout/reftests/web-animations/cancel-animation-with-selector-matching.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Discard cancelled animation styles</title>
+<style>
+#test {
+ width: 100px; height: 100px;
+ background-color: white;
+}
+.changed {
+ color: red;
+}
+
+</style>
+<div id="test"></div>
+<script>
+ var target = document.getElementById("test");
+ var anim = target.animate({ backgroundColor: [ "red", "red" ] }, 100000);
+
+ anim.ready.then(() => {
+ anim.cancel();
+ // Add a class name to cause selector matching in a subsequent restyle.
+ target.classList.add("changed");
+
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html b/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html
new file mode 100644
index 0000000000..9a5a1dec96
--- /dev/null
+++ b/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<style>
+div {
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+}
+#child {
+ background-color: green;
+ width: 50px;
+ height: 50px;
+}
+</style>
+<div>
+ <div id="child"></div>
+</div>
+</html>
diff --git a/layout/reftests/web-animations/child-in-animating-element-display-none.html b/layout/reftests/web-animations/child-in-animating-element-display-none.html
new file mode 100644
index 0000000000..57ad9f1ad2
--- /dev/null
+++ b/layout/reftests/web-animations/child-in-animating-element-display-none.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Child element in animating element that display property is changed from none
+</title>
+<style>
+#test {
+ display: none;
+ width: 100px;
+ height: 100px;
+}
+#child {
+ background-color: green;
+ width: 50px;
+ height: 50px;
+}
+</style>
+<div id="test">
+ <div id="child"></div>
+</div>
+<script>
+ var anim = test.animate({ backgroundColor: [ 'blue', 'blue' ] },
+ { duration: 1000,
+ iterations: Infinity });
+
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ document.styleSheets[0].cssRules[0].style.setProperty('display', 'block');
+ document.documentElement.classList.remove('reftest-wait');
+ });
+ });
+</script>
+</html>
diff --git a/layout/reftests/web-animations/green-box.html b/layout/reftests/web-animations/green-box.html
new file mode 100644
index 0000000000..5f5b4d11fe
--- /dev/null
+++ b/layout/reftests/web-animations/green-box.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset=utf-8>
+ <title>Reference green box</title>
+ <style>
+ div {
+ width: 100px;
+ height: 100px;
+ background: green;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/web-animations/reftest.list b/layout/reftests/web-animations/reftest.list
new file mode 100644
index 0000000000..05fad00127
--- /dev/null
+++ b/layout/reftests/web-animations/reftest.list
@@ -0,0 +1,26 @@
+== 1246046-1.html green-box.html
+== 1267937-1.html 1267937-ref.html
+== 1298742-1.html 1298742-ref.html
+== 1363639-1.html green-box.html
+== restyle-after-display-none.html green-box.html
+== stacking-context-transform-none-animation-before-appending-element.html stacking-context-animation-ref.html
+== stacking-context-opacity-changing-keyframe.html stacking-context-animation-ref.html
+== stacking-context-opacity-changing-keyframe-in-delay.html stacking-context-animation-ref.html
+== stacking-context-opacity-changing-target.html stacking-context-animation-changing-target-ref.html
+== stacking-context-opacity-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html
+== stacking-context-opacity-changing-effect.html stacking-context-animation-ref.html
+== stacking-context-opacity-losing-css-animation-in-delay.html stacking-context-animation-ref.html
+== stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html
+== stacking-context-transform-changing-keyframe-in-delay.html stacking-context-animation-ref.html
+== stacking-context-transform-changing-target.html stacking-context-animation-changing-target-ref.html
+
+== stacking-context-transform-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html
+== stacking-context-transform-changing-effect.html stacking-context-animation-ref.html
+== stacking-context-transform-changing-effect-on-table.html stacking-context-animation-on-table-ref.html
+== stacking-context-transform-changing-display-property.html stacking-context-animation-ref.html
+== stacking-context-transform-losing-css-animation-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.compositing.enabled,true) == style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html style-updates-for-iteration-composite-ref.html
+test-pref(dom.animations-api.compositing.enabled,true) == style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html style-updates-for-iteration-composite-ref.html
+test-pref(dom.animations-api.compositing.enabled,true) == style-updates-on-current-iteration-changed.html style-updates-for-iteration-composite-ref.html
+== cancel-animation-with-selector-matching.html about:blank
+== child-in-animating-element-display-none.html child-in-animating-element-display-none-ref.html
diff --git a/layout/reftests/web-animations/restyle-after-display-none.html b/layout/reftests/web-animations/restyle-after-display-none.html
new file mode 100644
index 0000000000..16c0f916b9
--- /dev/null
+++ b/layout/reftests/web-animations/restyle-after-display-none.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html class="reftest-wait reftest-no-flush">
+<head>
+<meta charset=utf-8>
+<title>Check for animation restyling on an element's initial restyling after leaving a display:none subtree</title>
+<style>
+#target {
+ width: 0px;
+ height: 100px;
+ background: green;
+ display: none;
+}
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+// Wait for a steady state before beginning so that style flushes from the
+// initial restyling don't interfere with the results.
+document.addEventListener('MozReftestInvalidate', () => {
+ requestAnimationFrame(() => {
+ // Get target element -- computed style should be display: none by now.
+ const target = document.getElementById('target');
+
+ // Update specified style but don't flush
+ target.style.display = 'block';
+
+ // Trigger an animation on the element.
+ //
+ // animate() won't flush styles so we are testing that it still correctly
+ // marks the element as needing an animation restyle even when it doesn't have
+ // style data.
+ target.animate(
+ { width: ['0px', '100px'] },
+ { duration: 100 * 1000, easing: 'step-start' }
+ );
+
+ document.documentElement.classList.remove('reftest-wait');
+ });
+});
+</script>
+</body>
+</html>
diff --git a/layout/reftests/web-animations/stacking-context-animation-changing-target-ref.html b/layout/reftests/web-animations/stacking-context-animation-changing-target-ref.html
new file mode 100644
index 0000000000..ddc5c8c1d0
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-animation-changing-target-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1279403</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ background: green;
+ position: fixed;
+ top: 50px;
+}
+div {
+ height: 100px;
+ width: 100px;
+ background: blue;
+}
+#first {
+}
+#second {
+ position: fixed;
+}
+</style>
+<span></span>
+<div id="first"></div>
+<div id="second"></div>
diff --git a/layout/reftests/web-animations/stacking-context-animation-on-table-ref.html b/layout/reftests/web-animations/stacking-context-animation-on-table-ref.html
new file mode 100644
index 0000000000..286602e45f
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-animation-on-table-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1273042</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ background: green;
+ position: fixed;
+ top: 50px;
+ z-index: -1;
+}
+#test {
+ display: table;
+ height: 100px;
+ width: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/web-animations/stacking-context-animation-ref.html b/layout/reftests/web-animations/stacking-context-animation-ref.html
new file mode 100644
index 0000000000..817056c1ce
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-animation-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1273042</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ background: green;
+ position: fixed;
+ top: 50px;
+ z-index: -1;
+}
+#test {
+ height: 100px;
+ width: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-effect.html b/layout/reftests/web-animations/stacking-context-opacity-changing-effect.html
new file mode 100644
index 0000000000..6d5324e132
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-effect.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+ Opacity animation creates a stacking context after changing effects
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+div {
+ width: 100px;
+ height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var elem = document.getElementById("test");
+ var anim = elem.animate(null, { duration: 100000 });
+ var newEffect = new KeyframeEffect(elem, { opacity: [1, 1] }, 100000);
+ anim.ready.then(function() {
+ anim.effect = newEffect;
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+</script>
+</html>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html
new file mode 100644
index 0000000000..e0864f1d58
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Changing keyframes to opacity frames creates a stacking context even if the
+animation is delay phase
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ width: ['100px', '100px'] },
+ { delay: 100000, duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.setKeyframes({ opacity: [0, 1] });
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe.html b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe.html
new file mode 100644
index 0000000000..44676d9199
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>Changing keyframes to opacity frames creates a stacking context</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ }, { duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.setKeyframes({ opacity: [1, 1] });
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html b/layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html
new file mode 100644
index 0000000000..8a568f8b0b
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Changing target to an element that does not override opacity animations
+creates a stacking context even if the animation is delay phase
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#first {
+ width: 100px; height: 100px;
+ background: blue;
+ opacity: 1 ! important;
+}
+#second {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="first"></div>
+<div id="second"></div>
+<script>
+ var anim = document.getElementById("first")
+ .animate({ opacity: [0, 1] },
+ { delay: 100000, duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.target = document.getElementById("second");
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-target.html b/layout/reftests/web-animations/stacking-context-opacity-changing-target.html
new file mode 100644
index 0000000000..f1fdb8b442
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-target.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+Opacity animation creates a stacking context when changing its target
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+div {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<div id="another"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ opacity: [1, 1] }, { duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.target = document.getElementById("another");
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html b/layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html
new file mode 100644
index 0000000000..01aaa091eb
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>
+CSS opacity animation winning over web animation in delay phase creates
+a stacking context
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+@keyframes Opacity1 {
+ from, to { opacity: 1; }
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ animation: Opacity1 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ document.getElementById("test")
+ .animate({ opacity: [0.1, 0.1] }, { duration: 100000, delay: 100000 });
+
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-display-property.html b/layout/reftests/web-animations/stacking-context-transform-changing-display-property.html
new file mode 100644
index 0000000000..325b6eda3d
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-display-property.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+Transform animation creates a stacking context when changing its display style
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+div {
+ width: 100px; height: 100px;
+ background: blue;
+ display: none;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ transform: ['none', 'none'] }, { duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.target.style.display = 'block';
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-effect-on-table.html b/layout/reftests/web-animations/stacking-context-transform-changing-effect-on-table.html
new file mode 100644
index 0000000000..76dbfce276
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-effect-on-table.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+ Transform animation on a display:table element creates a stacking context
+ after changing effects
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+div {
+ display: table;
+ width: 100px;
+ height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var elem = document.getElementById("test");
+ var anim = elem.animate(null, { duration: 100000 });
+ var newEffect = new KeyframeEffect(elem,
+ { transform: ['none', 'none']},
+ 100000);
+ anim.ready.then(function() {
+ anim.effect = newEffect;
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+</script>
+</html>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-effect.html b/layout/reftests/web-animations/stacking-context-transform-changing-effect.html
new file mode 100644
index 0000000000..5e3842df36
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-effect.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+ Transform animation creates a stacking context after changing effects
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+div {
+ width: 100px;
+ height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var elem = document.getElementById("test");
+ var anim = elem.animate(null, { duration: 100000 });
+ var newEffect = new KeyframeEffect(elem,
+ { transform: ['none', 'none']},
+ 100000);
+ anim.ready.then(function() {
+ anim.effect = newEffect;
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+</script>
+</html>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html
new file mode 100644
index 0000000000..b11c4d83fb
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Changing keyframes to transform frames creates a stacking context even if the
+animation is delay phase
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ width: ['100px', '100px'] },
+ { delay: 100000, duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.setKeyframes(
+ { transform: ['translate(0px)', 'translate(0px)'] });
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-keyframe.html b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe.html
new file mode 100644
index 0000000000..e92cdef2e5
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>Changing keyframes to transform frames creates a stacking context</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ }, { duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.setKeyframes({ transform: ['none', 'none'] });
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html b/layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html
new file mode 100644
index 0000000000..f121990a84
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Changing target to an element that does not overrider transform animations
+creates a stacking context even if the animation is delay phase
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#first {
+ width: 100px; height: 100px;
+ background: blue;
+ transform: none ! important;
+}
+#second {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="first"></div>
+<div id="second"></div>
+<script>
+ var anim = document.getElementById("first")
+ .animate({ transform: ['translateX(0px)', 'translateX(100px)'] },
+ { delay: 100000, duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.target = document.getElementById("second");
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-target.html b/layout/reftests/web-animations/stacking-context-transform-changing-target.html
new file mode 100644
index 0000000000..be9e4cfd42
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-target.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+Transform animation creates a stacking context when changing its target
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+div {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<div id="another"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ transform: ['none', 'none'] }, { duration: 100000 });
+ anim.ready.then(function() {
+ anim.effect.target = document.getElementById("another");
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html b/layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html
new file mode 100644
index 0000000000..2ff9049eec
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>
+CSS transform animation winning over web animation in delay phase creates
+a stacking context
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+@keyframes TransformNone {
+ from, to { transform: none; }
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ animation: TransformNone 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+ document.getElementById("test")
+ .animate({ transform: ['translateX(100px)', 'translate(100px)'] },
+ { duration: 100000, delay: 100000 });
+
+ requestAnimationFrame(function() {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html b/layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html
new file mode 100644
index 0000000000..2fe3cb8667
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<!--
+ reftest-no-flush above is necessary to make invalidation changes happen.
+ Without it, reftest harness takes the snapshot on the next frame after the
+ frame that a paint for appending the element happened.
+ -->
+<title>Transform animation whose target is not initially associated with any document creates a stacking context even if it has only 'transform:none' in its keyframe</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+div {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<script>
+ var div = document.createElement("div")
+ var anim = div.animate({ transform: ['none', 'none'] },
+ { duration: 100000 });
+ anim.ready.then(() => {
+ document.body.appendChild(div);
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/style-updates-for-iteration-composite-ref.html b/layout/reftests/web-animations/style-updates-for-iteration-composite-ref.html
new file mode 100644
index 0000000000..229e89117f
--- /dev/null
+++ b/layout/reftests/web-animations/style-updates-for-iteration-composite-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<title>Reference of testcases for bug 1216843</title>
+<style>
+#test {
+ width: 100px; height: 100px;
+ margin-left: 200px;
+ background: blue;
+}
+</style>
+<div id="test"></div>
diff --git a/layout/reftests/web-animations/style-updates-on-current-iteration-changed.html b/layout/reftests/web-animations/style-updates-on-current-iteration-changed.html
new file mode 100644
index 0000000000..3713a2c2ec
--- /dev/null
+++ b/layout/reftests/web-animations/style-updates-on-current-iteration-changed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Update styles when current iteration changed</title>
+<script src="animation-utils.js"></script>
+<style>
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ marginLeft: [ "0px", "100px" ] },
+ { duration: 100000,
+ delay: -99999, // For starting right before second iteration.
+ easing: "steps(1, start)",
+ iterations: 2,
+ iterationComposite: "accumulate" });
+
+ waitForIterationChange(anim).then(() => {
+ // Wait for painting the result of the second iteration.
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html
new file mode 100644
index 0000000000..e6a111e83d
--- /dev/null
+++ b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Update styles when iteration composition changed from accumulate to
+replace</title>
+<script src="animation-utils.js"></script>
+<style>
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ marginLeft: [ "0px", "200px" ] },
+ { duration: 100000,
+ delay: -99999, // For starting right before second iteration.
+ easing: "steps(1, start)",
+ iterations: 2,
+ iterationComposite: "accumulate" });
+
+ waitForIterationChange(anim).then(() => {
+ // Changing iterationComposite updates the element style.
+ anim.effect.iterationComposite = "replace";
+ // Now margin-left of the element should be 200px.
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
diff --git a/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html
new file mode 100644
index 0000000000..bf4d40b259
--- /dev/null
+++ b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Update styles when iteration composition changed from replace to
+accumulate</title>
+<script src="animation-utils.js"></script>
+<style>
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<div id="test"></div>
+<script>
+ var anim = document.getElementById("test")
+ .animate({ marginLeft: [ "0px", "100px" ] },
+ { duration: 100000,
+ delay: -99999, // For starting right before second iteration.
+ easing: "steps(1, start)",
+ iterations: 2,
+ iterationComposite: "replace" });
+
+ waitForIterationChange(anim).then(() => {
+ // Changing iterationComposite updates the element style.
+ anim.effect.iterationComposite = "accumulate";
+ // Now margin-left of the element should be 200px.
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>