<!DOCTYPE html>

<html>
<head>
    <style>
        .circle {
            width: 300px;
            height: 300px;
            margin-left: 100px;
            margin-top: 60px;
            background-color: #f5ad61;
            overflow: hidden;
            border-radius: 50% 50%;
        }

        .inner {
            filter: drop-shadow(16px 16px 0px black);
            background-color: red;
            height: 60px;
            width: 200px;
        }

        #clip {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 500px;
            height: 500px;
            background-color: white;
            -webkit-clip-path: url(#clipPath);
        }
    </style>
</head>

<body>
    <a href="https://bugs.webkit.org/show_bug.cgi?id=135318">Bug 135318 - This test passes if the red element has a black shadow and is clipped by the orange circle</a>

    <div class="circle">
        <div class="inner"></div>
    </div>

    <div id="clip"></div>
</body>

<svg>
    <defs>
        <clipPath id="clipPath">
            <path d="M18,38 v200 h90 a150,150 0 0,1 300,0 h50 v-200 z"
        </clipPath>
    </defs>
</svg>

</html>