| <!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> |
| |
