blob: 67dd9ec02f84391d113cbb78fe17b0a36659d823 [file] [log] [blame]
<!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>