| <!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> |
