percentage-margins-absolute.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src='../../resources/js-test.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>
</body>
</html>
chromium/third_party/blink/web_tests/fast/writing-mode/percentage-margins-absolute.html
