| <head> |
| <title></title> |
| <style> |
| button { border-color: yellow; outline: 2px dashed; padding: 10px; width: 100px; height: 50px; -webkit-appearance: none; } |
| div.block { outline: 2px dotted blue; border: 2px solid purple; width: 70px; height: 200px; background: teal; } |
| div.float { float: right; height: 100px; width: 20px; background: darkgreen; } |
| </style> |
| </head> |
| <body> |
| <p> |
| Tests that buttons clip their contents. |
| </p> |
| <p> |
| Each button below should have a yellow border and a black dashed outline. |
| Contents should not overflow the yellow border. |
| </p> |
| <p> |
| <button> |
| <div class="block"> |
| <div class="float"></div> |
| short words only please |
| </div> |
| </button> |
| </p> |
| <button style="display: block;"> |
| <div class="block"> |
| <div class="float"></div> |
| short words only please |
| </div> |
| </button> |
| <p> |
| <button style="position: absolute;"> |
| <div class="block"> |
| <div class="float"></div> |
| short words only please |
| </div> |
| </button> |
| </p> |
| </body> |
