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