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