fast/forms/control-clip.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>