| <!DOCTYPE html> |
| <style> |
| .container { |
| width: 400px; |
| height: 100px; |
| background: #DDD; |
| position: relative; |
| } |
| |
| .item { |
| width: 100px; |
| height: 100px; |
| background: #09F; |
| left: 10%; |
| position: absolute; |
| } |
| </style> |
| <script src="../../../resources/js-test.js"></script> |
| <div class="container"> |
| <div class="item"> |
| </div> |
| </div> |
| <script> |
| description("Blue item box is 10% left in container. Box should display 40px as getComputedStyle( item ).left should return 40px (400px * 10%)"); |
| var item = document.querySelector('.item'); |
| var computedStyle = window.getComputedStyle(item); |
| shouldBe("computedStyle.getPropertyValue('left')", "'40px'"); |
| </script> |
