<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This test passes if you see a black rectangle with a green border below.</p>
<div style="position: relative;">
    <canvas id="canvas" width="300" height="300"></canvas>
    <div style="position: absolute; top: 47px; left: 97px; width: 6px; height: 206px; background: green;"></div>
    <div style="position: absolute; top: 47px; left: 197px; width: 6px; height: 206px; background: green;"></div>
    <div style="position: absolute; top: 47px; left: 97px; width: 106px; height: 6px; background: green;"></div>
    <div style="position: absolute; top: 247px; left: 97px; width: 106px; height: 6px; background: green;"></div>
</div>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let image = document.createElement("img");
image.addEventListener("load", function() {
    context.drawImage(image, 0, 0, 300, 300);
    if (window.testRunner)
        testRunner.notifyDone();
});
image.src = "resources/mask.svg";
</script>
</body>
</html>
