Bug 1292441 - Part 2: Reftest for backround-position-x animation. r?mstange
MozReview-Commit-ID: q7m7szmavl
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
--- a/layout/reftests/css-animations/reftest.list
+++ b/layout/reftests/css-animations/reftest.list
@@ -22,8 +22,12 @@ test-pref(layers.offmainthreadcompositio
== 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
fails == stacking-context-opacity-1-in-delay.html stacking-context-animation-ref.html # bug 1278136 and bug 1279403
fails == stacking-context-transform-none-in-delay.html stacking-context-animation-ref.html # bug 1278136 and bug 1279403
+== background-position-in-delay.html background-position-ref.html
+== 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.
