mirror of
https://github.com/servo/servo.git
synced 2025-06-28 11:03:39 +01:00
95 lines
2.3 KiB
HTML
95 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>ScrollTimeline constructor</title>
|
|
<link rel="help" href="https://wicg.github.io/scroll-animations/#scrolltimeline-interface">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<style>
|
|
.scroller {
|
|
height: 100px;
|
|
width: 100px;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.content {
|
|
height: 500px;
|
|
width: 500px;
|
|
}
|
|
</style>
|
|
|
|
<div class="scroller">
|
|
<div class="content"></div>
|
|
</div>
|
|
|
|
<script>
|
|
'use strict';
|
|
|
|
function formatOffset(v) {
|
|
if (typeof(v) == 'object')
|
|
return `${v.constructor.name}(${v.toString()})`;
|
|
return `'${v.toString()}'`;
|
|
}
|
|
|
|
function assert_offsets_equal(a, b) {
|
|
assert_equals(formatOffset(a), formatOffset(b));
|
|
}
|
|
|
|
// source
|
|
|
|
test(t => {
|
|
const scroller = document.querySelector('.scroller');
|
|
assert_equals(
|
|
new ScrollTimeline({source: scroller}).source, scroller);
|
|
}, 'A ScrollTimeline can be created with a source');
|
|
|
|
test(t => {
|
|
const div = document.createElement('div');
|
|
assert_equals(new ScrollTimeline({source: div}).source, div);
|
|
}, 'A ScrollTimeline can be created with a non-scrolling source');
|
|
|
|
test(t => {
|
|
assert_equals(new ScrollTimeline({source: null}).source, null);
|
|
}, 'A ScrollTimeline created with a null source should have no source');
|
|
|
|
test(t => {
|
|
assert_equals(new ScrollTimeline().source, document.scrollingElement);
|
|
}, 'A ScrollTimeline created without a source should use the ' +
|
|
'document.scrollingElement');
|
|
|
|
// axis
|
|
|
|
test(t => {
|
|
assert_equals(new ScrollTimeline().axis, 'block');
|
|
}, 'A ScrollTimeline created with the default axis should default to ' +
|
|
`'block'`);
|
|
|
|
const gValidAxisValues = [
|
|
'block',
|
|
'inline',
|
|
'x',
|
|
'y',
|
|
];
|
|
|
|
for (let axis of gValidAxisValues) {
|
|
test(function() {
|
|
const scrollTimeline =
|
|
new ScrollTimeline({axis: axis});
|
|
assert_equals(scrollTimeline.axis, axis);
|
|
}, `'${axis}' is a valid axis value`);
|
|
}
|
|
|
|
test(t => {
|
|
let constructorFunc = function() {
|
|
new ScrollTimeline({axis: 'nonsense'})
|
|
};
|
|
assert_throws_js(TypeError, constructorFunc);
|
|
|
|
// 'auto' for axis was previously in the spec, but was removed. Make
|
|
// sure that implementations do not support it.
|
|
constructorFunc = function() {
|
|
new ScrollTimeline({axis: 'auto'})
|
|
};
|
|
assert_throws_js(TypeError, constructorFunc);
|
|
}, 'Creating a ScrollTimeline with an invalid axis value should throw');
|
|
</script>
|