<html>
<head>
  <style>
    #box {
        position: absolute;
        left: 100px;
        top: 100px;
        height: 200px;
        width: 200px;
        background-color: red;
        -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%) 50 stretch;
    }
    #boxStatic {
        position: absolute;
        left: 100px;
        top: 300px;
        height: 200px;
        width: 200px;
        background-color: red;
        -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%) 50 stretch;
    }
    @-webkit-keyframes anim {
        from { -webkit-mask-box-image: url(resources/stripes-100.png) 50 stretch; }
        to   { -webkit-mask-box-image: url(resources/green-100.png) 50 stretch; }
    }
  </style>
</head>
<body>
<img id="box" src="resources/green-100.png"/>
<img id="boxStatic" src="resources/green-100.png"/>
<div id="result">
PASS - "webkitMaskBoxImage" property for "box" element at 2.25s saw something close to: 0.25<br>
PASS - "webkitMaskBoxImage" property for "box" and "boxStatic" elements at 2.25s are close enough to each other
</div>
</body>
</html>