<head>
    <style>
        canvas {
            object-fit: contain;
            border: 1px solid black;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="200" height="200"></canvas> 
<pre id="layers"></pre>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }
            
        var ctx;
        
        function repaintTest()
        {
            if (window.testRunner)
                testRunner.displayAndTrackRepaints();

            ctx.fillStyle = "rgb(0, 0, 128)";
            ctx.fillRect(40, 40, 10, 10);

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

            if (window.testRunner)
                testRunner.notifyDone();
        }
        
        function startTest()
        {
            var canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');

            ctx.fillStyle = "rgb(0, 128, 0)";
            ctx.fillRect(0, 0, 200, 200);
            
            requestAnimationFrame(() => {
                repaintTest();
            });
        }
        window.addEventListener('load', startTest, false);
    </script>
</body>