<!DOCTYPE html>
<html>
<head>
<style>
body {
}
nav {
position: absolute;
top: 100px;
width: 400px;
height: 40px;
border: 1px solid blue;
}
nav > ul {
float: right;
list-style: inside;
}
nav > ul > li {
float: left;
}
nav > ul > li > a {
text-decoration: none;
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
var list = document.getElementsByTagName('ul')[0];
var firstLinkTop = list.firstElementChild.getBoundingClientRect().top;
var lastLinkTop = list.lastElementChild.getBoundingClientRect().top;
if (firstLinkTop == lastLinkTop)
testPassed('Links are on the same line.');
else
shouldBe('firstLinkTop', 'lastLinkTop');
window.onload = function() {
list.style.marginRight = '-10px';
list.offsetTop;
list.style.marginRight = 'auto';
if (firstLinkTop == list.firstElementChild.getBoundingClientRect().top)
testPassed('First link didn\'t move after layout.');
else
shouldBe('list.firstElementChild.getBoundingClientRect().top', 'firstLinkTop');
if (lastLinkTop == list.lastElementChild.getBoundingClientRect().top)
testPassed('Last link didn\'t move after layout.');
else
shouldBe('list.lastElementChild.getBoundingClientRect().top', 'lastLinkTop');
if (window.testRunner)
testRunner.notifyDone();
};
</script>
</body>
</html>