Percent margins test

by jlgrall

HTML

<div id="container">
    <div id="test_result" class="result"></div>
    <div id="correct_result" class="result"></div>
</div>
<!-- End of the test -->

<p class="test_descr">(Top and left margins of the square should be the same size. If you see a <span style="color:red;">red square</span>, then it is at the wrong position: it should be behind the black square.)</p>

<div class="clear"></div>

<p>Your browser is
<script type="text/javascript">
// Incorrect margin-top is: 100px * 0.2 = 20px
var nonCompliant = document.getElementById('test_result').offsetTop === 20,
    color = nonCompliant ? 'red' : 'green',
    text = nonCompliant ? 'non compliant' : 'compliant',
    text = '<span style="color:' + color + ';">' + text + '</span>';
document.write(text);
</script>
with the standards.</p>

<p>Top, bottom, left and right margins, when expressed in percentages, should be relative to the parent's width.<br>
See: <a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">http://www.w3.org/TR/CSS21/box.html#margin-properties</a></p>

<p>It is not the case in these browsers (list updated when I find other browsers):<br>
- Safari 5
</p>

<p>You can test this by comparing the result in various browsers.<br>
Here is the link: <a href="http://jsfiddle.net/jlgrall/yRAAN/#base">http://jsfiddle.net/jlgrall/yRAAN/#base</a></p>

<p>(I tested, it works well in Firefox 3.6+ and Opera 11)</p>

CSS

#container {
    width: 300px;
    height: 100px;
    position: relative;
    background: darkgrey;
}

.result {
    width: 20px;
    height: 20px;
    position: absolute;
}

#test_result {
    margin: 20%;  /* Should be relative to the parent's width */
    background: red;
}

#correct_result {
    margin: 60px; /* 300px * 0.2 = 60px */
    background: black;
}

/* End of the test */

/* Following is to make the test look pretty */

#container { float: left; margin-right: 8px; }
.test_descr { margin-top: 0; }
.clear { clear: both; }
p { margin-top: 1em; }