40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<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>
|