| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .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; } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <p>The three boxes below should all appear on the same line.</p> |
| <div class="container"> |
| <div class="child"> </div> |
| <div class="child"> </div> |
| <div class="child last"> </div> |
| </div> |
| <script> |
| 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.'); |
| else |
| shouldBe('children[0].getBoundingClientRect().top', "children[2].getBoundingClientRect().top"); |
| </script> |
| </body> |
| </html> |
