56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!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>
|