Bug 1273807 - mask-position and mask-size animation test cases.
mask-*-1a.html: test cases for indirect mask painting.(nsDisplayMask::PaintAsLayer)
mask-*-1b.html: test cases for painting mask on mask layer.(nsDisplayMask::PaintMask)
MozReview-Commit-ID: K9BK4MlnpBE
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/mask-anim-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Reference of testcases for mssk-position and mask-size animations</title>
+<style>
+#test {
+ height: 100px;
+ width: 100px;
+ background-repeat: no-repeat;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
+ background-position: 50% 50%;
+}
+</style>
+<div id="test"></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/mask-position-after-finish-1a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>mask-position animation after finish</title>
+<style>
+ @keyframes changeMaskPosition {
+ from { mask-position: 0% 0%; }
+ to { mask-position: center center; }
+ }
+ #test {
+ height: 100px;
+ width: 100px;
+ background-color: blue;
+ mask-repeat: no-repeat;
+ mask-position: 0% 0%;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
+ animation: changeMaskPosition 0.01s forwards;
+ }
+</style>
+<div id="test"></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/mask-position-after-finish-1b.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>mask-position animation after finish</title>
+<style>
+ @keyframes changeMaskPosition {
+ from { mask-position: 0% 0%; }
+ to { mask-position: center center; }
+ }
+ #test {
+ height: 100px;
+ width: 100px;
+ mask-repeat: no-repeat;
+ mask-position: 0% 0%;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
+ animation: changeMaskPosition 0.01s forwards;
+ }
+
+ #inner {
+ height: 100px;
+ width: 100px;
+ background-color: blue;
+ box-sizing: border-box;
+ /* Apply will-change property to force paint mask on mask layer */
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+</style>
+<div id="test"><div id="inner"></div></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/mask-position-in-delay-1a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>mask-position animation in delay phase</title>
+<style>
+@keyframes holdMaskPosition {
+ from,to { mask-position: left top; }
+}
+#test {
+ background-color: blue;
+ height: 100px;
+ width: 100px;
+ mask-repeat: no-repeat;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
+ animation: holdMaskPosition 100s 100s infinite;
+ mask-position: center center;
+}
+</style>
+<div id="test"></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/mask-position-in-delay-1b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>mask-position animation in delay phase</title>
+<style>
+ @keyframes holdMaskPosition {
+ from,to { mask-position: left top; }
+ }
+ #test {
+ height: 100px;
+ width: 100px;
+ mask-repeat: no-repeat;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
+ animation: holdMaskPosition 100s 100s infinite;
+ mask-position: center center;
+ }
+
+ #inner {
+ height: 100px;
+ width: 100px;
+ background-color: blue;
+ box-sizing: border-box;
+ /* Apply will-change property to force paint mask on mask layer */
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+</style>
+<div id="test"><div id="inner"></div></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/mask-size-after-finish-1a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>mask-size animation after finish</title>
+<style>
+ @keyframes changeMaskSize {
+ from { mask-size: 50px 50px; }
+ to { mask-size: 25px 25px; }
+ }
+ #test {
+ height: 100px;
+ width: 100px;
+ background-color: blue;
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect x="0" y="0" width="50" height="50" fill="blue"/></svg>');
+ animation: changeMaskSize 0.01s forwards;
+ }
+</style>
+<div id="test"></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/mask-size-after-finish-1b.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>mask-size animation after finish</title>
+<style>
+ @keyframes changeMaskSize {
+ from { mask-size: 50px 50px; }
+ to { mask-size: 25px 25px; }
+ }
+ #test {
+ height: 100px;
+ width: 100px;
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect x="0" y="0" width="50" height="50" fill="blue"/></svg>');
+ animation: changeMaskSize 0.01s forwards;
+ }
+
+ #inner {
+ height: 100px;
+ width: 100px;
+ background-color: blue;
+ box-sizing: border-box;
+ /* Apply will-change property to force paint mask on mask layer */
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+</style>
+<div id="test"><div id="inner"></div></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/mask-size-in-delay-1a.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>mask-size animation in delay phase</title>
+<style>
+ @keyframes changeMaskSize {
+ from { mask-size: 50px 50px; }
+ to { mask-size: 50px 50px; }
+ }
+
+ #test {
+ height: 100px;
+ width: 100px;
+ background-color: blue;
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
+ animation: changeMaskSize 100s 100s infinite;
+ }
+</style>
+<div id="test"></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/mask-size-in-delay-1b.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>mask-size animation in delay phase</title>
+<style>
+@keyframes changeMaskSize {
+ from { mask-size: 50px 50px; }
+ to { mask-size: 50px 50px; }
+}
+
+#test {
+ height: 100px;
+ width: 100px;
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
+ animation: changeMaskSize 100s 100s infinite;
+}
+
+#inner {
+ height: 100px;
+ width: 100px;
+ background-color: blue;
+ box-sizing: border-box;
+ /* Apply will-change property to force paint mask on mask layer */
+ border: 1px solid transparent;
+ will-change: transform;
+}
+
+</style>
+<div id="test"><div id="inner"></div></div>
--- a/layout/reftests/css-animations/reftest.list
+++ b/layout/reftests/css-animations/reftest.list
@@ -36,8 +36,17 @@ test-pref(layers.offmainthreadcompositio
== 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.
+
+== mask-position-after-finish-1a.html mask-anim-ref.html
+== mask-position-after-finish-1b.html mask-anim-ref.html
+== mask-position-in-delay-1a.html mask-anim-ref.html
+== mask-position-in-delay-1b.html mask-anim-ref.html
+== mask-size-after-finish-1a.html mask-anim-ref.html
+== mask-size-after-finish-1b.html mask-anim-ref.html
+== mask-size-in-delay-1a.html mask-anim-ref.html
+== mask-size-in-delay-1b.html mask-anim-ref.html
