From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 .../animate-display-table-opacity-ref.html         |  9 ++++
 .../animate-display-table-opacity.html             | 14 +++++++
 .../css-animations/animate-opacity-ref.html        | 18 ++++++++
 .../reftests/css-animations/animate-opacity.html   | 23 +++++++++++
 .../css-animations/animate-preserves3d-ref.html    | 30 ++++++++++++++
 .../css-animations/animate-preserves3d.html        | 38 +++++++++++++++++
 .../background-position-after-finish.html          | 24 +++++++++++
 .../background-position-important.html             | 17 ++++++++
 .../background-position-in-delay.html              | 16 ++++++++
 .../css-animations/background-position-ref.html    | 12 ++++++
 .../background-position-running.html               | 16 ++++++++
 ...bility-hidden-animation-pseudo-element-ref.html | 18 ++++++++
 ...visibility-hidden-animation-pseudo-element.html | 37 +++++++++++++++++
 .../in-visibility-hidden-animation-ref.html        | 16 ++++++++
 .../in-visibility-hidden-animation.html            | 36 ++++++++++++++++
 .../no-stacking-context-animation-ref.html         | 20 +++++++++
 ...ontext-opacity-removing-animation-in-delay.html | 48 ++++++++++++++++++++++
 ...text-transform-removing-animation-in-delay.html | 47 +++++++++++++++++++++
 .../partially-out-of-view-animation-ref.html       | 15 +++++++
 .../partially-out-of-view-animation.html           | 35 ++++++++++++++++
 .../css-animations/print-no-animations-notref.html | 11 +++++
 .../css-animations/print-no-animations-ref.html    | 11 +++++
 .../css-animations/print-no-animations.html        | 16 ++++++++
 layout/reftests/css-animations/reftest-stylo.list  | 34 +++++++++++++++
 layout/reftests/css-animations/reftest.list        | 43 +++++++++++++++++++
 .../css-animations/screen-animations-notref.html   | 11 +++++
 .../css-animations/screen-animations-ref.html      | 11 +++++
 .../reftests/css-animations/screen-animations.html | 16 ++++++++
 .../stacking-context-animation-ref.html            | 19 +++++++++
 .../stacking-context-lose-opacity-1.html           | 25 +++++++++++
 .../stacking-context-lose-transform-none.html      | 25 +++++++++++
 .../stacking-context-opacity-1-animation.html      | 24 +++++++++++
 .../stacking-context-opacity-1-in-delay.html       | 23 +++++++++++
 ...king-context-opacity-1-with-fill-backwards.html | 24 +++++++++++
 ...cking-context-opacity-1-with-fill-forwards.html | 24 +++++++++++
 ...ontext-opacity-removing-important-in-delay.html | 43 +++++++++++++++++++
 ...ontext-opacity-win-in-delay-on-main-thread.html | 31 ++++++++++++++
 .../stacking-context-opacity-win-in-delay.html     | 27 ++++++++++++
 ...cking-context-opacity-wins-over-transition.html | 40 ++++++++++++++++++
 .../stacking-context-paused-on-opacity-1.html      | 24 +++++++++++
 .../stacking-context-paused-on-transform-none.html | 24 +++++++++++
 ...ng-context-transform-none-animation-on-svg.html | 22 ++++++++++
 ...rm-none-animation-with-backface-visibility.html | 26 ++++++++++++
 ...-transform-none-animation-with-preserve-3d.html | 26 ++++++++++++
 .../stacking-context-transform-none-animation.html | 24 +++++++++++
 .../stacking-context-transform-none-in-delay.html  | 23 +++++++++++
 ...context-transform-none-with-fill-backwards.html | 24 +++++++++++
 ...-context-transform-none-with-fill-forwards.html | 24 +++++++++++
 ...text-transform-removing-important-in-delay.html | 44 ++++++++++++++++++++
 ...text-transform-win-in-delay-on-main-thread.html | 31 ++++++++++++++
 .../stacking-context-transform-win-in-delay.html   | 27 ++++++++++++
 ...ing-context-transform-wins-over-transition.html | 40 ++++++++++++++++++
 52 files changed, 1306 insertions(+)
 create mode 100644 layout/reftests/css-animations/animate-display-table-opacity-ref.html
 create mode 100644 layout/reftests/css-animations/animate-display-table-opacity.html
 create mode 100644 layout/reftests/css-animations/animate-opacity-ref.html
 create mode 100644 layout/reftests/css-animations/animate-opacity.html
 create mode 100644 layout/reftests/css-animations/animate-preserves3d-ref.html
 create mode 100644 layout/reftests/css-animations/animate-preserves3d.html
 create mode 100644 layout/reftests/css-animations/background-position-after-finish.html
 create mode 100644 layout/reftests/css-animations/background-position-important.html
 create mode 100644 layout/reftests/css-animations/background-position-in-delay.html
 create mode 100644 layout/reftests/css-animations/background-position-ref.html
 create mode 100644 layout/reftests/css-animations/background-position-running.html
 create mode 100644 layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element-ref.html
 create mode 100644 layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element.html
 create mode 100644 layout/reftests/css-animations/in-visibility-hidden-animation-ref.html
 create mode 100644 layout/reftests/css-animations/in-visibility-hidden-animation.html
 create mode 100644 layout/reftests/css-animations/no-stacking-context-animation-ref.html
 create mode 100644 layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html
 create mode 100644 layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html
 create mode 100644 layout/reftests/css-animations/partially-out-of-view-animation-ref.html
 create mode 100644 layout/reftests/css-animations/partially-out-of-view-animation.html
 create mode 100644 layout/reftests/css-animations/print-no-animations-notref.html
 create mode 100644 layout/reftests/css-animations/print-no-animations-ref.html
 create mode 100644 layout/reftests/css-animations/print-no-animations.html
 create mode 100644 layout/reftests/css-animations/reftest-stylo.list
 create mode 100644 layout/reftests/css-animations/reftest.list
 create mode 100644 layout/reftests/css-animations/screen-animations-notref.html
 create mode 100644 layout/reftests/css-animations/screen-animations-ref.html
 create mode 100644 layout/reftests/css-animations/screen-animations.html
 create mode 100644 layout/reftests/css-animations/stacking-context-animation-ref.html
 create mode 100644 layout/reftests/css-animations/stacking-context-lose-opacity-1.html
 create mode 100644 layout/reftests/css-animations/stacking-context-lose-transform-none.html
 create mode 100644 layout/reftests/css-animations/stacking-context-opacity-1-animation.html
 create mode 100644 layout/reftests/css-animations/stacking-context-opacity-1-in-delay.html
 create mode 100644 layout/reftests/css-animations/stacking-context-opacity-1-with-fill-backwards.html
 create mode 100644 layout/reftests/css-animations/stacking-context-opacity-1-with-fill-forwards.html
 create mode 100644 layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html
 create mode 100644 layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html
 create mode 100644 layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html
 create mode 100644 layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html
 create mode 100644 layout/reftests/css-animations/stacking-context-paused-on-opacity-1.html
 create mode 100644 layout/reftests/css-animations/stacking-context-paused-on-transform-none.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-none-animation-on-svg.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-none-animation-with-backface-visibility.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-none-animation-with-preserve-3d.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-none-animation.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-none-in-delay.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-none-with-fill-backwards.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-none-with-fill-forwards.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-win-in-delay.html
 create mode 100644 layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html

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

