From 2aa4a82499d4becd2284cdb482213d541b8804dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 28 Apr 2024 16:29:10 +0200
Subject: Adding upstream version 86.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/web-animations/1246046-1.html      | 25 ++++++++++
 layout/reftests/web-animations/1267937-1.html      | 58 ++++++++++++++++++++++
 layout/reftests/web-animations/1267937-ref.html    | 18 +++++++
 layout/reftests/web-animations/1298742-1.html      | 32 ++++++++++++
 layout/reftests/web-animations/1298742-ref.html    | 13 +++++
 layout/reftests/web-animations/1363639-1.html      | 28 +++++++++++
 layout/reftests/web-animations/animation-utils.js  | 13 +++++
 .../cancel-animation-with-selector-matching.html   | 26 ++++++++++
 ...hild-in-animating-element-display-none-ref.html | 18 +++++++
 .../child-in-animating-element-display-none.html   | 33 ++++++++++++
 layout/reftests/web-animations/green-box.html      | 17 +++++++
 layout/reftests/web-animations/reftest.list        | 26 ++++++++++
 .../web-animations/restyle-after-display-none.html | 43 ++++++++++++++++
 ...king-context-animation-changing-target-ref.html | 24 +++++++++
 .../stacking-context-animation-on-table-ref.html   | 20 ++++++++
 .../stacking-context-animation-ref.html            | 19 +++++++
 .../stacking-context-opacity-changing-effect.html  | 33 ++++++++++++
 ...context-opacity-changing-keyframe-in-delay.html | 30 +++++++++++
 ...stacking-context-opacity-changing-keyframe.html | 28 +++++++++++
 ...g-context-opacity-changing-target-in-delay.html | 36 ++++++++++++++
 .../stacking-context-opacity-changing-target.html  | 31 ++++++++++++
 ...text-opacity-losing-css-animation-in-delay.html | 32 ++++++++++++
 ...ontext-transform-changing-display-property.html | 29 +++++++++++
 ...context-transform-changing-effect-on-table.html | 37 ++++++++++++++
 ...stacking-context-transform-changing-effect.html | 35 +++++++++++++
 ...ntext-transform-changing-keyframe-in-delay.html | 31 ++++++++++++
 ...acking-context-transform-changing-keyframe.html | 28 +++++++++++
 ...context-transform-changing-target-in-delay.html | 36 ++++++++++++++
 ...stacking-context-transform-changing-target.html | 31 ++++++++++++
 ...xt-transform-losing-css-animation-in-delay.html | 33 ++++++++++++
 ...rm-none-animation-before-appending-element.html | 31 ++++++++++++
 .../style-updates-for-iteration-composite-ref.html | 11 ++++
 ...style-updates-on-current-iteration-changed.html | 25 ++++++++++
 ...osition-changed-from-accumulate-to-replace.html | 28 +++++++++++
 ...osition-changed-from-replace-to-accumulate.html | 28 +++++++++++
 35 files changed, 986 insertions(+)
 create mode 100644 layout/reftests/web-animations/1246046-1.html
 create mode 100644 layout/reftests/web-animations/1267937-1.html
 create mode 100644 layout/reftests/web-animations/1267937-ref.html
 create mode 100644 layout/reftests/web-animations/1298742-1.html
 create mode 100644 layout/reftests/web-animations/1298742-ref.html
 create mode 100644 layout/reftests/web-animations/1363639-1.html
 create mode 100644 layout/reftests/web-animations/animation-utils.js
 create mode 100644 layout/reftests/web-animations/cancel-animation-with-selector-matching.html
 create mode 100644 layout/reftests/web-animations/child-in-animating-element-display-none-ref.html
 create mode 100644 layout/reftests/web-animations/child-in-animating-element-display-none.html
 create mode 100644 layout/reftests/web-animations/green-box.html
 create mode 100644 layout/reftests/web-animations/reftest.list
 create mode 100644 layout/reftests/web-animations/restyle-after-display-none.html
 create mode 100644 layout/reftests/web-animations/stacking-context-animation-changing-target-ref.html
 create mode 100644 layout/reftests/web-animations/stacking-context-animation-on-table-ref.html
 create mode 100644 layout/reftests/web-animations/stacking-context-animation-ref.html
 create mode 100644 layout/reftests/web-animations/stacking-context-opacity-changing-effect.html
 create mode 100644 layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html
 create mode 100644 layout/reftests/web-animations/stacking-context-opacity-changing-keyframe.html
 create mode 100644 layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html
 create mode 100644 layout/reftests/web-animations/stacking-context-opacity-changing-target.html
 create mode 100644 layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-changing-display-property.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-changing-effect-on-table.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-changing-effect.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-changing-keyframe.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-changing-target.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html
 create mode 100644 layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html
 create mode 100644 layout/reftests/web-animations/style-updates-for-iteration-composite-ref.html
 create mode 100644 layout/reftests/web-animations/style-updates-on-current-iteration-changed.html
 create mode 100644 layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html
 create mode 100644 layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html

(limited to 'layout/reftests/web-animations')

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..6dea1aee4d
--- /dev/null
+++ b/layout/reftests/web-animations/reftest.list
@@ -0,0 +1,26 @@
+== 1246046-1.html green-box.html
+test-pref(dom.animations-api.core.enabled,true) == 1267937-1.html 1267937-ref.html
+test-pref(dom.animations-api.core.enabled,true) == 1298742-1.html 1298742-ref.html
+== 1363639-1.html green-box.html
+== restyle-after-display-none.html green-box.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-none-animation-before-appending-element.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target.html stacking-context-animation-changing-target-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html
+test-pref(dom.animations-api.core.enabled,true) == 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
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target.html stacking-context-animation-changing-target-ref.html
+
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-effect.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-effect-on-table.html stacking-context-animation-on-table-ref.html
+test-pref(dom.animations-api.core.enabled,true) == 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.core.enabled,true) 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.core.enabled,true) 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.core.enabled,true) test-pref(dom.animations-api.compositing.enabled,true) == style-updates-on-current-iteration-changed.html style-updates-for-iteration-composite-ref.html
+test-pref(dom.animations-api.core.enabled,true) == 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>
-- 
cgit v1.2.3