<!DOCTYPE html>

<html>
<head>
    <style>
        .box {
          width: 300px;
          height: 300px;
          background-color: blue;
        }
        
        .composited {
          -webkit-transform: translateZ(0);
        }
        
        .clipped {
            -webkit-clip-path: inset(0 50px);
        }
        
        .masked {
            -webkit-mask: linear-gradient(white, transparent);
        }
        
        body.changed .clipped {
            -webkit-clip-path: inset(0 70px);
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.waitUntilDone();
            testRunner.dumpAsText();
        }

        function doTest()
        {
            window.setTimeout(function() {
                window.setTimeout(function() {
                    if (window.internals)
                        window.internals.startTrackingRepaints();

                    document.body.classList.add('changed');

                    if (window.internals)
                        document.getElementById('repaintRects').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);

                    if (window.testRunner)
                        testRunner.notifyDone();
                }, 0)
            }, 0)
        }
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
    <div class="clipped composited box">box1</div>
    <div class="clipped masked composited box">box2</div>
<p>Only the second box should have a repaint.</p>
<pre id="repaintRects"></pre>
</body>
</html>