<!DOCTYPE html>
<html>
<head>
    <style>
         object {
            border: 2px dashed maroon;
            padding: 3px;
        }

        .object1 {
            height: auto;
            width: auto;
        }

        .object2 {
            height: 220px;
            width: 220px;
        }

        .object3 {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: auto;
            width: auto;
        }

        .object4 {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 220px;
            width: 220px;
        }
    </style>
</head>
<body>
    <!-- All objects in the first row need to look identical -->
    <object class="object1" data="../as-image/resources/circle-default-default.svg"></object>
    <object class="object2" data="../as-image/resources/circle-default-default.svg"></object>
    <object class="object3" data="../as-image/resources/circle-default-default.svg"></object>
    <br/>

    <!-- Part of this object is clipped, because of the different box sizing strategy, matches Opera/FF -->
    <object class="object4" data="../as-image/resources/circle-default-default.svg"></object>
</body>
</html>