Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/motion/animation/offset-path-coord-box-interpolation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Motion Path: offset-path coord-box interpolation with allow-discrete</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
// Same shape(), different coord-box: should switch discretely at 0.5 (no interpolation of shape params)
test_interpolation({
property: 'offset-path',
behavior: 'allow-discrete',
from: 'shape(from 0px 0px, line to 10px 10px) border-box',
to: 'shape(from 1px 1px, line to 20px 20px) content-box',
}, [
{ at: -0.1, expect: 'shape(from 0px 0px, line to 10px 10px)' },
{ at: 0, expect: 'shape(from 0px 0px, line to 10px 10px)' },
{ at: 0.4, expect: 'shape(from 0px 0px, line to 10px 10px)' },
{ at: 0.5, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
{ at: 1, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
{ at: 1.5, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
]);
// Omitted coord-box defaults to border-box.
test_interpolation({
property: 'offset-path',
behavior: 'allow-discrete',
from: 'shape(from 0px 0px, line to 10px 10px)', // defaults to border-box
to: 'shape(from 0px 0px, line to 20px 20px) padding-box',
}, [
{ at: -0.1, expect: 'shape(from 0px 0px, line to 10px 10px)' },
{ at: 0, expect: 'shape(from 0px 0px, line to 10px 10px)' },
{ at: 0.4, expect: 'shape(from 0px 0px, line to 10px 10px)' },
{ at: 0.5, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
{ at: 1, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
{ at: 1.5, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
]);
// Same shape(), same coord-box.
test_interpolation({
property: 'offset-path',
behavior: 'allow-discrete',
from: 'shape(from 0px 0px, line to 10px 10px) view-box',
to: 'shape(from 10px 10px, line to 20px 20px) view-box',
}, [
{ at: -0.1, expect: 'shape(from -1px -1px, line to 9px 9px) view-box' },
{ at: 0, expect: 'shape(from 0px 0px, line to 10px 10px) view-box' },
{ at: 0.4, expect: 'shape(from 4px 4px, line to 14px 14px) view-box' },
{ at: 0.5, expect: 'shape(from 5px 5px, line to 15px 15px) view-box' },
{ at: 1, expect: 'shape(from 10px 10px, line to 20px 20px) view-box' },
{ at: 1.5, expect: 'shape(from 15px 15px, line to 25px 25px) view-box' },
]);
// circle(), different coord-box should switch discretely.
test_interpolation({
property: 'offset-path',
behavior: 'allow-discrete',
from: 'circle(10px) border-box',
to: 'circle(30px) content-box',
}, [
{ at: -0.1, expect: 'circle(10px)' },
{ at: 0, expect: 'circle(10px)' },
{ at: 0.4, expect: 'circle(10px)' },
{ at: 0.5, expect: 'circle(30px) content-box' },
{ at: 1, expect: 'circle(30px) content-box' },
{ at: 1.5, expect: 'circle(30px) content-box' },
]);
// circle(), omitted coord-box defaults to border-box.
test_interpolation({
property: 'offset-path',
behavior: 'allow-discrete',
from: 'circle(20px)',
to: 'circle(20px) padding-box',
}, [
{ at: -0.1, expect: 'circle(20px)' },
{ at: 0, expect: 'circle(20px)' },
{ at: 0.4, expect: 'circle(20px)' },
{ at: 0.5, expect: 'circle(20px) padding-box' },
{ at: 1, expect: 'circle(20px) padding-box' },
{ at: 1.5, expect: 'circle(20px) padding-box' },
]);
// circle(), same coord-box should interpolate radius smoothly.
test_interpolation({
property: 'offset-path',
behavior: 'allow-discrete',
from: 'circle(10px) view-box',
to: 'circle(30px) view-box',
}, [
{ at: -0.1, expect: 'circle(8px) view-box' },
{ at: 0, expect: 'circle(10px) view-box' },
{ at: 0.4, expect: 'circle(18px) view-box' },
{ at: 0.5, expect: 'circle(20px) view-box' },
{ at: 1, expect: 'circle(30px) view-box' },
{ at: 1.5, expect: 'circle(40px) view-box' },
]);
</script>
</body>