<!DOCTYPE html>
<html>
<head>
<style>
    .wrapper {
        position: absolute;
        clip: rect(0, 20px, 50px, 0);
        background-color: gray;
        width: 300px;
        height: 250px;
        margin: 5px;
        border: 1px solid black;
        -webkit-box-reflect: right 10px;
    }
    
    .wrapper.non-uniform {
        clip: rect(0, 50px, 20px, 0);
    }

    video {
        position: absolute;
        top: 1px; /* inset slightly to avoid antialiasing diffs */
        left: 1px;
        width: 298px;
        height: 248px;
        border-radius: 50%;
        box-sizing: border-box;
    }
    
    .wrapper > * {
        border-radius: 50%;
    }

    .non-uniform.wrapper > * {
        border-radius: 50%;
        border-top-left-radius: 300px 100px;
        border-bottom-right-radius: 250px 10px;
    }
    
    .obscurer { /* This should cover the video */
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: green;
    }
</style>
<script src="../../media/media-file.js"></script>
<script src="../../media/utilities.js"></script>
<script>
    if (window.testRunner)
        testRunner.waitUntilDone();

    async function init()
    {
        document.addEventListener("error", function (event) {
            console.log("Video " + event.target.getAttribute("name") + " failed to load, error " + event.target.error.code);
            if (window.testRunner)
                testRunner.notifyDone();
        }, true);

        var promises = [];
        Array.from(document.getElementsByTagName('video')).forEach(video => promises.push(waitForVideoFrame(video)));

        setSrcByTagName("video", findMediaFile("video", "../../media/content/counting"));

        await Promise.all(promises);

        if (window.testRunner)
            testRunner.notifyDone();
    }
</script>

</head>
<body onload="init();">
    
    <div class="wrapper">
        <video name="1"></video>
        <div class="obscurer"></div>
    </div>

    <div class="wrapper non-uniform" style="top: 100px;">
        <video name="2"></video>
        <div class="obscurer"></div>
    </div>
</body>
</html>