blob: 1823139f5102eb76709d5e75cb8709ddc0286cdd [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src='../../resources/js-test-pre.js'></script>
<script>
description('Percentage margins on absolutely positioned elements are relative to the container\'s logical width');
function testMargins(outerProperties, innerProperties, expectedProperties) {
var outer = document.createElement('div'),
inner = document.createElement('div'),
property, style;
for (property in outerProperties)
outer.style.setProperty(property, outerProperties[property]);
for (property in innerProperties)
inner.style.setProperty(property, innerProperties[property]);
outer.appendChild(inner);
document.body.appendChild(outer);
style = getComputedStyle(inner);
for (property in expectedProperties)
shouldBe('"' + style.getPropertyValue(property) + '"', '"' + expectedProperties[property] + '"');
document.body.removeChild(outer);
}
var WritingModes = {
'HORIZONTAL-TB': 'horizontal-tb',
'VERTICAL-LR': 'vertical-lr',
'VERTICAL-RL': 'vertical-rl'
}
var outerProperties = {
position: 'relative',
width: '100px',
height: '200px',
}, innerProperties = {
position: 'absolute',
width: '40px',
height: '160px',
}, expectedProperties = {
margin: '10px 20px 30px 40px'
};
window.onload = function() {
for (var outerProperty in WritingModes) {
for (var innerProperty in WritingModes) {
outerProperties['-webkit-writing-mode'] = WritingModes[outerProperty];
innerProperties['-webkit-writing-mode'] = WritingModes[innerProperty];
innerProperties['margin'] = outerProperty === 'HORIZONTAL-TB' ? '10% 20% 30% 40%' : '5% 10% 15% 20%';
testMargins(outerProperties, innerProperties, expectedProperties);
}
}
}
</script>
<script src='../../resources/js-test-post.js'></script>
</body>
</html>