| <html> |
| <head> |
| <title>Testing Background clip values</title> |
| <style type="text/css"> |
| div { |
| display:inline-block; |
| border: 10px solid rgba(128, 64, 64, 0.4); |
| border-radius: 10px 30px; |
| background-color:green; |
| width: 100px; |
| height: 100px; |
| padding: 10px; |
| margin: 10px; |
| } |
| |
| .content-box { |
| background-clip: content-box; |
| } |
| .padding-box { |
| background-clip: padding-box; |
| } |
| .border-box { |
| background-clip: border-box; |
| } |
| |
| .tl { |
| border-top-left-radius: 500px; |
| } |
| |
| .tr { |
| border-top-right-radius: 500px; |
| } |
| |
| .bl { |
| border-bottom-left-radius: 500px; |
| } |
| |
| .br { |
| border-bottom-right-radius: 500px; |
| } |
| |
| .bigradii { |
| border-top-left-radius: 130px 50px; |
| border-bottom-left-radius: 50px 50px; |
| border-top-right-radius: 10px 50px; |
| border-bottom-right-radius: 50px 50px; |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(true); |
| </script> |
| </head> |
| <body> |
| <div class="content-box"></div> |
| <div class="padding-box"></div> |
| <div class="content-box tl br"></div> |
| <div class="padding-box tl br"></div> |
| <br> |
| <div class="content-box tr bl"></div> |
| <div class="padding-box tr bl"></div> |
| <div class="content-box tl"></div> |
| <div class="padding-box br"></div> |
| <br> |
| <div class="content-box tr"></div> |
| <div class="padding-box bl"></div> |
| <div class="content-box bigradii"></div> |
| <div class="padding-box bigradii"></div> |
| </body> |
| </html> |
