<!-- webkit-test-runner [ LayoutFormattingContextEnabled=true LayoutFormattingContextIntegrationEnabled=false ] -->
<style>
.container {
	border: 3px solid green;
	padding: 10px;
    height: 30px;
    width: 30px;
    position: relative;
}

div div {
	background: blue;
    position: absolute;
}
</style>
<div class=container>
    <div style="top: 2px; width: 10px; height: 10px"></div>
</div>
<div class=container>
    <div style="bottom: 2px; width: 10px; height: 10px"></div>
</div>
<div class=container>
    <div style="top: 2px; bottom: 2px; width: 10px;"></div>
</div>
<div class=container>
    <div style="left: 2px; width: 10px; height: 10px"></div>
</div>
<div class=container>
    <div style="right: 2px; width: 10px; height: 10px"></div>
</div>
<div class=container>
    <div style="left: 2px; right: 2px; height: 10px;"></div>
</div>
<div class=container>
    <div style="top: 2px; left: 2px; right: 2px; bottom: 2px;"></div>
</div>