<!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>