Skip to content

GitLab

T
tangled
Commit b521675a authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Commit Bot
Browse files
Options

[css-properties-values-api] Implement interpolation for custom lists. 

This adds a new CSSCustomListInterpolationType, which is to be used for
all custom property lists, regardless of their syntax.

CSSCustomListInterpolationType takes an inner CSSInterpolationType,
which handles the operations on the items inside the list.

R=flackr@chromium.org

Bug: 868959
Change-Id: I9e77e6c2332569e3cbafa492022144850b5d11db
Reviewed-on: https://chromium-review.googlesource.com/1165546
Commit-Queue: Anders Ruud <andruud@chromium.org>
Reviewed-by: default avatarRobert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#592080}
parent 3b9de277
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2806 additions and 73 deletions
third_party/WebKit/LayoutTests/animations/custom-properties/custom-angle-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--angle-list: 30deg 300deg;
}
.target {
--angle-list: 10deg 100deg;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--angle-list',
syntax: '<angle>+',
initialValue: '40deg 400deg',
inherits: false,
});
assertInterpolation({
property: '--angle-list',
from: 'initial',
to: '20deg 200deg',
}, [
{at: -0.3, is: '46deg 460deg'},
{at: 0, is: '40deg 400deg'},
{at: 0.5, is: '30deg 300deg'},
{at: 1, is: '20deg 200deg'},
{at: 1.5, is: '10deg 100deg'},
]);
assertInterpolation({
property: '--angle-list',
from: 'inherit',
to: '20deg 200deg',
}, [
{at: -0.3, is: '33deg 330deg'},
{at: 0, is: '30deg 300deg'},
{at: 0.5, is: '25deg 250deg'},
{at: 1, is: '20deg 200deg'},
{at: 1.5, is: '15deg 150deg'},
]);
assertInterpolation({
property: '--angle-list',
from: 'unset',
to: '20deg 200deg',
}, [
{at: -0.3, is: '46deg 460deg'},
{at: 0, is: '40deg 400deg'},
{at: 0.5, is: '30deg 300deg'},
{at: 1, is: '20deg 200deg'},
{at: 1.5, is: '10deg 100deg'},
]);
assertInterpolation({
property: '--angle-list',
from: '-10deg -100deg',
to: '10deg 100deg',
}, [
{at: -0.3, is: '-16deg -160deg'},
{at: 0, is: '-10deg -100deg'},
{at: 0.5, is: '0deg 0deg'},
{at: 1, is: '10deg 100deg'},
{at: 1.5, is: '20deg 200deg'}
]);
assertInterpolation({
property: '--angle-list',
from: '10deg',
to: '100deg',
}, [
{at: -0.3, is: '-17deg'},
{at: 0, is: '10deg'},
{at: 0.5, is: '55deg'},
{at: 1, is: '100deg'},
{at: 1.5, is: '145deg'}
]);
assertInterpolation({
property: '--angle-list',
from: '0deg 0grad',
to: '1turn 400grad',
}, [
{at: -0.3, is: '-108deg -108deg'},
{at: 0, is: '0deg 0deg'},
{at: 0.5, is: '180deg 180deg'},
{at: 1, is: '360deg 360deg'},
{at: 1.5, is: '540deg 540deg'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--angle-list',
from: neutralKeyframe,
to: '20deg 200deg',
}, [
{at: -0.3, is: '7deg 70deg'},
{at: 0, is: '10deg 100deg'},
{at: 0.5, is: '15deg 150deg'},
{at: 1, is: '20deg 200deg'},
{at: 1.5, is: '25deg 250deg'},
]);
assertComposition({
property: '--angle-list',
underlying: '50deg 60deg',
addFrom: '10deg 140deg',
addTo: '110deg 40deg',
}, [
{at: -0.3, is: '30deg 230deg'},
{at: 0, is: '60deg 200deg'},
{at: 0.5, is: '110deg 150deg'},
{at: 1, is: '160deg 100deg'},
{at: 1.5, is: '210deg 50deg'},
]);
assertComposition({
property: '--angle-list',
underlying: '50deg 60deg',
addFrom: '10deg 140deg',
replaceTo: '110deg 40deg',
}, [
{at: -0.3, is: '45deg 248deg'},
{at: 0, is: '60deg 200deg'},
{at: 0.5, is: '85deg 120deg'},
{at: 1, is: '110deg 40deg'},
{at: 1.5, is: '135deg -40deg'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-color-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--color-list: rgb(30, 30, 30) rgb(60, 60, 60);
}
.target {
--color-list: rgb(40, 40, 40) rgb(80, 80, 80);
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--color-list',
syntax: '<color>+',
initialValue: 'red blue',
inherits: false,
});
assertInterpolation({
property: '--color-list',
from: 'initial',
to: 'blue red',
}, [
{at: -0.3, is: 'rgb(255, 0, 0) rgb(0, 0, 255)'},
{at: 0, is: 'rgb(255, 0, 0) rgb(0, 0, 255)'},
{at: 0.5, is: 'rgb(128, 0, 128) rgb(128, 0, 128)'},
{at: 1, is: 'rgb(0, 0, 255) rgb(255, 0, 0)'},
{at: 1.5, is: 'rgb(0, 0, 255) rgb(255, 0, 0)'},
]);
assertInterpolation({
property: '--color-list',
from: 'inherit',
to: 'rgb(80, 80, 80) rgb(0, 0, 0)',
}, [
{at: -0.3, is: 'rgb(15, 15, 15) rgb(78, 78, 78)'},
{at: 0, is: 'rgb(30, 30, 30) rgb(60, 60, 60)'},
{at: 0.5, is: 'rgb(55, 55, 55) rgb(30, 30, 30)'},
{at: 1, is: 'rgb(80, 80, 80) rgb(0, 0, 0)'},
{at: 1.5, is: 'rgb(105, 105, 105) rgb(0, 0, 0)'},
]);
assertInterpolation({
property: '--color-list',
from: 'unset',
to: 'tan tomato',
}, [
{at: -0.3, is: 'rgb(255, 0, 0) rgb(0, 0, 255)'},
{at: 0, is: 'rgb(255, 0, 0) rgb(0, 0, 255)'},
{at: 0.5, is: 'rgb(233, 90, 70) rgb(128, 50, 163)'},
{at: 1, is: 'rgb(210, 180, 140) rgb(255, 99, 71)'},
{at: 1.5, is: 'rgb(188, 255, 210) rgb(255, 149, 0)'},
]);
assertInterpolation({
property: '--color-list',
from: 'hsl(120, 100%, 50%) coral',
to: 'navy hsl(240, 100%, 50%)',
}, [
{at: -0.3, is: 'rgb(0, 255, 0) rgb(255, 165, 28)'},
{at: 0, is: 'rgb(0, 255, 0) rgb(255, 127, 80)'},
{at: 0.5, is: 'rgb(0, 128, 64) rgb(128, 64, 168)'},
{at: 1, is: 'rgb(0, 0, 128) rgb(0, 0, 255)'},
{at: 1.5, is: 'rgb(0, 0, 192) rgb(0, 0, 255)'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--color-list',
from: neutralKeyframe,
to: 'rgb(0, 40, 40) black',
}, [
{at: -0.3, is: 'rgb(52, 40, 40) rgb(104, 104, 104)'},
{at: 0, is: 'rgb(40, 40, 40) rgb(80, 80, 80)'},
{at: 0.5, is: 'rgb(20, 40, 40) rgb(40, 40, 40)'},
{at: 1, is: 'rgb(0, 40, 40) rgb(0, 0, 0)'},
{at: 1.5, is: 'rgb(0, 40, 40) rgb(0, 0, 0)'},
]);
assertComposition({
property: '--color-list',
underlying: 'darkslategray rgb(10, 10, 10)',
addFrom: 'rgb(10, 10, 10) navy',
addTo: 'rgb(30, 30, 30) teal',
}, [
{at: -0.3, is: 'rgb(51, 83, 83) rgb(10, 0, 138)'},
{at: 0, is: 'rgb(57, 89, 89) rgb(10, 10, 138)'},
{at: 0.5, is: 'rgb(67, 99, 99) rgb(10, 74, 138)'},
{at: 1, is: 'rgb(77, 109, 109) rgb(10, 138, 138)'},
{at: 1.5, is: 'rgb(87, 119, 119) rgb(10, 202, 138)'},
]);
assertComposition({
property: '--color-list',
underlying: 'gold rgb(100, 100, 100)',
addFrom: 'navy rgb(0, 0, 0)',
replaceTo: 'rgb(17, 17, 17) rgb(1, 1, 1)',
}, [
{at: -0.3, is: 'rgb(255, 255, 161) rgb(130, 130, 130)'},
{at: 0, is: 'rgb(255, 215, 128) rgb(100, 100, 100)'},
{at: 0.5, is: 'rgb(136, 116, 73) rgb(51, 51, 51)'},
{at: 1, is: 'rgb(17, 17, 17) rgb(1, 1, 1)'},
{at: 1.5, is: 'rgb(0, 0, 0) rgb(0, 0, 0)'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-integer-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--integer-list: 30 300;
}
.target {
--integer-list: 10 100;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--integer-list',
syntax: '<integer>+',
initialValue: '40 400',
inherits: false,
});
assertInterpolation({
property: '--integer-list',
from: 'initial',
to: '20 200',
}, [
{at: -0.3, is: '46 460'},
{at: 0, is: '40 400'},
{at: 0.5, is: '30 300'},
{at: 1, is: '20 200'},
{at: 1.5, is: '10 100'},
]);
assertInterpolation({
property: '--integer-list',
from: 'inherit',
to: '20 200',
}, [
{at: -0.3, is: '33 330'},
{at: 0, is: '30 300'},
{at: 0.5, is: '25 250'},
{at: 1, is: '20 200'},
{at: 1.5, is: '15 150'},
]);
assertInterpolation({
property: '--integer-list',
from: 'unset',
to: '20 200',
}, [
{at: -0.3, is: '46 460'},
{at: 0, is: '40 400'},
{at: 0.5, is: '30 300'},
{at: 1, is: '20 200'},
{at: 1.5, is: '10 100'},
]);
assertInterpolation({
property: '--integer-list',
from: '-10 -100',
to: '10 100',
}, [
{at: -0.3, is: '-16 -160'},
{at: 0, is: '-10 -100'},
{at: 0.5, is: '0 0'},
{at: 1, is: '10 100'},
{at: 1.5, is: '20 200'}
]);
assertInterpolation({
property: '--integer-list',
from: '10',
to: '100',
}, [
{at: -0.3, is: '-17'},
{at: 0, is: '10'},
{at: 0.5, is: '55'},
{at: 1, is: '100'},
{at: 1.5, is: '145'}
]);
assertInterpolation({
property: '--integer-list',
from: '0 15',
to: '15 0',
}, [
{at: -0.3, is: '-4 19'},
{at: 0, is: '0 15'},
{at: 0.45, is: '7 8'},
{at: 1, is: '15 0'},
{at: 1.45, is: '22 -7'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--integer-list',
from: neutralKeyframe,
to: '20 200',
}, [
{at: -0.3, is: '7 70'},
{at: 0, is: '10 100'},
{at: 0.5, is: '15 150'},
{at: 1, is: '20 200'},
{at: 1.5, is: '25 250'},
]);
assertComposition({
property: '--integer-list',
underlying: '50 60',
addFrom: '10 140',
addTo: '110 40',
}, [
{at: -0.3, is: '30 230'},
{at: 0, is: '60 200'},
{at: 0.5, is: '110 150'},
{at: 1, is: '160 100'},
{at: 1.5, is: '210 50'},
]);
assertComposition({
property: '--integer-list',
underlying: '50 60',
addFrom: '10 140',
replaceTo: '110 40',
}, [
{at: -0.3, is: '45 248'},
{at: 0, is: '60 200'},
{at: 0.5, is: '85 120'},
{at: 1, is: '110 40'},
{at: 1.5, is: '135 -40'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-length-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--length-list: 30px 300px;
}
.target {
--length-list: 10px 100px;
font-size: 20px;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--length-list',
syntax: '<length>+',
initialValue: '40px 400px',
inherits: false,
});
assertInterpolation({
property: '--length-list',
from: 'initial',
to: '20px 200px',
}, [
{at: -0.3, is: '46px 460px'},
{at: 0, is: '40px 400px'},
{at: 0.5, is: '30px 300px'},
{at: 1, is: '20px 200px'},
{at: 1.5, is: '10px 100px'},
]);
assertInterpolation({
property: '--length-list',
from: 'inherit',
to: '20px 200px',
}, [
{at: -0.3, is: '33px 330px'},
{at: 0, is: '30px 300px'},
{at: 0.5, is: '25px 250px'},
{at: 1, is: '20px 200px'},
{at: 1.5, is: '15px 150px'},
]);
assertInterpolation({
property: '--length-list',
from: 'unset',
to: '20px 200px',
}, [
{at: -0.3, is: '46px 460px'},
{at: 0, is: '40px 400px'},
{at: 0.5, is: '30px 300px'},
{at: 1, is: '20px 200px'},
{at: 1.5, is: '10px 100px'},
]);
assertInterpolation({
property: '--length-list',
from: '-10px -100px',
to: '10px 100px',
}, [
{at: -0.3, is: '-16px -160px'},
{at: 0, is: '-10px -100px'},
{at: 0.5, is: '0px 0px'},
{at: 1, is: '10px 100px'},
{at: 1.5, is: '20px 200px'}
]);
assertInterpolation({
property: '--length-list',
from: '10em 100em',
to: '20em 200em',
}, [
{at: -0.3, is: '140px 1400px'},
{at: 0, is: '200px 2000px'},
{at: 0.5, is: '300px 3000px'},
{at: 1, is: '400px 4000px'},
{at: 1.5, is: '500px 5000px'}
]);
assertInterpolation({
property: '--length-list',
from: '10em 100em',
to: '100px 1000px',
}, [
{at: -0.3, is: '230px 2300px'},
{at: 0, is: '200px 2000px'},
{at: 0.5, is: '150px 1500px'},
{at: 1, is: '100px 1000px'},
{at: 1.5, is: '50px 500px'}
]);
assertInterpolation({
property: '--length-list',
from: '10px',
to: '100px',
}, [
{at: -0.3, is: '-17px'},
{at: 0, is: '10px'},
{at: 0.5, is: '55px'},
{at: 1, is: '100px'},
{at: 1.5, is: '145px'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--length-list',
from: neutralKeyframe,
to: '20px 200px',
}, [
{at: -0.3, is: '7px 70px'},
{at: 0, is: '10px 100px'},
{at: 0.5, is: '15px 150px'},
{at: 1, is: '20px 200px'},
{at: 1.5, is: '25px 250px'},
]);
assertComposition({
property: '--length-list',
underlying: '50px 60px',
addFrom: '10px 140px',
addTo: '110px 40px',
}, [
{at: -0.3, is: '30px 230px'},
{at: 0, is: '60px 200px'},
{at: 0.5, is: '110px 150px'},
{at: 1, is: '160px 100px'},
{at: 1.5, is: '210px 50px'},
]);
assertComposition({
property: '--length-list',
underlying: '50px 60px',
addFrom: '10px 140px',
replaceTo: '110px 40px',
}, [
{at: -0.3, is: '45px 248px'},
{at: 0, is: '60px 200px'},
{at: 0.5, is: '85px 120px'},
{at: 1, is: '110px 40px'},
{at: 1.5, is: '135px -40px'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-length-percentage-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--length-percentage-list: 30% 300px;
}
.target {
--length-percentage-list: 10% 100px;
font-size: 20px;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--length-percentage-list',
syntax: '<length-percentage>+',
initialValue: '40% 400px',
inherits: false,
});
assertInterpolation({
property: '--length-percentage-list',
from: 'initial',
to: '20% 200%',
}, [
{at: -0.3, is: '46% calc(520px - 60%)'},
{at: 0, is: '40% 400px'},
{at: 0.5, is: '30% calc(200px + 100%)'},
{at: 1, is: '20% 200%'},
{at: 1.5, is: '10% calc(-200px + 300%)'},
]);
assertInterpolation({
property: '--length-percentage-list',
from: 'inherit',
to: '20px 200%',
}, [
{at: -0.3, is: 'calc(-6px + 39%) calc(390px - 60%)'},
{at: 0, is: '30% 300px'},
{at: 0.5, is: 'calc(10px + 15%) calc(150px + 100%)'},
{at: 1, is: '20px 200%'},
{at: 1.5, is: 'calc(30px - 15%) calc(-150px + 300%)'},
]);
assertInterpolation({
property: '--length-percentage-list',
from: 'unset',
to: 'calc(100px + 120%) calc(100px + 120%)',
}, [
{at: -0.3, is: 'calc(-30px + 16%) calc(490px - 36%)'},
{at: 0, is: '40% 400px'},
{at: 0.5, is: 'calc(50px + 80%) calc(250px + 60%)'},
{at: 1, is: 'calc(100px + 120%) calc(100px + 120%)'},
{at: 1.5, is: 'calc(150px + 160%) calc(-50px + 180%)'},
]);
assertInterpolation({
property: '--length-percentage-list',
from: 'calc(-10px - 10%) -100px',
to: 'calc(10px + 10%) 100px',
}, [
{at: -0.3, is: 'calc(-16px - 16%) -160px'},
{at: 0, is: 'calc(-10px - 10%) -100px'},
{at: 0.5, is: '0% 0px'},
{at: 1, is: 'calc(10px + 10%) 100px'},
{at: 1.5, is: 'calc(20px + 20%) 200px'}
]);
assertInterpolation({
property: '--length-percentage-list',
from: 'calc(10em + 10%) 100em',
to: '20em calc(200em + 200%)',
}, [
{at: -0.3, is: 'calc(140px + 13%) calc(1400px - 60%)'},
{at: 0, is: 'calc(200px + 10%) 2000px'},
{at: 0.5, is: 'calc(300px + 5%) calc(3000px + 100%)'},
{at: 1, is: '400px calc(4000px + 200%)'},
{at: 1.5, is: 'calc(500px - 5%) calc(5000px + 300%)'}
]);
assertInterpolation({
property: '--length-percentage-list',
from: '0px',
to: 'calc(100px + 100%)',
}, [
{at: -0.3, is: 'calc(-30px - 30%)'},
{at: 0, is: '0px'},
{at: 0.5, is: 'calc(50px + 50%)'},
{at: 1, is: 'calc(100px + 100%)'},
{at: 1.5, is: 'calc(150px + 150%)'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--length-percentage-list',
from: neutralKeyframe,
to: '20% 200px',
}, [
{at: -0.3, is: '7% 70px'},
{at: 0, is: '10% 100px'},
{at: 0.5, is: '15% 150px'},
{at: 1, is: '20% 200px'},
{at: 1.5, is: '25% 250px'},
]);
assertComposition({
property: '--length-percentage-list',
underlying: '50px 60%',
addFrom: '10% 140px',
addTo: '110% 40px',
}, [
{at: -0.3, is: 'calc(50px - 20%) calc(170px + 60%)'},
{at: 0, is: 'calc(50px + 10%) calc(140px + 60%)'},
{at: 0.5, is: 'calc(50px + 60%) calc(90px + 60%)'},
{at: 1, is: 'calc(50px + 110%) calc(40px + 60%)'},
{at: 1.5, is: 'calc(50px + 160%) calc(-10px + 60%)'},
]);
assertComposition({
property: '--length-percentage-list',
underlying: '50px 60%',
addFrom: '10% 140px',
replaceTo: '110% 40px',
}, [
{at: -0.3, is: 'calc(65px - 20%) calc(170px + 78%)'},
{at: 0, is: 'calc(50px + 10%) calc(140px + 60%)'},
{at: 0.5, is: 'calc(25px + 60%) calc(90px + 30%)'},
{at: 1, is: '110% 40px'},
{at: 1.5, is: 'calc(-25px + 160%) calc(-10px - 30%)'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--length-list-comma: 30px, 300px;
}
.target {
--length-list-comma: 40px, 400px;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
// This file verifies correct interpolation behavior for the "list aspect" of
// custom property lists. The type of the values contained in the list are
// assumed to not matter, hence <length> was chosen here arbitrarily.
CSS.registerProperty({
name: '--length-list-comma',
syntax: '<length>#',
initialValue: '40px, 20px',
inherits: false
});
CSS.registerProperty({
name: '--length-list-space',
syntax: '<length>+',
initialValue: '40px 20px',
inherits: false
});
// Verify that a property registered as a comma-separated list produces
// comma-separated values.
assertInterpolation({
property: '--length-list-comma',
from: '0px, 0px',
to: '10px, 100px',
}, [
{at: -0.3, is: '-3px, -30px'},
{at: 0, is: '0px, 0px'},
{at: 0.5, is: '5px, 50px'},
{at: 1, is: '10px, 100px'},
{at: 1.5, is: '15px, 150px'}
]);
// Verify that a property registered as a space-separated list produces
// space-separated values.
assertInterpolation({
property: '--length-list-space',
from: '0px 0px',
to: '10px 100px',
}, [
{at: -0.3, is: '-3px -30px'},
{at: 0, is: '0px 0px'},
{at: 0.5, is: '5px 50px'},
{at: 1, is: '10px 100px'},
{at: 1.5, is: '15px 150px'}
]);
// Verify that lists of different lengths don't interpolate:
assertNoInterpolation({
property: '--length-list-comma',
from: '0px',
to: '10px, 100px'
});
assertNoInterpolation({
property: '--length-list-comma',
from: 'initial',
to: '10px'
});
assertNoInterpolation({
property: '--length-list-comma',
from: 'unset',
to: '10px'
});
assertNoInterpolation({
property: '--length-list-comma',
from: 'inherit',
to: '10px'
});
// Composition tests assume that composite:add mean component-wise addition,
// which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
// Verify that lists of different lengths don't interpolate:
assertNoInterpolation({
property: '--length-list-comma',
from: neutralKeyframe,
to: '10px, 100px, 1000px'
});
// Verify that attempting to composite:add to an incompatible value
// replaces that value instead.
assertComposition({
property: '--length-list-space',
underlying: '50px',
addFrom: '10px 10px',
addTo: '100px 100px',
}, [
{at: -0.3, is: '-17px -17px'},
{at: 0, is: '10px 10px'},
{at: 0.3, is: '37px 37px'},
{at: 0.5, is: '55px 55px'},
{at: 0.7, is: '73px 73px'},
{at: 1, is: '100px 100px'},
{at: 1.5, is: '145px 145px'},
]);
// No interpolation between two incompatible results of a composite:
assertComposition({
property: '--length-list-space',
underlying: '50px 50px',
addFrom: '10px 10px',
addTo: '100px',
}, [
{at: -0.3, is: '60px 60px'},
{at: 0, is: '60px 60px'},
{at: 0.3, is: '60px 60px'},
{at: 0.5, is: '100px'},
{at: 0.7, is: '100px'},
{at: 1, is: '100px'},
{at: 1.5, is: '100px'},
]);
assertComposition({
property: '--length-list-space',
underlying: '50px 50px',
addFrom: '10px 10px',
replaceTo: '100px',
}, [
{at: -0.3, is: '60px 60px'},
{at: 0, is: '60px 60px'},
{at: 0.3, is: '60px 60px'},
{at: 0.5, is: '100px'},
{at: 0.7, is: '100px'},
{at: 1, is: '100px'},
{at: 1.5, is: '100px'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-number-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--number-list: 30 300;
}
.target {
--number-list: 10 100;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--number-list',
syntax: '<number>+',
initialValue: '40 400',
inherits: false,
});
assertInterpolation({
property: '--number-list',
from: 'initial',
to: '20 200',
}, [
{at: -0.3, is: '46 460'},
{at: 0, is: '40 400'},
{at: 0.5, is: '30 300'},
{at: 1, is: '20 200'},
{at: 1.5, is: '10 100'},
]);
assertInterpolation({
property: '--number-list',
from: 'inherit',
to: '20 200',
}, [
{at: -0.3, is: '33 330'},
{at: 0, is: '30 300'},
{at: 0.5, is: '25 250'},
{at: 1, is: '20 200'},
{at: 1.5, is: '15 150'},
]);
assertInterpolation({
property: '--number-list',
from: 'unset',
to: '20 200',
}, [
{at: -0.3, is: '46 460'},
{at: 0, is: '40 400'},
{at: 0.5, is: '30 300'},
{at: 1, is: '20 200'},
{at: 1.5, is: '10 100'},
]);
assertInterpolation({
property: '--number-list',
from: '-10 -100',
to: '10 100',
}, [
{at: -0.3, is: '-16 -160'},
{at: 0, is: '-10 -100'},
{at: 0.5, is: '0 0'},
{at: 1, is: '10 100'},
{at: 1.5, is: '20 200'}
]);
assertInterpolation({
property: '--number-list',
from: '10',
to: '100',
}, [
{at: -0.3, is: '-17'},
{at: 0, is: '10'},
{at: 0.5, is: '55'},
{at: 1, is: '100'},
{at: 1.5, is: '145'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--number-list',
from: neutralKeyframe,
to: '20 200',
}, [
{at: -0.3, is: '7 70'},
{at: 0, is: '10 100'},
{at: 0.5, is: '15 150'},
{at: 1, is: '20 200'},
{at: 1.5, is: '25 250'},
]);
assertComposition({
property: '--number-list',
underlying: '50 60',
addFrom: '10 140',
addTo: '110 40',
}, [
{at: -0.3, is: '30 230'},
{at: 0, is: '60 200'},
{at: 0.5, is: '110 150'},
{at: 1, is: '160 100'},
{at: 1.5, is: '210 50'},
]);
assertComposition({
property: '--number-list',
underlying: '50 60',
addFrom: '10 140',
replaceTo: '110 40',
}, [
{at: -0.3, is: '45 248'},
{at: 0, is: '60 200'},
{at: 0.5, is: '85 120'},
{at: 1, is: '110 40'},
{at: 1.5, is: '135 -40'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-percentage-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--percentage-list: 30% 300%;
}
.target {
--percentage-list: 10% 100%;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--percentage-list',
syntax: '<percentage>+',
initialValue: '40% 400%',
inherits: false,
});
assertInterpolation({
property: '--percentage-list',
from: 'initial',
to: '20% 200%',
}, [
{at: -0.3, is: '46% 460%'},
{at: 0, is: '40% 400%'},
{at: 0.5, is: '30% 300%'},
{at: 1, is: '20% 200%'},
{at: 1.5, is: '10% 100%'},
]);
assertInterpolation({
property: '--percentage-list',
from: 'inherit',
to: '20% 200%',
}, [
{at: -0.3, is: '33% 330%'},
{at: 0, is: '30% 300%'},
{at: 0.5, is: '25% 250%'},
{at: 1, is: '20% 200%'},
{at: 1.5, is: '15% 150%'},
]);
assertInterpolation({
property: '--percentage-list',
from: 'unset',
to: '20% 200%',
}, [
{at: -0.3, is: '46% 460%'},
{at: 0, is: '40% 400%'},
{at: 0.5, is: '30% 300%'},
{at: 1, is: '20% 200%'},
{at: 1.5, is: '10% 100%'},
]);
assertInterpolation({
property: '--percentage-list',
from: '-10% -100%',
to: '10% 100%',
}, [
{at: -0.3, is: '-16% -160%'},
{at: 0, is: '-10% -100%'},
{at: 0.5, is: '0% 0%'},
{at: 1, is: '10% 100%'},
{at: 1.5, is: '20% 200%'}
]);
assertInterpolation({
property: '--percentage-list',
from: '10%',
to: '100%',
}, [
{at: -0.3, is: '-17%'},
{at: 0, is: '10%'},
{at: 0.5, is: '55%'},
{at: 1, is: '100%'},
{at: 1.5, is: '145%'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--percentage-list',
from: neutralKeyframe,
to: '20% 200%',
}, [
{at: -0.3, is: '7% 70%'},
{at: 0, is: '10% 100%'},
{at: 0.5, is: '15% 150%'},
{at: 1, is: '20% 200%'},
{at: 1.5, is: '25% 250%'},
]);
assertComposition({
property: '--percentage-list',
underlying: '50% 60%',
addFrom: '10% 140%',
addTo: '110% 40%',
}, [
{at: -0.3, is: '30% 230%'},
{at: 0, is: '60% 200%'},
{at: 0.5, is: '110% 150%'},
{at: 1, is: '160% 100%'},
{at: 1.5, is: '210% 50%'},
]);
assertComposition({
property: '--percentage-list',
underlying: '50% 60%',
addFrom: '10% 140%',
replaceTo: '110% 40%',
}, [
{at: -0.3, is: '45% 248%'},
{at: 0, is: '60% 200%'},
{at: 0.5, is: '85% 120%'},
{at: 1, is: '110% 40%'},
{at: 1.5, is: '135% -40%'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-resolution-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--resolution-list: 30dppx 300dppx;
}
.target {
--resolution-list: 10dppx 100dppx;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--resolution-list',
syntax: '<resolution>+',
initialValue: '40dppx 400dppx',
inherits: false,
});
assertInterpolation({
property: '--resolution-list',
from: 'initial',
to: '20dppx 200dppx',
}, [
{at: -0.3, is: '46dppx 460dppx'},
{at: 0, is: '40dppx 400dppx'},
{at: 0.5, is: '30dppx 300dppx'},
{at: 1, is: '20dppx 200dppx'},
{at: 1.5, is: '10dppx 100dppx'},
]);
assertInterpolation({
property: '--resolution-list',
from: 'inherit',
to: '20dppx 200dppx',
}, [
{at: -0.3, is: '33dppx 330dppx'},
{at: 0, is: '30dppx 300dppx'},
{at: 0.5, is: '25dppx 250dppx'},
{at: 1, is: '20dppx 200dppx'},
{at: 1.5, is: '15dppx 150dppx'},
]);
assertInterpolation({
property: '--resolution-list',
from: 'unset',
to: '20dppx 200dppx',
}, [
{at: -0.3, is: '46dppx 460dppx'},
{at: 0, is: '40dppx 400dppx'},
{at: 0.5, is: '30dppx 300dppx'},
{at: 1, is: '20dppx 200dppx'},
{at: 1.5, is: '10dppx 100dppx'},
]);
assertInterpolation({
property: '--resolution-list',
from: '-10dppx -100dppx',
to: '10dppx 100dppx',
}, [
{at: -0.3, is: '-16dppx -160dppx'},
{at: 0, is: '-10dppx -100dppx'},
{at: 0.5, is: '0dppx 0dppx'},
{at: 1, is: '10dppx 100dppx'},
{at: 1.5, is: '20dppx 200dppx'}
]);
assertInterpolation({
property: '--resolution-list',
from: '10dppx',
to: '100dppx',
}, [
{at: -0.3, is: '-17dppx'},
{at: 0, is: '10dppx'},
{at: 0.5, is: '55dppx'},
{at: 1, is: '100dppx'},
{at: 1.5, is: '145dppx'}
]);
assertInterpolation({
property: '--resolution-list',
from: '96dpi 192dpi',
to: '2dppx 2dppx',
}, [
{at: -0.3, is: '0.7dppx 2dppx'},
{at: 0, is: '1dppx 2dppx'},
{at: 0.5, is: '1.5dppx 2dppx'},
{at: 1, is: '2dppx 2dppx'},
{at: 1.5, is: '2.5dppx 2dppx'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--resolution-list',
from: neutralKeyframe,
to: '20dppx 200dppx',
}, [
{at: -0.3, is: '7dppx 70dppx'},
{at: 0, is: '10dppx 100dppx'},
{at: 0.5, is: '15dppx 150dppx'},
{at: 1, is: '20dppx 200dppx'},
{at: 1.5, is: '25dppx 250dppx'},
]);
assertComposition({
property: '--resolution-list',
underlying: '50dppx 60dppx',
addFrom: '10dppx 140dppx',
addTo: '110dppx 40dppx',
}, [
{at: -0.3, is: '30dppx 230dppx'},
{at: 0, is: '60dppx 200dppx'},
{at: 0.5, is: '110dppx 150dppx'},
{at: 1, is: '160dppx 100dppx'},
{at: 1.5, is: '210dppx 50dppx'},
]);
assertComposition({
property: '--resolution-list',
underlying: '50dppx 60dppx',
addFrom: '10dppx 140dppx',
replaceTo: '110dppx 40dppx',
}, [
{at: -0.3, is: '45dppx 248dppx'},
{at: 0, is: '60dppx 200dppx'},
{at: 0.5, is: '85dppx 120dppx'},
{at: 1, is: '110dppx 40dppx'},
{at: 1.5, is: '135dppx -40dppx'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/custom-properties/custom-time-list-type-interpolation.html 0 → 100644
View file @ b521675a
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
--time-list: 30s 300s;
}
.target {
--time-list: 10s 100s;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
name: '--time-list',
syntax: '<time>+',
initialValue: '40s 400s',
inherits: false,
});
assertInterpolation({
property: '--time-list',
from: 'initial',
to: '20s 200s',
}, [
{at: -0.3, is: '46s 460s'},
{at: 0, is: '40s 400s'},
{at: 0.5, is: '30s 300s'},
{at: 1, is: '20s 200s'},
{at: 1.5, is: '10s 100s'},
]);
assertInterpolation({
property: '--time-list',
from: 'inherit',
to: '20s 200s',
}, [
{at: -0.3, is: '33s 330s'},
{at: 0, is: '30s 300s'},
{at: 0.5, is: '25s 250s'},
{at: 1, is: '20s 200s'},
{at: 1.5, is: '15s 150s'},
]);
assertInterpolation({
property: '--time-list',
from: 'unset',
to: '20s 200s',
}, [
{at: -0.3, is: '46s 460s'},
{at: 0, is: '40s 400s'},
{at: 0.5, is: '30s 300s'},
{at: 1, is: '20s 200s'},
{at: 1.5, is: '10s 100s'},
]);
assertInterpolation({
property: '--time-list',
from: '-10s -100s',
to: '10s 100s',
}, [
{at: -0.3, is: '-16s -160s'},
{at: 0, is: '-10s -100s'},
{at: 0.5, is: '0s 0s'},
{at: 1, is: '10s 100s'},
{at: 1.5, is: '20s 200s'}
]);
assertInterpolation({
property: '--time-list',
from: '10s',
to: '100s',
}, [
{at: -0.3, is: '-17s'},
{at: 0, is: '10s'},
{at: 0.5, is: '55s'},
{at: 1, is: '100s'},
{at: 1.5, is: '145s'}
]);
assertInterpolation({
property: '--time-list',
from: '0s 1000ms',
to: '1000ms 0s',
}, [
{at: -0.3, is: '-0.3s 1.3s'},
{at: 0, is: '0s 1s'},
{at: 0.5, is: '0.5s 0.5s'},
{at: 1, is: '1s 0s'},
{at: 1.5, is: '1.5s -0.5s'}
]);
// Composition and neutralKeyframe tests assume that composite:add means
// component-wise addition, which may or may not be the behavior we want.
// https://github.com/w3c/css-houdini-drafts/issues/799
assertInterpolation({
property: '--time-list',
from: neutralKeyframe,
to: '20s 200s',
}, [
{at: -0.3, is: '7s 70s'},
{at: 0, is: '10s 100s'},
{at: 0.5, is: '15s 150s'},
{at: 1, is: '20s 200s'},
{at: 1.5, is: '25s 250s'},
]);
assertComposition({
property: '--time-list',
underlying: '50s 60s',
addFrom: '10s 140s',
addTo: '110s 40s',
}, [
{at: -0.3, is: '30s 230s'},
{at: 0, is: '60s 200s'},
{at: 0.5, is: '110s 150s'},
{at: 1, is: '160s 100s'},
{at: 1.5, is: '210s 50s'},
]);
assertComposition({
property: '--time-list',
underlying: '50s 60s',
addFrom: '10s 140s',
replaceTo: '110s 40s',
}, [
{at: -0.3, is: '45s 248s'},
{at: 0, is: '60s 200s'},
{at: 0.5, is: '85s 120s'},
{at: 1, is: '110s 40s'},
{at: 1.5, is: '135s -40s'},
]);
</script>
</body>
third_party/blink/renderer/core/animation/BUILD.gn
View file @ b521675a
......@@ -56,6 +56,8 @@ blink_core_sources("animation") {
"css_clip_interpolation_type.h",
"css_color_interpolation_type.cc",
"css_color_interpolation_type.h",
"css_custom_list_interpolation_type.cc",
"css_custom_list_interpolation_type.h",
"css_default_interpolation_type.cc",
"css_default_interpolation_type.h",
"css_filter_list_interpolation_type.cc",
......
third_party/blink/renderer/core/animation/css_custom_list_interpolation_type.cc 0 → 100644
View file @ b521675a
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
#include "third_party/blink/renderer/core/animation/css_custom_list_interpolation_type.h"
#include "third_party/blink/renderer/core/animation/length_interpolation_functions.h"
#include "third_party/blink/renderer/core/animation/underlying_length_checker.h"
#include "third_party/blink/renderer/core/css/css_primitive_value.h"
#include "third_party/blink/renderer/core/css/css_value_list.h"
namespace blink {
InterpolationValue CSSCustomListInterpolationType::MaybeConvertNeutral(
const InterpolationValue& underlying,
ConversionCheckers& conversion_checkers) const {
size_t underlying_length =
UnderlyingLengthChecker::GetUnderlyingLength(underlying);
conversion_checkers.push_back(
UnderlyingLengthChecker::Create(underlying_length));
if (underlying_length == 0)
return nullptr;
InterpolationValue null_underlying(nullptr);
ConversionCheckers null_checkers;
auto convert_inner = [this, &null_underlying, &null_checkers](size_t) {
return this->inner_interpolation_type_->MaybeConvertNeutral(null_underlying,
null_checkers);
};
return ListInterpolationFunctions::CreateList(underlying_length,
convert_inner);
}
InterpolationValue CSSCustomListInterpolationType::MaybeConvertValue(
const CSSValue& value,
const StyleResolverState* state,
ConversionCheckers&) const {
if (!value.IsValueList())
return nullptr;
ConversionCheckers null_checkers;
const CSSValueList& list = ToCSSValueList(value);
return ListInterpolationFunctions::CreateList(
list.length(), [this, &list, state, &null_checkers](size_t index) {
return this->inner_interpolation_type_->MaybeConvertValue(
list.Item(index), state, null_checkers);
});
}
const CSSValue* CSSCustomListInterpolationType::CreateCSSValue(
const InterpolableValue& interpolable_value,
const NonInterpolableValue* non_interpolable_value,
const StyleResolverState& state) const {
const InterpolableList& interpolable_list =
ToInterpolableList(interpolable_value);
const NonInterpolableList* non_interpolable_list =
non_interpolable_value ? &ToNonInterpolableList(*non_interpolable_value)
: nullptr;
CSSValueList* list = nullptr;
switch (syntax_repeat_) {
default:
NOTREACHED();
FALLTHROUGH;
case CSSSyntaxRepeat::kSpaceSeparated:
list = CSSValueList::CreateSpaceSeparated();
break;
case CSSSyntaxRepeat::kCommaSeparated:
list = CSSValueList::CreateCommaSeparated();
break;
}
DCHECK(!non_interpolable_list ||
interpolable_list.length() == non_interpolable_list->length());
for (size_t i = 0; i < interpolable_list.length(); ++i) {
const NonInterpolableValue* non_interpolable_single_value =
non_interpolable_list ? non_interpolable_list->Get(i) : nullptr;
list->Append(*inner_interpolation_type_->CreateCSSValue(
*interpolable_list.Get(i), non_interpolable_single_value, state));
}
return list;
}
void CSSCustomListInterpolationType::Composite(
UnderlyingValueOwner& underlying_value_owner,
double underlying_fraction,
const InterpolationValue& value,
double interpolation_fraction) const {
// TODO(andruud): Properly support composition once behavior is defined.
// https://github.com/w3c/css-houdini-drafts/issues/799
underlying_value_owner.Set(*this, value);
}
PairwiseInterpolationValue CSSCustomListInterpolationType::MaybeMergeSingles(
InterpolationValue&& start,
InterpolationValue&& end) const {
return ListInterpolationFunctions::MaybeMergeSingles(
std::move(start), std::move(end),
ListInterpolationFunctions::LengthMatchingStrategy::kEqual,
WTF::BindRepeating(&CSSInterpolationType::MaybeMergeSingles,
WTF::Unretained(inner_interpolation_type_.get())));
}
} // namespace blink
third_party/blink/renderer/core/animation/css_custom_list_interpolation_type.h 0 → 100644
View file @ b521675a
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
#ifndef THIRD_PARTY_BLINK_RENDERER_CORE_ANIMATION_CSS_CUSTOM_LIST_INTERPOLATION_TYPE_H_
#define THIRD_PARTY_BLINK_RENDERER_CORE_ANIMATION_CSS_CUSTOM_LIST_INTERPOLATION_TYPE_H_
#include "third_party/blink/renderer/core/animation/css_interpolation_type.h"
#include "third_party/blink/renderer/core/animation/list_interpolation_functions.h"
#include "third_party/blink/renderer/core/css/css_syntax_descriptor.h"
namespace blink {
class CSSCustomListInterpolationType : public CSSInterpolationType {
public:
CSSCustomListInterpolationType(
PropertyHandle property,
const PropertyRegistration* registration,
std::unique_ptr<CSSInterpolationType> inner_interpolation_type,
CSSSyntaxRepeat syntax_repeat)
: CSSInterpolationType(property, registration),
inner_interpolation_type_(std::move(inner_interpolation_type)),
syntax_repeat_(syntax_repeat) {
DCHECK(property.IsCSSCustomProperty());
}
InterpolationValue MaybeConvertNeutral(const InterpolationValue& underlying,
ConversionCheckers&) const final;
InterpolationValue MaybeConvertValue(const CSSValue&,
const StyleResolverState*,
ConversionCheckers&) const final;
const CSSValue* CreateCSSValue(const InterpolableValue&,
const NonInterpolableValue*,
const StyleResolverState&) const final;
void Composite(UnderlyingValueOwner&,
double underlying_fraction,
const InterpolationValue&,
double interpolation_fraction) const final;
PairwiseInterpolationValue MaybeMergeSingles(
InterpolationValue&& start,
InterpolationValue&& end) const final;
private:
// These methods only apply to CSSInterpolationTypes used by standard CSS
// properties. CSSCustomListInterpolationType is only accessible via
// registered custom CSS properties.
InterpolationValue MaybeConvertStandardPropertyUnderlyingValue(
const ComputedStyle&) const final {
NOTREACHED();
return nullptr;
}
void ApplyStandardPropertyValue(const InterpolableValue&,
const NonInterpolableValue*,
StyleResolverState&) const final {
NOTREACHED();
}
InterpolationValue MaybeConvertInitial(const StyleResolverState&,
ConversionCheckers&) const final {
NOTREACHED();
return nullptr;
}
InterpolationValue MaybeConvertInherit(const StyleResolverState&,
ConversionCheckers&) const final {
NOTREACHED();
return nullptr;
}
// This InterpolationType represents the interpolation of elements inside
// the list.
//
// TODO(andruud): Disallow applying inner interpolation type:
// https://crbug.com/882379
//
// Currently, InterpolationTypes are not designed to "nest" in this way due to
// their mandatory association with specific properties, so please do not call
// InterpolationType::Apply on inner_interpolation_type_.
std::unique_ptr<CSSInterpolationType> inner_interpolation_type_;
const CSSSyntaxRepeat syntax_repeat_;
};
} // namespace blink
#endif // THIRD_PARTY_BLINK_RENDERER_CORE_ANIMATION_CSS_CUSTOM_LIST_INTERPOLATION_TYPE_H_
third_party/blink/renderer/core/animation/css_interpolation_type.h
View file @ b521675a
......@@ -32,6 +32,26 @@ class CORE_EXPORT CSSInterpolationType : public InterpolationType {
const InterpolationValue& underlying) const = 0;
};
virtual InterpolationValue MaybeConvertNeutral(
const InterpolationValue& underlying,
ConversionCheckers&) const = 0;
virtual InterpolationValue MaybeConvertInitial(const StyleResolverState&,
ConversionCheckers&) const = 0;
virtual InterpolationValue MaybeConvertInherit(const StyleResolverState&,
ConversionCheckers&) const = 0;
virtual InterpolationValue MaybeConvertValue(const CSSValue&,
const StyleResolverState*,
ConversionCheckers&) const = 0;
virtual const CSSValue* CreateCSSValue(const InterpolableValue&,
const NonInterpolableValue*,
const StyleResolverState&) const {
// TODO(alancutter): Implement this for all subclasses and make this an
// abstract declaration so the return type can be changed to
// const CSSValue&.
NOTREACHED();
return nullptr;
}
protected:
CSSInterpolationType(PropertyHandle, const PropertyRegistration* = nullptr);
......@@ -43,16 +63,7 @@ class CORE_EXPORT CSSInterpolationType : public InterpolationType {
const InterpolationEnvironment&,
const InterpolationValue& underlying,
ConversionCheckers&) const final;
virtual InterpolationValue MaybeConvertNeutral(
const InterpolationValue& underlying,
ConversionCheckers&) const = 0;
virtual InterpolationValue MaybeConvertInitial(const StyleResolverState&,
ConversionCheckers&) const = 0;
virtual InterpolationValue MaybeConvertInherit(const StyleResolverState&,
ConversionCheckers&) const = 0;
virtual InterpolationValue MaybeConvertValue(const CSSValue&,
const StyleResolverState*,
ConversionCheckers&) const = 0;
virtual void AdditiveKeyframeHook(InterpolationValue&) const {}
InterpolationValue MaybeConvertUnderlyingValue(
......@@ -80,16 +91,6 @@ class CORE_EXPORT CSSInterpolationType : public InterpolationType {
CSSVariableResolver&,
ConversionCheckers&) const;
virtual const CSSValue* CreateCSSValue(const InterpolableValue&,
const NonInterpolableValue*,
const StyleResolverState&) const {
// TODO(alancutter): Implement this for all subclasses and make this an
// abstract declaration so the return type can be changed to
// const CSSValue&.
NOTREACHED();
return nullptr;
}
const PropertyRegistration& Registration() const {
DCHECK(GetProperty().IsCSSCustomProperty());
return *registration_;
......
third_party/blink/renderer/core/animation/css_interpolation_types_map.cc
View file @ b521675a
......@@ -12,6 +12,7 @@
#include "third_party/blink/renderer/core/animation/css_border_image_length_box_interpolation_type.h"
#include "third_party/blink/renderer/core/animation/css_clip_interpolation_type.h"
#include "third_party/blink/renderer/core/animation/css_color_interpolation_type.h"
#include "third_party/blink/renderer/core/animation/css_custom_list_interpolation_type.h"
#include "third_party/blink/renderer/core/animation/css_default_interpolation_type.h"
#include "third_party/blink/renderer/core/animation/css_filter_list_interpolation_type.h"
#include "third_party/blink/renderer/core/animation/css_font_size_interpolation_type.h"
......@@ -374,6 +375,53 @@ size_t CSSInterpolationTypesMap::Version() const {
return registry_ ? registry_->RegistrationCount() : 0;
}
static std::unique_ptr<CSSInterpolationType>
CreateInterpolationTypeForCSSSyntax(CSSSyntaxType syntax,
PropertyHandle property,
const PropertyRegistration& registration) {
switch (syntax) {
case CSSSyntaxType::kAngle:
return std::make_unique<CSSAngleInterpolationType>(property,
&registration);
case CSSSyntaxType::kColor:
return std::make_unique<CSSColorInterpolationType>(property,
&registration);
case CSSSyntaxType::kLength:
case CSSSyntaxType::kLengthPercentage:
case CSSSyntaxType::kPercentage:
return std::make_unique<CSSLengthInterpolationType>(property,
&registration);
case CSSSyntaxType::kNumber:
return std::make_unique<CSSNumberInterpolationType>(property,
&registration);
case CSSSyntaxType::kResolution:
return std::make_unique<CSSResolutionInterpolationType>(property,
&registration);
case CSSSyntaxType::kTime:
return std::make_unique<CSSTimeInterpolationType>(property,
&registration);
case CSSSyntaxType::kImage:
// TODO(andruud): Implement smooth interpolation for gradients.
return nullptr;
case CSSSyntaxType::kInteger:
return std::make_unique<CSSNumberInterpolationType>(property,
&registration, true);
case CSSSyntaxType::kTransformFunction:
case CSSSyntaxType::kTransformList:
// TODO(alancutter): Support smooth interpolation of these types.
return nullptr;
case CSSSyntaxType::kCustomIdent:
case CSSSyntaxType::kIdent:
case CSSSyntaxType::kTokenStream:
case CSSSyntaxType::kUrl:
// Smooth interpolation not supported for these types.
return nullptr;
default:
NOTREACHED();
return nullptr;
}
}
InterpolationTypes
CSSInterpolationTypesMap::CreateInterpolationTypesForCSSSyntax(
const AtomicString& property_name,
......@@ -387,60 +435,20 @@ CSSInterpolationTypesMap::CreateInterpolationTypesForCSSSyntax(
std::make_unique<CSSVarCycleInterpolationType>(property, registration));
for (const CSSSyntaxComponent& component : descriptor.Components()) {
if (component.IsRepeatable()) {
// TODO(alancutter): Support animation of repeatable types.
std::unique_ptr<CSSInterpolationType> interpolation_type =
CreateInterpolationTypeForCSSSyntax(component.type_, property,
registration);
if (!interpolation_type)
continue;
}
switch (component.type_) {
case CSSSyntaxType::kAngle:
result.push_back(std::make_unique<CSSAngleInterpolationType>(
property, &registration));
break;
case CSSSyntaxType::kColor:
result.push_back(std::make_unique<CSSColorInterpolationType>(
property, &registration));
break;
case CSSSyntaxType::kLength:
case CSSSyntaxType::kLengthPercentage:
case CSSSyntaxType::kPercentage:
result.push_back(std::make_unique<CSSLengthInterpolationType>(
property, &registration));
break;
case CSSSyntaxType::kNumber:
result.push_back(std::make_unique<CSSNumberInterpolationType>(
property, &registration));
break;
case CSSSyntaxType::kResolution:
result.push_back(std::make_unique<CSSResolutionInterpolationType>(
property, &registration));
break;
case CSSSyntaxType::kTime:
result.push_back(std::make_unique<CSSTimeInterpolationType>(
property, &registration));
break;
case CSSSyntaxType::kImage:
// TODO(andruud): Implement smooth interpolation for gradients.
break;
case CSSSyntaxType::kInteger:
result.push_back(std::make_unique<CSSNumberInterpolationType>(
property, &registration, true));
break;
case CSSSyntaxType::kTransformFunction:
case CSSSyntaxType::kTransformList:
// TODO(alancutter): Support smooth interpolation of these types.
break;
case CSSSyntaxType::kCustomIdent:
case CSSSyntaxType::kIdent:
case CSSSyntaxType::kTokenStream:
case CSSSyntaxType::kUrl:
// No interpolation behaviour defined, uses the
// CSSDefaultInterpolationType added below.
break;
default:
NOTREACHED();
break;
if (component.IsRepeatable()) {
interpolation_type = std::make_unique<CSSCustomListInterpolationType>(
property, &registration, std::move(interpolation_type),
component.repeat_);
}
result.push_back(std::move(interpolation_type));
}
result.push_back(std::make_unique<CSSDefaultInterpolationType>(property));
return result;
......
third_party/blink/renderer/core/animation/list_interpolation_functions_test.cc
View file @ b521675a
......@@ -66,8 +66,6 @@ InterpolationValue CreateInterpolableList(const std::vector<double>& values) {
bool NonInterpolableValuesAreCompatible(const NonInterpolableValue* a,
const NonInterpolableValue* b) {
// Note that '0' may never be held by TestNonInterpolableValues. See
// DCHECK in TestNonInterpolableValue::Create.
return (a ? ToTestNonInterpolableValue(*a).GetValue() : 0) ==
(b ? ToTestNonInterpolableValue(*b).GetValue() : 0);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment