97 lines
3.9 KiB
HTML
97 lines
3.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
div { display: inline-block; }
|
|
p { width: 200px; height: 120px; margin: 0px; }
|
|
#simple-all { margin: calc(13px + 12px); }
|
|
#simple-left { margin-left: calc(13px + 12px); }
|
|
#simple-right { margin-right: calc(13px + 12px); }
|
|
#simple-top { margin-top: calc(13px + 12px); }
|
|
#simple-bottom { margin-bottom: calc(13px + 12px); }
|
|
#percent-all { margin: calc(10% - 5px); }
|
|
#percent-left { margin-left: calc(10% - 5px); }
|
|
#percent-right { margin-right: calc(10% - 5px); }
|
|
#percent-top { margin-top: calc(10% - 5px); }
|
|
#percent-bottom { margin-bottom: calc(10% - 5px); }
|
|
</style>
|
|
|
|
<div id="test-container">
|
|
<p id="simple-all">This element should have an overall margin of 25 pixels.</p><br/>
|
|
<p id="simple-left">This element should have a left margin of 25 pixels.</p><br/>
|
|
<p id="simple-right">This element should have a right margin of 25 pixels.</p><br/>
|
|
<p id="simple-top">This element should have a top margin of 25 pixels.</p><br/>
|
|
<p id="simple-bottom">This element should have a bottom margin of 25 pixels.</p><br/>
|
|
<div id="wrapper" style="width: 300px; background-color: cornsilk; display: block;">
|
|
<p id="percent-all">This element should have an overall margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
|
|
<p id="percent-left">This element should have a left margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
|
|
<p id="percent-right">This element should have a right margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
|
|
<p id="percent-top">This element should have a top margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
|
|
<p id="percent-bottom">This element should have a bottom margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
function computedMarginLeft(id)
|
|
{
|
|
return getComputedStyle(document.getElementById(id), null).marginLeft;
|
|
}
|
|
function computedMarginRight(id)
|
|
{
|
|
return getComputedStyle(document.getElementById(id), null).marginRight;
|
|
}
|
|
function computedMarginTop(id)
|
|
{
|
|
return getComputedStyle(document.getElementById(id), null).marginTop;
|
|
}
|
|
function computedMarginBottom(id)
|
|
{
|
|
return getComputedStyle(document.getElementById(id), null).marginBottom;
|
|
}
|
|
|
|
var innerWidth = 200;
|
|
var innerHeight = 120;
|
|
var margin = "25px";
|
|
var noMargin = "0px";
|
|
|
|
var tests = document.getElementsByTagName("p");
|
|
for (var i = 0; i < tests.length; ++i) {
|
|
var innerElement = tests[i]
|
|
var expectedLeft = noMargin;
|
|
var expectedTop = noMargin;
|
|
var expectedRight = noMargin;
|
|
var expectedBottom = noMargin;
|
|
switch (innerElement.id.split("-")[1]) {
|
|
case "all":
|
|
expectedLeft = margin;
|
|
expectedTop = margin;
|
|
expectedRight = margin;
|
|
expectedBottom = margin;
|
|
break;
|
|
case "top":
|
|
expectedTop = margin;
|
|
break;
|
|
case "bottom":
|
|
expectedBottom = margin;
|
|
break;
|
|
case "left":
|
|
expectedLeft = margin;
|
|
break;
|
|
case "right":
|
|
expectedRight = margin;
|
|
break;
|
|
}
|
|
|
|
shouldBeEqualToString('computedMarginLeft("' + innerElement.id + '")', expectedLeft);
|
|
shouldBeEqualToString('computedMarginTop("' + innerElement.id + '")', expectedTop);
|
|
shouldBeEqualToString('computedMarginRight("' + innerElement.id + '")', expectedRight);
|
|
shouldBeEqualToString('computedMarginBottom("' + innerElement.id + '")', expectedBottom);
|
|
}
|
|
|
|
if (window.testRunner) {
|
|
var testContainer = document.getElementById("test-container");
|
|
if (testContainer)
|
|
document.body.removeChild(testContainer);
|
|
}
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|