summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-animations
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/css-animations')
-rw-r--r--layout/reftests/css-animations/animate-display-table-opacity-ref.html9
-rw-r--r--layout/reftests/css-animations/animate-display-table-opacity.html14
-rw-r--r--layout/reftests/css-animations/animate-opacity-ref.html18
-rw-r--r--layout/reftests/css-animations/animate-opacity.html23
-rw-r--r--layout/reftests/css-animations/animate-preserves3d-ref.html30
-rw-r--r--layout/reftests/css-animations/animate-preserves3d.html38
-rw-r--r--layout/reftests/css-animations/background-position-after-finish.html24
-rw-r--r--layout/reftests/css-animations/background-position-important.html17
-rw-r--r--layout/reftests/css-animations/background-position-in-delay.html16
-rw-r--r--layout/reftests/css-animations/background-position-ref.html12
-rw-r--r--layout/reftests/css-animations/background-position-running.html16
-rw-r--r--layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element-ref.html18
-rw-r--r--layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element.html37
-rw-r--r--layout/reftests/css-animations/in-visibility-hidden-animation-ref.html16
-rw-r--r--layout/reftests/css-animations/in-visibility-hidden-animation.html36
-rw-r--r--layout/reftests/css-animations/no-stacking-context-animation-ref.html20
-rw-r--r--layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html48
-rw-r--r--layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html47
-rw-r--r--layout/reftests/css-animations/partially-out-of-view-animation-ref.html15
-rw-r--r--layout/reftests/css-animations/partially-out-of-view-animation.html35
-rw-r--r--layout/reftests/css-animations/print-no-animations-notref.html11
-rw-r--r--layout/reftests/css-animations/print-no-animations-ref.html11
-rw-r--r--layout/reftests/css-animations/print-no-animations.html16
-rw-r--r--layout/reftests/css-animations/reftest-stylo.list34
-rw-r--r--layout/reftests/css-animations/reftest.list43
-rw-r--r--layout/reftests/css-animations/screen-animations-notref.html11
-rw-r--r--layout/reftests/css-animations/screen-animations-ref.html11
-rw-r--r--layout/reftests/css-animations/screen-animations.html16
-rw-r--r--layout/reftests/css-animations/stacking-context-animation-ref.html19
-rw-r--r--layout/reftests/css-animations/stacking-context-lose-opacity-1.html25
-rw-r--r--layout/reftests/css-animations/stacking-context-lose-transform-none.html25
-rw-r--r--layout/reftests/css-animations/stacking-context-opacity-1-animation.html24
-rw-r--r--layout/reftests/css-animations/stacking-context-opacity-1-in-delay.html23
-rw-r--r--layout/reftests/css-animations/stacking-context-opacity-1-with-fill-backwards.html24
-rw-r--r--layout/reftests/css-animations/stacking-context-opacity-1-with-fill-forwards.html24
-rw-r--r--layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html43
-rw-r--r--layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html31
-rw-r--r--layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html27
-rw-r--r--layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html40
-rw-r--r--layout/reftests/css-animations/stacking-context-paused-on-opacity-1.html24
-rw-r--r--layout/reftests/css-animations/stacking-context-paused-on-transform-none.html24
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-none-animation-on-svg.html22
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-none-animation-with-backface-visibility.html26
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-none-animation-with-preserve-3d.html26
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-none-animation.html24
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-none-in-delay.html23
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-none-with-fill-backwards.html24
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-none-with-fill-forwards.html24
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html44
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html31
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-win-in-delay.html27
-rw-r--r--layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html40
52 files changed, 1306 insertions, 0 deletions
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>