<!DOCTYPE HTML>
<style>
p {
width:200px; height:120px;
}
.simple-all {
border: calc(13px + 12px) solid;
}
.simple-left {
border-left: calc(13px + 12px) solid;
}
.simple-right {
border-right: calc(13px + 12px) solid;
}
.simple-top {
border-top: calc(13px + 12px) solid;
}
.simple-bottom {
border-bottom: calc(13px + 12px) solid;
}
</style>
<p class="simple-all">This element should have an overall border of 25 pixels.</p>
<p class="simple-left">This element should have a left border of 25 pixels.</p>
<p class="simple-right">This element should have a right border of 25 pixels.</p>
<p class="simple-top">This element should have a top border of 25 pixels.</p>
<p class="simple-bottom">This element should have a bottom border of 25 pixels.</p>
<script>
if (window.testRunner)
testRunner.dumpAsText();
var innerWidth = 200;
var innerHeight = 120;
var border = 25;
var tests = document.getElementsByTagName("p");
for (var i = 0; i < tests.length; ++i) {
var element = tests[i];
var width = element.offsetWidth;
var height = element.offsetHeight;
var expectedWidth = innerWidth;
var expectedHeight = innerHeight;
switch (element.className.split("-")[1]) {
case "all":
expectedWidth += 2 * border;
expectedHeight += 2 * border;
break;
case "top":
case "bottom":
expectedHeight += border;
break;
case "left":
case "right":
expectedWidth += border;
break;
}
var error = [];
if (width != expectedWidth)
error.push("wrong width");
if (height != expectedHeight)
error.push("wrong height");
results = document.getElementById("results");
if (error == "") {
element.style.backgroundColor = "green";
element.innerHTML += " => PASS";
} else {
element.style.backgroundColor = "red";
element.innerHTML += " => FAIL: " + error.join(", ");
}
}
</script>