<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 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>
Codebase Browser
chromium