1 files changed, 45 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/animations/cross-fade-webkit-mask-image.html b/third_party/WebKit/LayoutTests/animations/cross-fade-webkit-mask-image.html
new file mode 100644
index 0000000..aa70ff4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/cross-fade-webkit-mask-image.html
@@ -0,0 +1,45 @@
+<html>
+<head>
+  <style>
+    #box {
+        position: absolute;
+        left: 100px;
+        top: 100px;
+        height: 100px;
+        width: 100px;
+        background-color: red;
+        -webkit-animation: anim 1s linear infinite;
+    }
+    #boxStatic {
+        position: absolute;
+        left: 100px;
+        top: 200px;
+        height: 100px;
+        width: 100px;
+        background-color: red;
+        -webkit-mask-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%);
+    }
+    @-webkit-keyframes anim {
+        from { -webkit-mask-image: url(resources/stripes-100.png); }
+        to   { -webkit-mask-image: url(resources/green-100.png); }
+    }
+  </style>
+  <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 2.25, "box", "webkitMaskImage", 0.25, 0.05],
+      ["anim", 2.25, ["box", "static:boxStatic"], "webkitMaskImage", 0.25, 0.05]
+    ];
+
+    var doPixelTest = true;
+    var disablePauseAPI = false;
+    runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
+  </script>
+</head>
+<body>
+<img id="box" src="resources/green-100.png"/>
+<img id="boxStatic" src="resources/green-100.png"/>
+<div id="result"></div>
+</body>
+</html>