blob: d99b39fdb40ef751f93f33bf4f0ca1a75e939745 [file] [log] [blame]
<!DOCTYPE html>
.container { width: 249px; margin: 0 auto; }
.child { width: 30%; margin-right: 5%; margin-bottom: 10px; background: black; float: left; color: white; }
.child.last { margin-right: 0; }
<script src="../../resources/js-test.js"></script>
<p>The three boxes below should all appear on the same line.</p>
<div class="container">
<div class="child">&nbsp;</div>
<div class="child">&nbsp;</div>
<div class="child last">&nbsp;</div>
var children = document.getElementsByClassName('child');
var firstChildTop = children[0].getBoundingClientRect().top;
var lastChildTop = children[2].getBoundingClientRect().top;
if (firstChildTop == lastChildTop)
testPassed('All boxes are on the same line.');
shouldBe('children[0].getBoundingClientRect().top', "children[2].getBoundingClientRect().top");