53 lines
1.1 KiB
HTML
53 lines
1.1 KiB
HTML
<!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> |