Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /web-animations/animation-model/animation-types/scrollbar-interpolation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollbar interpolation</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
</head>
<style type="text/css">
#container {
height: 100px;
width: 100px;
overflow: scroll;
}
#contents {
height: 200px;
width: 200px;
}
</style>
<body>
<div id="container">
<div id="contents"></div>
</div>
</body>
<!-- Extend coverage in interpolation-per-property-002 to include testing
if named and system colors
-->
<script type="text/javascript">
function interpolate(keyframes, property) {
const anim = container.animate(keyframes, {
duration: 1000,
easing: 'linear'
});
anim.pause();
anim.currentTime = 500;
const result = getComputedStyle(container)[property];
anim.cancel();
return result;
}
function test_scrollbar_interpolation(from, to) {
let fromKeyframe =`${from.thumb} ${from.track}`;
let toKeyframe = `${to.thumb} ${to.track}`;
let keyframes = { scrollbarColor: [ fromKeyframe, toKeyframe ] };
const scrollbarColors = interpolate(keyframes, 'scrollbarColor');
// As the colors may be system dependent, we use the container as a
// color swatch and resolve the color blend via background-color.
// The scrollbar colors are expected to match the blend on the thumb
// and track colors respectively.
keyframes = {
backgroundColor: [`${from.thumb}`, `${to.thumb}` ]
}
const expectedThumbColor = interpolate(keyframes, 'backgroundColor');
keyframes = {
backgroundColor: [ `${from.track}`, `${to.track}` ]
}
const expectedTrackColor = interpolate(keyframes, 'backgroundColor');
assert_equals(scrollbarColors,
`${expectedThumbColor} ${expectedTrackColor}`,
`${fromKeyframe} to ${toKeyframe}`);
}
test(() => {
const data = [
{
from: { thumb: 'black', track: 'white' },
to: { thumb: 'lime', track: 'darkgreen' }
},
{
from: { thumb: '#000', track: 'pink' },
to: { thumb: 'canvas', track: 'buttontext' }
},
{
from: { thumb: 'rgba(255,255,255,0)', track: 'rgba(128,128,128,0)'},
to: { thumb: 'rgba(255,255,255,1)', track: 'rgba(128,128,128,1)'}
},
{
from: { thumb: 'transparent', track: 'transparent' },
to: { thumb: 'rgba(255,255,255,1)', track: 'rgba(128,128,128,1)'}
}
];
data.forEach((test) => {
test_scrollbar_interpolation(test.from, test.to);
});
}, 'Verify scrollbar-color-interpolation');
</script>
</html>