Test to make sure top/bottom/left/right properly returns pixel values for any input.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


No offsets (zero width/height)

PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '200px'
PASS getComputedStyle(test).bottom is '400px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '0px'

test.setAttribute('style', 'padding: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '190px'
PASS getComputedStyle(test).bottom is '390px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '0px'

test.setAttribute('style', 'border: solid 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '190px'
PASS getComputedStyle(test).bottom is '390px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '0px'

test.setAttribute('style', 'margin: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '190px'
PASS getComputedStyle(test).bottom is '390px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '0px'
test.setAttribute('style', '')

test.parentNode.setAttribute('style', 'padding: 5px;')
PASS getComputedStyle(test).top is '5px'
PASS getComputedStyle(test).left is '5px'
PASS getComputedStyle(test).right is '205px'
PASS getComputedStyle(test).bottom is '405px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '0px'

test.parentNode.setAttribute('style', 'border: solid 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '200px'
PASS getComputedStyle(test).bottom is '400px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '0px'

test.parentNode.setAttribute('style', 'margin: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '200px'
PASS getComputedStyle(test).bottom is '400px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '0px'

No offsets (50px width/height)

test.setAttribute('style', 'width: 50px; height: 50px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '150px'
PASS getComputedStyle(test).bottom is '350px'
PASS getComputedStyle(test).width is '50px'
PASS getComputedStyle(test).height is '50px'

test.setAttribute('style', 'width: 50px; height: 50px; padding: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '140px'
PASS getComputedStyle(test).bottom is '340px'
PASS getComputedStyle(test).width is '50px'
PASS getComputedStyle(test).height is '50px'

test.setAttribute('style', 'width: 50px; height: 50px; border: solid 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '140px'
PASS getComputedStyle(test).bottom is '340px'
PASS getComputedStyle(test).width is '50px'
PASS getComputedStyle(test).height is '50px'

test.setAttribute('style', 'width: 50px; height: 50px; margin: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '140px'
PASS getComputedStyle(test).bottom is '340px'
PASS getComputedStyle(test).width is '50px'
PASS getComputedStyle(test).height is '50px'
test.removeAttribute('style', 'margin')

test.setAttribute('style', 'width: 50px; height: 50px;')

test.parentNode.setAttribute('style', 'padding: 5px;')
PASS getComputedStyle(test).top is '5px'
PASS getComputedStyle(test).left is '5px'
PASS getComputedStyle(test).right is '155px'
PASS getComputedStyle(test).bottom is '355px'
PASS getComputedStyle(test).width is '50px'
PASS getComputedStyle(test).height is '50px'

test.parentNode.setAttribute('style', 'border: solid 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '150px'
PASS getComputedStyle(test).bottom is '350px'
PASS getComputedStyle(test).width is '50px'
PASS getComputedStyle(test).height is '50px'

test.parentNode.setAttribute('style', 'margin: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '150px'
PASS getComputedStyle(test).bottom is '350px'
PASS getComputedStyle(test).width is '50px'
PASS getComputedStyle(test).height is '50px'

No offsets (100% width/height)

test.setAttribute('style', 'width: 100%; height: 100%;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '0px'
PASS getComputedStyle(test).bottom is '0px'
PASS getComputedStyle(test).width is '200px'
PASS getComputedStyle(test).height is '400px'

test.setAttribute('style', 'width: 100%; height: 100%; padding: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '-10px'
PASS getComputedStyle(test).bottom is '-10px'
PASS getComputedStyle(test).width is '200px'
PASS getComputedStyle(test).height is '400px'
test.removeAttribute('style', 'padding')

test.setAttribute('style', 'width: 100%; height: 100%; border: solid 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '-10px'
PASS getComputedStyle(test).bottom is '-10px'
PASS getComputedStyle(test).width is '200px'
PASS getComputedStyle(test).height is '400px'
test.removeAttribute('style', 'border')

test.setAttribute('style', 'width: 100%; height: 100%; margin: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '-10px'
PASS getComputedStyle(test).bottom is '-10px'
PASS getComputedStyle(test).width is '200px'
PASS getComputedStyle(test).height is '400px'
test.removeAttribute('style', 'margin')

test.setAttribute('style', 'width: 100%; height: 100%;')

test.parentNode.setAttribute('style', 'padding: 5px;')
PASS getComputedStyle(test).top is '5px'
PASS getComputedStyle(test).left is '5px'
PASS getComputedStyle(test).right is '-5px'
PASS getComputedStyle(test).bottom is '-5px'
PASS getComputedStyle(test).width is '210px'
PASS getComputedStyle(test).height is '410px'

test.parentNode.setAttribute('style', 'border: solid 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '0px'
PASS getComputedStyle(test).bottom is '0px'
PASS getComputedStyle(test).width is '200px'
PASS getComputedStyle(test).height is '400px'

test.parentNode.setAttribute('style', 'margin: 5px;')
PASS getComputedStyle(test).top is '0px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '0px'
PASS getComputedStyle(test).bottom is '0px'
PASS getComputedStyle(test).width is '200px'
PASS getComputedStyle(test).height is '400px'

% offsets (top/left)

test.setAttribute('style', 'top: 10%; left: 10%; width: 50%; height: 60%;')
PASS getComputedStyle(test).top is '40px'
PASS getComputedStyle(test).left is '20px'
PASS getComputedStyle(test).right is '80px'
PASS getComputedStyle(test).bottom is '120px'
PASS getComputedStyle(test).width is '100px'
PASS getComputedStyle(test).height is '240px'

test.parentNode.setAttribute('style', 'padding: 25px;')
PASS getComputedStyle(test).top is '45px'
PASS getComputedStyle(test).left is '25px'
PASS getComputedStyle(test).right is '100px'
PASS getComputedStyle(test).bottom is '135px'
PASS getComputedStyle(test).width is '125px'
PASS getComputedStyle(test).height is '270px'
test.parentNode.removeAttribute('style', 'padding')

test.parentNode.setAttribute('style', 'border: solid 25px;')
PASS getComputedStyle(test).top is '40px'
PASS getComputedStyle(test).left is '20px'
PASS getComputedStyle(test).right is '80px'
PASS getComputedStyle(test).bottom is '120px'
PASS getComputedStyle(test).width is '100px'
PASS getComputedStyle(test).height is '240px'
test.parentNode.removeAttribute('style', 'border')

test.parentNode.setAttribute('style', 'margin: 25px;')
PASS getComputedStyle(test).top is '40px'
PASS getComputedStyle(test).left is '20px'
PASS getComputedStyle(test).right is '80px'
PASS getComputedStyle(test).bottom is '120px'
PASS getComputedStyle(test).width is '100px'
PASS getComputedStyle(test).height is '240px'
test.parentNode.removeAttribute('style', 'margin')

% offsets (right/bottom)

test.setAttribute('style', 'right: 10%; bottom: 10%; width: 90%; height: 80%;')
PASS getComputedStyle(test).top is '40px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '20px'
PASS getComputedStyle(test).bottom is '40px'
PASS getComputedStyle(test).width is '180px'
PASS getComputedStyle(test).height is '320px'

test.parentNode.setAttribute('style', 'padding: 25px;')
PASS getComputedStyle(test).top is '45px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '25px'
PASS getComputedStyle(test).bottom is '45px'
PASS getComputedStyle(test).width is '225px'
PASS getComputedStyle(test).height is '360px'
test.parentNode.removeAttribute('style', 'padding')

test.parentNode.setAttribute('style', 'border: solid 25px;')
PASS getComputedStyle(test).top is '40px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '20px'
PASS getComputedStyle(test).bottom is '40px'
PASS getComputedStyle(test).width is '180px'
PASS getComputedStyle(test).height is '320px'
test.parentNode.removeAttribute('style', 'border')

test.parentNode.setAttribute('style', 'margin: 25px;')
PASS getComputedStyle(test).top is '40px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '20px'
PASS getComputedStyle(test).bottom is '40px'
PASS getComputedStyle(test).width is '180px'
PASS getComputedStyle(test).height is '320px'
test.parentNode.removeAttribute('style', 'margin')

em offsets

test.setAttribute('style', 'top: 1em; left: 2em; width: 3em; height: 4em;')
PASS getComputedStyle(test).top is '10px'
PASS getComputedStyle(test).left is '20px'
PASS getComputedStyle(test).right is '150px'
PASS getComputedStyle(test).bottom is '350px'
PASS getComputedStyle(test).width is '30px'
PASS getComputedStyle(test).height is '40px'

test.parentNode.setAttribute('style', 'padding: 25px;')
PASS getComputedStyle(test).top is '10px'
PASS getComputedStyle(test).left is '20px'
PASS getComputedStyle(test).right is '200px'
PASS getComputedStyle(test).bottom is '400px'
PASS getComputedStyle(test).width is '30px'
PASS getComputedStyle(test).height is '40px'

test.parentNode.setAttribute('style', 'border: solid 25px;')
PASS getComputedStyle(test).top is '10px'
PASS getComputedStyle(test).left is '20px'
PASS getComputedStyle(test).right is '150px'
PASS getComputedStyle(test).bottom is '350px'
PASS getComputedStyle(test).width is '30px'
PASS getComputedStyle(test).height is '40px'

test.parentNode.setAttribute('style', 'margin: 25px;')
PASS getComputedStyle(test).top is '10px'
PASS getComputedStyle(test).left is '20px'
PASS getComputedStyle(test).right is '150px'
PASS getComputedStyle(test).bottom is '350px'
PASS getComputedStyle(test).width is '30px'
PASS getComputedStyle(test).height is '40px'

Absolute Offsets

test.setAttribute('style', 'position: absolute; top: 30px; height: 300px;')
PASS getComputedStyle(test).top is '30px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '200px'
PASS getComputedStyle(test).bottom is '70px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '300px'

test.parentNode.setAttribute('style', 'padding: 25px;')
PASS getComputedStyle(test).top is '30px'
PASS getComputedStyle(test).left is '25px'
PASS getComputedStyle(test).right is '225px'
PASS getComputedStyle(test).bottom is '120px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '300px'

test.parentNode.setAttribute('style', 'border: solid 25px;')
PASS getComputedStyle(test).top is '30px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '200px'
PASS getComputedStyle(test).bottom is '70px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '300px'

test.parentNode.setAttribute('style', 'margin: 25px;')
PASS getComputedStyle(test).top is '30px'
PASS getComputedStyle(test).left is '0px'
PASS getComputedStyle(test).right is '200px'
PASS getComputedStyle(test).bottom is '70px'
PASS getComputedStyle(test).width is '0px'
PASS getComputedStyle(test).height is '300px'
PASS successfullyParsed is true

TEST COMPLETE