<!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>
    if (window.testRunner)
        testRunner.waitUntilDone();

    function init()
    {
        var totalCount = document.getElementsByTagName('video').length;
        var count = totalCount;
        document.addEventListener("canplaythrough", function () {
            if (!--count && window.testRunner) {
                setTimeout(function() {
                    testRunner.notifyDone();
                }, totalCount * 150);
            }
        }, true);

        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);

        setSrcByTagName("video", findMediaFile("video", "../../media/content/counting"));
    }
</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>