blob: 07a166c1360a43342ac8b5821b90438d50856e3d [file] [log] [blame]
<!DOCTYPE html>
<meta name="fuzzy" content="maxDifference=0-45; totalPixels=0-198" />
<style>
.container {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.clip {
width: 100px;
height: 100px;
background-color: green;
}
.test-top-left {
-webkit-clip-path: inset(0 round 50px 0 0 0);
}
.check-top-left {
border-radius: 50px 0 0 0;
}
.test-top-right {
-webkit-clip-path: inset(0 round 0 50px 0 0);
}
.check-top-right {
border-radius: 0 50px 0 0;
}
.test-bottom-right {
-webkit-clip-path: inset(0 round 0 0 50px 0);
}
.check-bottom-right {
border-radius: 0 0 50px 0;
}
.test-bottom-left {
-webkit-clip-path: inset(0 round 0 0 0 50px);
}
.check-bottom-left {
border-radius: 0 0 0 50px;
}
</style>
<body>
<p>You should see 4 green squares each with one rounded corner. You should not see any red.</p>
<div class="container check-top-left"><div class="clip test-top-left"></div></div>
<div class="container check-top-right"><div class="clip test-top-right"></div></div>
<br/>
<div class="container check-bottom-left"><div class="clip test-bottom-left"></div></div>
<div class="container check-bottom-right"><div class="clip test-bottom-right"></div></div>
</body>