121 lines
3.7 KiB
HTML
121 lines
3.7 KiB
HTML
<!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>
|