78 lines
3.0 KiB
HTML
78 lines
3.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<style>
|
|
p { width:200px; height:120px; }
|
|
.simple-all { padding: calc(13px + 12px); }
|
|
.simple-left { padding-left: calc(13px + 12px); }
|
|
.simple-right { padding-right: calc(13px + 12px); }
|
|
.simple-top { padding-top: calc(13px + 12px); }
|
|
.simple-bottom { padding-bottom: calc(13px + 12px); }
|
|
.percent-all { padding: calc(10% - 5px); }
|
|
.percent-left { padding-left: calc(10% - 5px); }
|
|
.percent-right { padding-right: calc(10% - 5px); }
|
|
.percent-top { padding-top: calc(10% - 5px); }
|
|
.percent-bottom { padding-bottom: calc(10% - 5px); }
|
|
</style>
|
|
|
|
<p class="simple-all">This element should have an overall padding of 25 pixels.</p>
|
|
<p class="simple-left">This element should have a left padding of 25 pixels.</p>
|
|
<p class="simple-right">This element should have a right padding of 25 pixels.</p>
|
|
<p class="simple-top">This element should have a top padding of 25 pixels.</p>
|
|
<p class="simple-bottom">This element should have a bottom padding of 25 pixels.</p>
|
|
|
|
<div style="width: 300px; background-color: cornsilk;">
|
|
<p class="percent-all">This element should have an overall padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
|
|
<p class="percent-left">This element should have a left padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
|
|
<p class="percent-right">This element should have a right padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
|
|
<p class="percent-top">This element should have a top padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
|
|
<p class="percent-bottom">This element should have a bottom padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
|
|
</div>
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
var innerWidth = 200;
|
|
var innerHeight = 120;
|
|
var padding = 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 * padding;
|
|
expectedHeight += 2 * padding;
|
|
break;
|
|
case "top":
|
|
case "bottom":
|
|
expectedHeight += padding;
|
|
break;
|
|
case "left":
|
|
case "right":
|
|
expectedWidth += padding;
|
|
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>
|