<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<script>

description("Test computed style on the overflow property.")

var testContainer = document.createElement("div");
testContainer.contentEditable = true;
document.body.appendChild(testContainer);

testContainer.innerHTML = '<div id="test">hello</div>';

e = document.getElementById('test');
computedStyle = window.getComputedStyle(e, null);

debug('Shorthand tests');

const tests = [
    // value, expected
    [ 'scroll', 'scroll'],
    [ 'auto', 'auto' ],
    [ 'visible', 'visible' ],
    [ 'hidden', 'hidden' ],
    [ 'overlay', 'auto' ],
];

for (let test of tests) {
    e.style.overflow = 'auto';
    e.style.overflow = test[0];
    debug('');
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[1]);
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[1]);
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[1]);
}

debug('');
debug('Paged tests');

const pagedTests = [
    // shorthand, expected-x, expected-y, expected-shorthand
    [ '-webkit-paged-x', 'auto', '-webkit-paged-x', 'auto -webkit-paged-x' ],
    [ '-webkit-paged-y', 'auto', '-webkit-paged-y', 'auto -webkit-paged-y' ],
];

for (let test of pagedTests) {
    e.style.overflow = 'auto';
    e.style.overflow = test[0];
    debug('');
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[1]);
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[2]);
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[3]);
}

debug('');
debug('Longhand tests');

const longhandTests = [
    // x-value, y-value, computed-x-expected, computed-y-expected, computed-shorthand-expected, inline-x-expected, inline-y-expected, inline-shorthand-expected
    [ 'scroll', 'scroll',
        'scroll', 'scroll', 'scroll',
        'scroll', 'scroll', 'scroll'],

    [ 'scroll', 'auto',
        'scroll', 'auto', 'scroll auto',
        'scroll', 'auto', 'scroll auto'],

    [ 'auto', 'scroll',
        'auto', 'scroll', 'auto scroll',
        'auto', 'scroll', 'auto scroll'],

    [ 'visible', 'hidden',
        'auto', 'hidden', 'auto hidden',
        'visible', 'hidden', 'visible hidden'],

    [ 'overlay', 'hidden',
        'auto', 'hidden', 'auto hidden',
        'overlay', 'hidden', 'overlay hidden'],

    [ 'visible', '-webkit-paged-y',
        'auto', '-webkit-paged-y', 'auto -webkit-paged-y',
        'visible', '-webkit-paged-y', 'visible -webkit-paged-y'],

    [ 'auto', '-webkit-paged-x',
        'auto', '-webkit-paged-x', 'auto -webkit-paged-x',
        'auto', '-webkit-paged-x', 'auto -webkit-paged-x'],

    [ '-webkit-paged-x', '-webkit-paged-x',
        'auto', '-webkit-paged-x', 'auto -webkit-paged-x',
        'auto', '-webkit-paged-x', 'auto -webkit-paged-x'],

    [ '-webkit-paged-y', '-webkit-paged-x',
        'auto', '-webkit-paged-x', 'auto -webkit-paged-x',
        'auto', '-webkit-paged-x', 'auto -webkit-paged-x'],
];

for (let test of longhandTests) {
    e.style.overflow = 'auto';
    e.style.overflowX = test[0];
    e.style.overflowY = test[1];
    debug('');
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow-x')", test[2]);
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow-y')", test[3]);
    shouldBeEqualToString("computedStyle.getPropertyValue('overflow')", test[4]);

    shouldBeEqualToString("e.style.overflowX", test[5]);
    shouldBeEqualToString("e.style.overflowY", test[6]);
    shouldBeEqualToString("e.style.overflow", test[7]);
}

document.body.removeChild(testContainer);

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>