<!DOCTYPE>

<html>
<head>
  <style>
    .container {
        height: 300px;
        width: 400px;
        border: 2px solid black;
        overflow: hidden;
    }

    .box {
        height: 300px;
        width: 410px;
        border: 1px solid black;
        background-color: gray;
    }

    .large.box {
        width: 2800px;
    }

    .composited {
        -webkit-transform: translateZ(0);
    }

    .masked {
        -webkit-mask-image: url(../resources/alpha-gradient.png);
        -webkit-mask-repeat: repeat-x;
    }
  </style>
  <script>
    if (window.testRunner)
        testRunner.waitUntilDone();

    function doTest()
    {
        window.setTimeout(function() {
            document.getElementById('box').classList.add('large');
            if (window.testRunner)
                testRunner.notifyDone();
        }, 0);
    }

    window.addEventListener('load', doTest, false);
  </script>
</head>
<body>

    <div class="composited container">
        <div id="box" class="composited masked box"></div> 
    </div>

</body>
</html>