| <!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> |
