Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<style>
.container {
font-size: 0;
height: 30px;
width: 180px;
}
.fragment,
.item,
.stack {
display: inline-block;
vertical-align: top;
}
.fragment {
height: 30px;
width: 60px;
}
.stack > .item {
display: block;
}
.first { background: #20b2aa; }
.parent { background: #87cefa; }
.packed-1 { background: #ffd700; }
.packed-2 { background: #ff8c00; }
</style>
<p>Test passes if the two rectangles are identical.</p>
<div class="container">
<div class="fragment">
<div class="item" style="width: 4px; height: 30px;"></div>
<div class="item parent" style="width: 56px; height: 30px;"></div>
</div>
<div class="fragment">
<div class="item" style="width: 4px; height: 30px;"></div>
<div class="stack" style="width: 28px; height: 30px;">
<div class="item packed-2" style="width: 28px; height: 25px;"></div>
<div class="item packed-1" style="width: 28px; height: 5px;"></div>
</div>
<div class="item first" style="width: 28px; height: 30px;"></div>
</div>
<div class="fragment">
<div class="item" style="width: 4px; height: 30px;"></div>
<div class="item packed-1" style="width: 28px; height: 30px;"></div>
<div class="item first" style="width: 28px; height: 30px;"></div>
</div>
</div>