blob: 7e30e6e1004ac506e5ab1fda0667bed5b52e50dd [file] [log] [blame]
<!DOCTYPE html>
<style>
.container {
width: 100px;
height: 100px;
/* We have red in the expected results because a small amount seeps through
the rounded corner in the test, so without putting red underneath the
green, there is a very small difference in the test and the expected
result.*/
background-color: red;
display: inline-block;
}
.clip {
width: 100px;
height: 100px;
background-color: green;
}
.check-top-left {
border-radius: 50px 0 0 0;
}
.check-top-right {
border-radius: 0 50px 0 0;
}
.check-bottom-right {
border-radius: 0 0 50px 0;
}
.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 check-top-left"></div></div>
<div class="container check-top-right"><div class="clip check-top-right"></div></div>
<br/>
<div class="container check-bottom-left"><div class="clip check-bottom-left"></div></div>
<div class="container check-bottom-right"><div class="clip check-bottom-right"></div></div>
</body>