Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-backgrounds/animations/border-image-width-composition.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>border-image-width composition</title>
<meta name="assert" content="border-image-width supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'border-image-width',
underlying: '1 2 3 4',
addFrom: '1 2 3 4',
addTo: '101 102 103 104',
}, [
{at: -0.25, expect: '0'}, // Non-negative.
{at: 0, expect: '2 4 6 8'},
{at: 0.25, expect: '27 29 31 33'},
{at: 0.5, expect: '52 54 56 58'},
{at: 0.75, expect: '77 79 81 83'},
{at: 1, expect: '102 104 106 108'},
{at: 1.25, expect: '127 129 131 133'},
]);
test_composition({
property: 'border-image-width',
underlying: '100 200 300 400',
addFrom: '100',
addTo: '200 300 500',
}, [
{at: -0.25, expect: '175 250 300 450'},
{at: 0, expect: '200 300 400 500'},
{at: 0.25, expect: '225 350 500 550'},
{at: 0.5, expect: '250 400 600 600'},
{at: 0.75, expect: '275 450 700 650'},
{at: 1, expect: '300 500 800 700'},
{at: 1.25, expect: '325 550 900 750'},
]);
test_composition({
property: 'border-image-width',
underlying: '1 2 3px 4%',
addFrom: '1 2 3px 4%',
addTo: '101 102 103px 104%',
}, [
{at: -0.25, expect: '0 0 0px 0%'}, // Non-negative.
{at: 0, expect: '2 4 6px 8%'},
{at: 0.25, expect: '27 29 31px 33%'},
{at: 0.5, expect: '52 54 56px 58%'},
{at: 0.75, expect: '77 79 81px 83%'},
{at: 1, expect: '102 104 106px 108%'},
{at: 1.25, expect: '127 129 131px 133%'},
]);
test_composition({
property: 'border-image-width',
underlying: '10px 20px',
addFrom: '190px 180px 290px 280px',
addTo: '90px 80px',
}, [
{at: -0.25, expect: '225px 225px 350px 350px'},
{at: 0, expect: '200px 200px 300px 300px'},
{at: 0.25, expect: '175px 175px 250px 250px'},
{at: 0.5, expect: '150px 150px 200px 200px'},
{at: 0.75, expect: '125px 125px 150px 150px'},
{at: 1, expect: '100px'},
{at: 1.25, expect: '75px 75px 50px 50px'},
]);
test_composition({
property: 'border-image-width',
underlying: '10 20px',
replaceFrom: '100 100px',
addTo: '190 180px',
}, [
{at: -0.25, expect: '75 75px'},
{at: 0, expect: '100 100px'},
{at: 0.25, expect: '125 125px'},
{at: 0.5, expect: '150 150px'},
{at: 0.75, expect: '175 175px'},
{at: 1, expect: '200 200px'},
{at: 1.25, expect: '225 225px'},
]);
test_composition({
property: 'border-image-width',
underlying: '10px 20',
addFrom: '90px 80',
replaceTo: '0px 0 0px 0',
}, [
{at: -0.25, expect: '125px 125'},
{at: 0, expect: '100px 100'},
{at: 0.25, expect: '75px 75'},
{at: 0.5, expect: '50px 50'},
{at: 0.75, expect: '25px 25'},
{at: 1, expect: '0px 0'},
{at: 1.25, expect: '0px 0'}, // Non-negative.
]);
test_composition({
property: 'border-image-width',
underlying: '10 20',
addFrom: '100px 150px',
addTo: '200px 250px',
}, [
{at: -0.25, expect: '75px 125px'},
{at: 0, expect: '100px 150px'},
{at: 0.25, expect: '125px 175px'},
{at: 0.5, expect: '150px 200px'},
{at: 0.75, expect: '175px 225px'},
{at: 1, expect: '200px 250px'},
{at: 1.25, expect: '225px 275px'},
]);
test_composition({
property: 'border-image-width',
underlying: '10 20',
addFrom: '100 150px',
addTo: '200% 250',
}, [
{at: -0.25, expect: '100 150px'},
{at: 0, expect: '100 150px'},
{at: 0.25, expect: '100 150px'},
{at: 0.5, expect: '200% 250'},
{at: 0.75, expect: '200% 250'},
{at: 1, expect: '200% 250'},
{at: 1.25, expect: '200% 250'},
]);
</script>
</body>