blob: 1f85b8d4c63f73a95b0323f26819ad7bb59ee9d4 [file] [log] [blame]
<!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' ],
[ 'hidden visible', 'auto' ], // WebKit doesn't support different values of overflow on different axes.
[ 'hidden hidden', 'auto' ], // WebKit doesn't support different values of overflow on different axes, and thus only accepts a single value for overflow.
];
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', '-webkit-paged-x' ],
[ '-webkit-paged-y', 'auto', '-webkit-paged-y', '-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', 'auto',
'scroll', 'auto', ''],
[ 'auto', 'scroll',
'auto', 'scroll', 'auto',
'auto', 'scroll', ''],
[ 'visible', 'hidden',
'auto', 'hidden', 'auto',
'visible', 'hidden', ''],
[ 'overlay', 'hidden',
'auto','hidden', 'auto',
'overlay', 'hidden', ''],
[ 'visible', '-webkit-paged-y',
'auto', '-webkit-paged-y', '-webkit-paged-y',
'visible', '-webkit-paged-y', ''],
[ 'auto', '-webkit-paged-x',
'auto', '-webkit-paged-x', '-webkit-paged-x',
'auto', '-webkit-paged-x', ''],
[ '-webkit-paged-x', '-webkit-paged-x',
'auto', '-webkit-paged-x', '-webkit-paged-x',
'auto', '-webkit-paged-x', ''],
[ '-webkit-paged-y', '-webkit-paged-x',
'auto', '-webkit-paged-x', '-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>