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