<!DOCTYPE html>

<p>
    This test ensures that CSS outlines (e.g. focus rings) are clipped, even if there is no other visual overflow.
    There should be no visible red pixels overlapping or overflowing the green box.
</p>

<style>
    div.clip { display: inline-block; overflow: hidden; border: 2px solid green; }
    div.outline { display: inline-block; vertical-align: bottom; outline: red solid 5px; width: 100px; height:100px; }
</style>

<div class="clip"><div class="outline"></div></div>