diff --git a/layout/reftests/css-animations/animate-display-table-opacity-ref.html b/layout/reftests/css-animations/animate-display-table-opacity-ref.html
new file mode 100644
index 000000000..958c8c3f6
--- /dev/null
+++ b/layout/reftests/css-animations/animate-display-table-opacity-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>Testcase for bug 1245075</title>
+<style>
+#test {
+  width: 100px; height: 100px;
+  background: rgb(102, 102, 255);
+}
+</style>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/animate-display-table-opacity.html b/layout/reftests/css-animations/animate-display-table-opacity.html
new file mode 100644
index 000000000..0d0305493
--- /dev/null
+++ b/layout/reftests/css-animations/animate-display-table-opacity.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Testcase for bug 1245075</title>
+<style>
+@keyframes HoldOpacity {
+  from, to { opacity: 0.6 }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  display: table;
+  animation: HoldOpacity 100s linear infinite;
+}
+</style>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/animate-opacity-ref.html b/layout/reftests/css-animations/animate-opacity-ref.html
new file mode 100644
index 000000000..d0b3bff4a
--- /dev/null
+++ b/layout/reftests/css-animations/animate-opacity-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<title>Reftest, bug 1156456</title>
+<style>
+
+body {
+  background: #2a4;
+}
+
+div {
+  width: 200px; height: 200px;
+  background: #c37;
+  opacity: 0.6;
+  will-change: opacity;
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-animations/animate-opacity.html b/layout/reftests/css-animations/animate-opacity.html
new file mode 100644
index 000000000..ff09fe514
--- /dev/null
+++ b/layout/reftests/css-animations/animate-opacity.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<title>Reftest, bug 1156456</title>
+<style>
+
+body {
+  background: #2a4;
+}
+
+@keyframes HoldOpacity {
+  from, to {
+    opacity: 0.6;
+  }
+}
+
+div {
+  width: 200px; height: 200px;
+  background: #c37;
+  animation: 10s HoldOpacity infinite;
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-animations/animate-preserves3d-ref.html b/layout/reftests/css-animations/animate-preserves3d-ref.html
new file mode 100644
index 000000000..d85a9772a
--- /dev/null
+++ b/layout/reftests/css-animations/animate-preserves3d-ref.html
@@ -0,0 +1,30 @@
+<html>
+  <head>
+    <style type="text/css">
+      .pad {
+        display: block;
+        height: 20px;
+      }
+      .out {
+        display: block;
+        position: absolute;
+        transform-origin: 0 0;
+        width: 100px;
+        height: 50px;
+        overflow: hidden;
+        left: 108px;
+      }
+      .rect {
+        width: 100px;
+        height: 50px;
+        background-color: grey;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="pad"></div>
+    <div class="out">
+      <div class="rect"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/css-animations/animate-preserves3d.html b/layout/reftests/css-animations/animate-preserves3d.html
new file mode 100644
index 000000000..cf390513b
--- /dev/null
+++ b/layout/reftests/css-animations/animate-preserves3d.html
@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <style type="text/css">
+      .pad {
+        display: block;
+        height: 20px;
+      }
+      .out {
+        display: block;
+        position: absolute;
+        transform-origin: 0 0;
+        width: 100px;
+        height: 50px;
+        overflow: hidden;
+      }
+      .rect {
+        width: 100px;
+        height: 50px;
+        background-color: grey;
+      }
+      
+      .ani {
+        animation: rot 200s linear infinite;
+        animation-timing-function: steps(2, start);
+        transform-origin: 50px 50px;
+      }
+      @keyframes rot {
+        to { transform: translate(200px, 0px); }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="pad"></div>
+    <div class="out ani">
+      <div class="rect"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/css-animations/background-position-after-finish.html b/layout/reftests/css-animations/background-position-after-finish.html
new file mode 100644
index 000000000..528cfc0f8
--- /dev/null
+++ b/layout/reftests/css-animations/background-position-after-finish.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>background-position-x animation after finish</title>
+<style>
+@keyframes holdBackgroundPosition {
+  from,to { background-position-x: 100%; }
+}
+#test {
+  height: 100px;
+  width: 100px;
+  background-repeat: no-repeat;
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */
+  animation: holdBackgroundPosition 0.01s;
+  background-position-x: 50%;
+}
+</style>
+<div id="test" class="reftest-opaque-layer"></div>
+<script>
+document.getElementById("test").addEventListener("animationend", () => {
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  })
+}, false);
+</script>
diff --git a/layout/reftests/css-animations/background-position-important.html b/layout/reftests/css-animations/background-position-important.html
new file mode 100644
index 000000000..2b6536cbf
--- /dev/null
+++ b/layout/reftests/css-animations/background-position-important.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<title>background-position-x animation overridden by important style</title>
+<style>
+@keyframes holdBackgroundPosition {
+  from,to { background-position-x: 50%; }
+}
+#test {
+  height: 100px;
+  width: 100px;
+  background-repeat: no-repeat;
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */
+  background-position-x: 50% !important;
+  animation: holdBackgroundPosition 100s infinite;
+}
+</style>
+<div id="test" class="reftest-opaque-layer"></div>
diff --git a/layout/reftests/css-animations/background-position-in-delay.html b/layout/reftests/css-animations/background-position-in-delay.html
new file mode 100644
index 000000000..0ddc220b2
--- /dev/null
+++ b/layout/reftests/css-animations/background-position-in-delay.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>background-position-x animation in delay phase</title>
+<style>
+@keyframes holdBackgroundPosition {
+  from,to { background-position-x: 100%; }
+}
+#test {
+  height: 100px;
+  width: 100px;
+  background-repeat: no-repeat;
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */
+  animation: holdBackgroundPosition 100s 100s infinite;
+  background-position-x: 50%;
+}
+</style>
+<div id="test" class="reftest-opaque-layer"></div>
diff --git a/layout/reftests/css-animations/background-position-ref.html b/layout/reftests/css-animations/background-position-ref.html
new file mode 100644
index 000000000..d47982046
--- /dev/null
+++ b/layout/reftests/css-animations/background-position-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Reference of testcases for background-position-x animations</title>
+<style>
+#test {
+  height: 100px;
+  width: 100px;
+  background-repeat: no-repeat;
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */
+  background-position-x: 50%;
+}
+</style>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/background-position-running.html b/layout/reftests/css-animations/background-position-running.html
new file mode 100644
index 000000000..73e811d59
--- /dev/null
+++ b/layout/reftests/css-animations/background-position-running.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>background-position-x animation while running</title>
+<style>
+@keyframes holdBackgroundPosition {
+  from,to { background-position-x: 50%; }
+}
+#test {
+  height: 100px;
+  width: 100px;
+  background-repeat: no-repeat;
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */
+  background-position-x: 0px;
+  animation: holdBackgroundPosition 100s infinite;
+}
+</style>
+<div id="test" class="reftest-opaque-layer"></div>
diff --git a/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element-ref.html b/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element-ref.html
new file mode 100644
index 000000000..b94f18dd4
--- /dev/null
+++ b/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<title>In visibility hidden color animation on pseudo element</title>
+<style>
+
+div:before {
+  visibility: visible;
+  color: blue;
+  content: "Color Animation";
+}
+
+div {
+  color: black;
+  visibility: hidden;
+}
+
+</style>
+<div>color animation on visible psuedo element attached to invisible element</div>
diff --git a/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element.html b/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element.html
new file mode 100644
index 000000000..b8c456b8f
--- /dev/null
+++ b/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>In visibility hidden color animation on pseudo element</title>
+<style>
+
+@keyframes color {
+  0% { color: black }
+  1% { color: blue }
+  100% { color: blue }
+}
+
+div:before {
+  visibility: visible;
+  content: "Color Animation";
+  animation: color 0.1s 1 forwards;
+}
+
+div {
+  color: black;
+  visibility: hidden;
+}
+
+</style>
+<div id="target">color animation on visible pseudo element attached to invisible element</div>
+<script>
+
+document.getElementById("target").addEventListener("animationend", AnimationEndListener, false);
+
+function AnimationEndListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/css-animations/in-visibility-hidden-animation-ref.html b/layout/reftests/css-animations/in-visibility-hidden-animation-ref.html
new file mode 100644
index 000000000..09997ef48
--- /dev/null
+++ b/layout/reftests/css-animations/in-visibility-hidden-animation-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<title>In visibility hidden color animation</title>
+<style>
+
+p {
+  color: blue;
+  visibility: visible;
+}
+
+div {
+  visibility: hidden;
+}
+
+</style>
+<div><p>color animation on visible element in invisible parent element</p></div>
diff --git a/layout/reftests/css-animations/in-visibility-hidden-animation.html b/layout/reftests/css-animations/in-visibility-hidden-animation.html
new file mode 100644
index 000000000..b39e65adf
--- /dev/null
+++ b/layout/reftests/css-animations/in-visibility-hidden-animation.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>in visibility hidden color animation</title>
+<style>
+
+@keyframes color {
+  0% { color: black }
+  1% { color: blue }
+  100% { color: blue }
+}
+
+p {
+  visibility: visible;
+}
+
+div {
+  color: black;
+  animation: color 0.1s 1 forwards;
+  visibility: hidden;
+}
+
+</style>
+<div id="parent"><p>color animation on visible element in invisible parent element</p></div>
+<script>
+
+document.getElementById("parent").addEventListener("animationend", AnimationEndListener, false);
+
+function AnimationEndListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/css-animations/no-stacking-context-animation-ref.html b/layout/reftests/css-animations/no-stacking-context-animation-ref.html
new file mode 100644
index 000000000..efc029d03
--- /dev/null
+++ b/layout/reftests/css-animations/no-stacking-context-animation-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>
+Reference of testcases which don't create a stacking context for bug 1278136
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  background: green;
+  position: fixed;
+  top: 50px;
+}
+#test {
+  height: 100px;
+  width: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html b/layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html
new file mode 100644
index 000000000..f8b58ed20
--- /dev/null
+++ b/layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Removing CSS animation in delay phase destroys a stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opacity0 {
+  from, to { opacity: 0 }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  opacity: 1 ! important;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  target.style.animation = "Opacity0 100s 100s";
+
+  // We need to wait for MozAfterPaint instead of requestAnimationFrame to
+  // ensure the stacking context has been updated on the compositor.
+  window.addEventListener("MozAfterPaint", function firstPaint() {
+    window.removeEventListener("MozAfterPaint", firstPaint, false);
+    // Here we have CSS animation on 100% opacity style element, so
+    // there should be a stacking context.
+
+    target.style.animation = "";
+
+    // This time we don't need to wait for MozAfterPaint because reftest tool
+    // will be received MozAferPaint event.
+    requestAnimationFrame(() => {
+      // Now we have only 100% opacity style, so we should not create any
+      // stacking context.
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  }, false);
+});
+</script>
diff --git a/layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html b/layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html
new file mode 100644
index 000000000..19605a93c
--- /dev/null
+++ b/layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Removing CSS animation in delay phase destroys 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;
+  transform: none ! important;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  target.style.animation = "TransformNone 100s 100s";
+
+  // We need to wait for MozAfterPaint instead of requestAnimationFrame to
+  // ensure the stacking context has been updated on the compositor.
+  window.addEventListener("MozAfterPaint", function firstPaint() {
+    window.removeEventListener("MozAfterPaint", firstPaint, false);
+    // Here we have CSS animation on transform:none style element, so
+    // there should be a stacking context.
+
+    target.style.animation = "";
+    // This time we don't need to wait for MozAfterPaint because reftest tool
+    // will be received MozAferPaint event.
+    requestAnimationFrame(() => {
+      // Now we have only transform:none style, so we should not create any
+      // stacking context.
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  }, false);
+});
+</script>
diff --git a/layout/reftests/css-animations/partially-out-of-view-animation-ref.html b/layout/reftests/css-animations/partially-out-of-view-animation-ref.html
new file mode 100644
index 000000000..fafb98b2d
--- /dev/null
+++ b/layout/reftests/css-animations/partially-out-of-view-animation-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+<title>Animation on element which is partially out of the view</title>
+<style>
+
+div {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background-color: blue;
+  top: -100px;
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-animations/partially-out-of-view-animation.html b/layout/reftests/css-animations/partially-out-of-view-animation.html
new file mode 100644
index 000000000..4244a2d1e
--- /dev/null
+++ b/layout/reftests/css-animations/partially-out-of-view-animation.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>Animation on element which is partially out of the view</title>
+<style>
+
+@keyframes background-color {
+  0% { background-color: black }
+  1% { background-color: blue }
+  100% { background-color: blue }
+}
+
+div {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background-color: black;
+  animation: background-color 0.1s 1 forwards;
+  top: -100px;
+}
+
+</style>
+<div id="target"></div>
+<script>
+
+document.getElementById("target").addEventListener("animationend", AnimationEndListener, false);
+
+function AnimationEndListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/css-animations/print-no-animations-notref.html b/layout/reftests/css-animations/print-no-animations-notref.html
new file mode 100644
index 000000000..dadf405ea
--- /dev/null
+++ b/layout/reftests/css-animations/print-no-animations-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html class="reftest-print">
+<title>Static CSS animation</title>
+<style>
+
+p {
+  color: blue;
+}
+
+</style>
+<p>blue with animation support; olive without</p>
diff --git a/layout/reftests/css-animations/print-no-animations-ref.html b/layout/reftests/css-animations/print-no-animations-ref.html
new file mode 100644
index 000000000..f4d3dde36
--- /dev/null
+++ b/layout/reftests/css-animations/print-no-animations-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html class="reftest-print">
+<title>Static CSS animation</title>
+<style>
+
+p {
+  color: olive;
+}
+
+</style>
+<p>blue with animation support; olive without</p>
diff --git a/layout/reftests/css-animations/print-no-animations.html b/layout/reftests/css-animations/print-no-animations.html
new file mode 100644
index 000000000..a52334cd8
--- /dev/null
+++ b/layout/reftests/css-animations/print-no-animations.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html class="reftest-print">
+<title>Static CSS animation</title>
+<style>
+
+@keyframes a {
+  from, to { color: blue }
+}
+
+p {
+  color: olive;
+  animation: a 1s infinite;
+}
+
+</style>
+<p>blue with animation support; olive without</p>
diff --git a/layout/reftests/css-animations/reftest-stylo.list b/layout/reftests/css-animations/reftest-stylo.list
new file mode 100644
index 000000000..fcff4eff6
--- /dev/null
+++ b/layout/reftests/css-animations/reftest-stylo.list
@@ -0,0 +1,34 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== screen-animations.html screen-animations.html
+== screen-animations.html screen-animations.html
+== print-no-animations.html print-no-animations.html
+# reftest harness doesn't actually make pres context non-dynamic for reftest-print tests
+== print-no-animations.html print-no-animations.html
+# reftest harness doesn't actually make pres context non-dynamic for reftest-print tests
+== animate-opacity.html animate-opacity.html
+== animate-preserves3d.html animate-preserves3d.html
+== in-visibility-hidden-animation.html in-visibility-hidden-animation.html
+== in-visibility-hidden-animation-pseudo-element.html in-visibility-hidden-animation-pseudo-element.html
+== partially-out-of-view-animation.html partially-out-of-view-animation.html
+== animate-display-table-opacity.html animate-display-table-opacity.html
+# We need to run 100% opacity test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor
+test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-opacity-1-animation.html stacking-context-opacity-1-animation.html
+# We need to run transform:none test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor
+test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-transform-none-animation.html stacking-context-transform-none-animation.html
+== stacking-context-lose-opacity-1.html stacking-context-lose-opacity-1.html
+== stacking-context-lose-transform-none.html stacking-context-lose-transform-none.html
+== stacking-context-opacity-1-animation.html stacking-context-opacity-1-animation.html
+== stacking-context-opacity-1-with-fill-backwards.html stacking-context-opacity-1-with-fill-backwards.html
+== stacking-context-opacity-1-with-fill-forwards.html stacking-context-opacity-1-with-fill-forwards.html
+== stacking-context-paused-on-opacity-1.html stacking-context-paused-on-opacity-1.html
+== stacking-context-paused-on-transform-none.html stacking-context-paused-on-transform-none.html
+== stacking-context-transform-none-animation.html stacking-context-transform-none-animation.html
+== stacking-context-transform-none-animation-on-svg.html stacking-context-transform-none-animation-on-svg.html
+== stacking-context-transform-none-animation-with-backface-visibility.html stacking-context-transform-none-animation-with-backface-visibility.html
+== stacking-context-transform-none-animation-with-preserve-3d.html stacking-context-transform-none-animation-with-preserve-3d.html
+== stacking-context-transform-none-with-fill-backwards.html stacking-context-transform-none-with-fill-backwards.html
+== stacking-context-transform-none-with-fill-forwards.html stacking-context-transform-none-with-fill-forwards.html
+== stacking-context-opacity-1-in-delay.html stacking-context-opacity-1-in-delay.html
+# bug 1278136 and bug 1279403
+== stacking-context-transform-none-in-delay.html stacking-context-transform-none-in-delay.html
+# bug 1278136 and bug 1279403
diff --git a/layout/reftests/css-animations/reftest.list b/layout/reftests/css-animations/reftest.list
new file mode 100644
index 000000000..bf9fa7058
--- /dev/null
+++ b/layout/reftests/css-animations/reftest.list
@@ -0,0 +1,43 @@
+== screen-animations.html screen-animations-ref.html
+!= screen-animations.html screen-animations-notref.html
+fails == print-no-animations.html print-no-animations-ref.html # reftest harness doesn't actually make pres context non-dynamic for reftest-print tests
+fails != print-no-animations.html print-no-animations-notref.html # reftest harness doesn't actually make pres context non-dynamic for reftest-print tests
+== animate-opacity.html animate-opacity-ref.html
+== animate-preserves3d.html animate-preserves3d-ref.html
+== in-visibility-hidden-animation.html in-visibility-hidden-animation-ref.html
+== in-visibility-hidden-animation-pseudo-element.html in-visibility-hidden-animation-pseudo-element-ref.html
+== partially-out-of-view-animation.html partially-out-of-view-animation-ref.html
+== animate-display-table-opacity.html animate-display-table-opacity-ref.html
+# We need to run 100% opacity test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor
+test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-opacity-1-animation.html stacking-context-animation-ref.html
+# We need to run transform:none test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor
+test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-transform-none-animation.html stacking-context-animation-ref.html
+== no-stacking-context-opacity-removing-animation-in-delay.html no-stacking-context-animation-ref.html
+== no-stacking-context-transform-removing-animation-in-delay.html no-stacking-context-animation-ref.html
+== stacking-context-lose-opacity-1.html stacking-context-animation-ref.html
+== stacking-context-lose-transform-none.html stacking-context-animation-ref.html
+== stacking-context-opacity-win-in-delay.html stacking-context-animation-ref.html
+== stacking-context-opacity-win-in-delay-on-main-thread.html stacking-context-animation-ref.html
+== stacking-context-opacity-wins-over-transition.html stacking-context-animation-ref.html
+== stacking-context-transform-win-in-delay.html stacking-context-animation-ref.html
+== stacking-context-transform-win-in-delay-on-main-thread.html stacking-context-animation-ref.html
+== stacking-context-transform-wins-over-transition.html stacking-context-animation-ref.html
+== stacking-context-opacity-1-animation.html stacking-context-animation-ref.html
+== stacking-context-opacity-1-with-fill-backwards.html stacking-context-animation-ref.html
+== stacking-context-opacity-1-with-fill-forwards.html stacking-context-animation-ref.html
+== stacking-context-paused-on-opacity-1.html stacking-context-animation-ref.html
+== stacking-context-paused-on-transform-none.html stacking-context-animation-ref.html
+== stacking-context-transform-none-animation.html stacking-context-animation-ref.html
+== stacking-context-transform-none-animation-on-svg.html  stacking-context-animation-ref.html
+== stacking-context-transform-none-animation-with-backface-visibility.html stacking-context-animation-ref.html
+== stacking-context-transform-none-animation-with-preserve-3d.html stacking-context-animation-ref.html
+== stacking-context-transform-none-with-fill-backwards.html stacking-context-animation-ref.html
+== stacking-context-transform-none-with-fill-forwards.html stacking-context-animation-ref.html
+== stacking-context-opacity-1-in-delay.html stacking-context-animation-ref.html
+== stacking-context-opacity-removing-important-in-delay.html stacking-context-animation-ref.html
+== stacking-context-transform-none-in-delay.html stacking-context-animation-ref.html
+== stacking-context-transform-removing-important-in-delay.html stacking-context-animation-ref.html
+fails == background-position-in-delay.html background-position-ref.html # This test fails the reftest-opaque-layer check since animating background-position currently creates an active layer from its delay phse, and reftest-opaque-layer only handles items assigned to PaintedLayers.
+== background-position-after-finish.html background-position-ref.html
+fails == background-position-running.html background-position-ref.html # This test fails the reftest-opaque-layer check since animating background-position currently creates an active layer, and reftest-opaque-layer only handles items assigned to PaintedLayers.
+fails == background-position-important.html background-position-ref.html # This test fails the reftest-opaque-layer check since animating background-position overridden by a non-animated !important style also creates an active layer, and reftest-opaque-layer only handles items that are assigned to PaintedLayers.
diff --git a/layout/reftests/css-animations/screen-animations-notref.html b/layout/reftests/css-animations/screen-animations-notref.html
new file mode 100644
index 000000000..73a026f60
--- /dev/null
+++ b/layout/reftests/css-animations/screen-animations-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<title>Static CSS animation</title>
+<style>
+
+p {
+  color: olive;
+}
+
+</style>
+<p>blue with animation support; olive without</p>
diff --git a/layout/reftests/css-animations/screen-animations-ref.html b/layout/reftests/css-animations/screen-animations-ref.html
new file mode 100644
index 000000000..883091308
--- /dev/null
+++ b/layout/reftests/css-animations/screen-animations-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<title>Static CSS animation</title>
+<style>
+
+p {
+  color: blue;
+}
+
+</style>
+<p>blue with animation support; olive without</p>
diff --git a/layout/reftests/css-animations/screen-animations.html b/layout/reftests/css-animations/screen-animations.html
new file mode 100644
index 000000000..ba1a0aa14
--- /dev/null
+++ b/layout/reftests/css-animations/screen-animations.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<title>Static CSS animation</title>
+<style>
+
+@keyframes a {
+  from, to { color: blue }
+}
+
+p {
+  color: olive;
+  animation: a 1s infinite;
+}
+
+</style>
+<p>blue with animation support; olive without</p>
diff --git a/layout/reftests/css-animations/stacking-context-animation-ref.html b/layout/reftests/css-animations/stacking-context-animation-ref.html
new file mode 100644
index 000000000..817056c1c
--- /dev/null
+++ b/layout/reftests/css-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/css-animations/stacking-context-lose-opacity-1.html b/layout/reftests/css-animations/stacking-context-lose-opacity-1.html
new file mode 100644
index 000000000..80ce2ea72
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-lose-opacity-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>
+Opacity animation creates a stacking context even if the opacity property
+is overridden by an !important rule
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opaque {
+  from, to { opacity: 1 }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opaque 100s;
+  opacity: 1 !important;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-lose-transform-none.html b/layout/reftests/css-animations/stacking-context-lose-transform-none.html
new file mode 100644
index 000000000..f08ec41be
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-lose-transform-none.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>
+Transform animation creates a stacking context even if the transform property
+is overridden by an !important rule
+</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 infinite;
+  transform: none !important;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-opacity-1-animation.html b/layout/reftests/css-animations/stacking-context-opacity-1-animation.html
new file mode 100644
index 000000000..3a4fe7bf4
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-1-animation.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+Opacity animation creates a stacking context even if it has only 100% opacity
+in its keyframes
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opaque {
+  from, to { opacity: 1; }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opaque 100s infinite;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-opacity-1-in-delay.html b/layout/reftests/css-animations/stacking-context-opacity-1-in-delay.html
new file mode 100644
index 000000000..4e441397c
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-1-in-delay.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>
+Opacity animation creates stacking context in delay phase
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opaque {
+  from, to { opacity: 1 }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opaque 100s 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-backwards.html b/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-backwards.html
new file mode 100644
index 000000000..484da2979
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-backwards.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+Opacity animation does not destroy stacking context when the animation
+has finished but has fill:backwards
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opaque {
+  from, to { opacity: 1 }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opaque 100s 100s backwards;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-forwards.html b/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-forwards.html
new file mode 100644
index 000000000..5fdda4f9d
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-forwards.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+Opacity animation does not destroy stacking context when the animation
+has finished but has fill:forwards
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opaque {
+  from, to { opacity: 1 }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opaque 0s forwards;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html b/layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html
new file mode 100644
index 000000000..f89240d23
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Removing !important rule during delay phase of animation creates
+a stack context for correct style
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opacity0 {
+  from, to { opacity: 0 }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opacity0 100s 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  target.style.setProperty("opacity", "0.1", "important");
+
+  requestAnimationFrame(() => {
+    // Now the target opacity style should be 0.1 because of !important rule.
+
+    // Apply 100% opacity without important directive.
+    target.style.setProperty("opacity", "1", "");
+    requestAnimationFrame(() => {
+      // The CSS animation is no longer overridden but it's still in delay
+      // phase, so we should create a stacking context for 100% opacity style.
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+});
+</script>
diff --git a/layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html b/layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html
new file mode 100644
index 000000000..8d35bf622
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>
+Opacity animation winning over another opacity animation in delay phase
+on the main-thread creates a stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opacity1 {
+  from, to { opacity: 1; }
+}
+@keyframes Opacity0 {
+  from, to { opacity: 0; }
+}
+// For preventing running on the compositor.
+@keyframes Width {
+  from, to { width: 100px; }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opacity0 100s 100s, Opacity1 100s, Width 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html b/layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html
new file mode 100644
index 000000000..c60177d08
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>
+Opacity animation winning over another opacity 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; }
+}
+@keyframes Opacity0 {
+  from, to { opacity: 0; }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opacity0 100s 100s, Opacity1 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html b/layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html
new file mode 100644
index 000000000..a7d4ad172
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Opacity animation winning over opacity transition creates a stacking context
+for correct style.
+</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;
+  opacity: 1;
+  transition: opacity 100s steps(1, start);
+  animation: Opacity1 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  getComputedStyle(target).opacity;
+
+  // CSS animation wins over transitions, so transition won't be visible during
+  // the CSS animation.
+  target.style.opacity = 0;
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
diff --git a/layout/reftests/css-animations/stacking-context-paused-on-opacity-1.html b/layout/reftests/css-animations/stacking-context-paused-on-opacity-1.html
new file mode 100644
index 000000000..b27985a6c
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-paused-on-opacity-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+Transform animation creates a stacking context even though it's paused on
+a 100% opacity keyframe
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opaque {
+  from, to { opacity: 1 }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opaque 100s paused;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-paused-on-transform-none.html b/layout/reftests/css-animations/stacking-context-paused-on-transform-none.html
new file mode 100644
index 000000000..cd0290849
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-paused-on-transform-none.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+Transform animation creates a stacking context even though it's paused on
+a 'transform:none' keyframe
+</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 paused;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-none-animation-on-svg.html b/layout/reftests/css-animations/stacking-context-transform-none-animation-on-svg.html
new file mode 100644
index 000000000..6192d58b7
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-none-animation-on-svg.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>Transform animation creates a stacking context even though it has only
+'transform:none' keyframes on an svg element</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes TransformNone {
+  from, to { transform: none }
+}
+#test {
+  animation: TransformNone 100s infinite;
+}
+</style>
+<span></span>
+<svg id="test" width="100px" height="100px">
+  <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
+</svg>
diff --git a/layout/reftests/css-animations/stacking-context-transform-none-animation-with-backface-visibility.html b/layout/reftests/css-animations/stacking-context-transform-none-animation-with-backface-visibility.html
new file mode 100644
index 000000000..c96be7d4c
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-none-animation-with-backface-visibility.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>
+Transform animation creates a stacking context even though it has only
+'transform:none' keyframes and with a style which prevents performning
+the animation on the compositor.
+</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;
+  backface-visibility: hidden;
+  animation: TransformNone 100s infinite;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-none-animation-with-preserve-3d.html b/layout/reftests/css-animations/stacking-context-transform-none-animation-with-preserve-3d.html
new file mode 100644
index 000000000..37b3f8516
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-none-animation-with-preserve-3d.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>
+Transform animation creates a stacking context even though it has only
+'transform:none' keyframes and with a style which prevents performning
+the animation on the compositor.
+</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;
+  transform-style: preserve-3d;
+  animation: TransformNone 100s infinite;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-none-animation.html b/layout/reftests/css-animations/stacking-context-transform-none-animation.html
new file mode 100644
index 000000000..53213b452
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-none-animation.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+Transform animation creates a stacking context even though it has only
+'transform:none' keyframes
+</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 infinite;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-none-in-delay.html b/layout/reftests/css-animations/stacking-context-transform-none-in-delay.html
new file mode 100644
index 000000000..c52e8825d
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-none-in-delay.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>
+Transform animation creates stacking context in delay phase
+</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 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-none-with-fill-backwards.html b/layout/reftests/css-animations/stacking-context-transform-none-with-fill-backwards.html
new file mode 100644
index 000000000..d0515c294
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-none-with-fill-backwards.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+Transform animation does not destroy stacking context when the animation
+has finished but has fill:backwards
+</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 100s backwards;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-none-with-fill-forwards.html b/layout/reftests/css-animations/stacking-context-transform-none-with-fill-forwards.html
new file mode 100644
index 000000000..2d9610232
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-none-with-fill-forwards.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>
+Transform animation does not destroy stacking context when the animation
+has finished but has fill:forwards
+</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 0s forwards;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html b/layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html
new file mode 100644
index 000000000..0b39dd4d4
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Removing !important rule during delay phase of animation creates
+a stack context for correct style
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Transform100px {
+  from, to { transform: translate(100px) }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Transform100px 100s 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  target.style.setProperty("transform", "translateX(200px)", "important");
+
+  requestAnimationFrame(() => {
+    // Now the target transform style should be translateX(200px) because of
+    // !important rule.
+
+    // Apply transform:none without important directive.
+    target.style.setProperty("transform", "none", "");
+    requestAnimationFrame(() => {
+      // The CSS animation is no longer overridden but it's still in delay
+      // phase, so we should create a stacking context for transform:none style.
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+});
+</script>
diff --git a/layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html b/layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html
new file mode 100644
index 000000000..2f6116894
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>
+Transform animation winning over another transform animation in delay phase
+on the main-thread creates a stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes TransformNone {
+  from, to { transform: none; }
+}
+@keyframes Transform100px {
+  from, to { transform: translateX(100px); }
+}
+// For preventing running on the compositor.
+@keyframes Width {
+  from, to { width: 100px; }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Transform100px 100s 100s, TransformNone 100s, Width 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-win-in-delay.html b/layout/reftests/css-animations/stacking-context-transform-win-in-delay.html
new file mode 100644
index 000000000..5a864faf4
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-win-in-delay.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>
+Transform animation winning over another transform 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; }
+}
+@keyframes Transform100px {
+  from, to { transform: translateX(100px); }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Transform100px 100s 100s, TransformNone 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html b/layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html
new file mode 100644
index 000000000..790fdd6e8
--- /dev/null
+++ b/layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Transform animation winning over transition creates a stacking context
+for correct style
+</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;
+  transform: translateX(200px);
+  transition: transform 100s steps(1, start);
+  animation: TransformNone 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  getComputedStyle(target).transform;
+
+  // CSS animation wins over transition, so transition won't be visible during
+  // the CSS animation.
+  target.style.transform = "translateX(100px)";
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
-- 
cgit v1.2.3