<!doctype HTML>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();
onload = () => {
  runAfterLayoutAndPaint(() => {
    target1.style.webkitMaskImage = "linear-gradient(transparent, green)";
    runAfterLayoutAndPaint(() => {
      target2.style.webkitMaskImage = "linear-gradient(transparent, green)";
      runAfterLayoutAndPaint(() => {
        target3.style.webkitMaskImage = "initial";
        if (window.testRunner)
          testRunner.notifyDone();
      });
    });
  });
};
</script>
<div id="target1" style="width: 100px; height: 100px; background: blue"></div>
<div id="target2" style="width: 100px; height: 100px; background: green;
                        -webkit-mask-image: linear-gradient(green, transparent)"></div>
<div id="target3" style="width: 100px; height: 100px; background: cyan;
                        -webkit-mask-image: linear-gradient(green, transparent)"></div>