| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .target { |
| width: 40px; |
| height: 40px; |
| background-color: black; |
| } |
| .expected { |
| background-color: green; |
| } |
| </style> |
| <body> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| assertComposition({ |
| property: 'text-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px', |
| addTo: 'rgb(200, 200, 200) 20px 40px 60px', |
| }, [ |
| {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px'}, |
| {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'text-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px', |
| addTo: 'rgb(200, 200, 200) 20px 40px 60px', |
| }, [ |
| {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px, rgb(20, 40, 60) 2px 4px 6px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(20, 40, 60) 2px 4px 6px'}, |
| {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px, rgb(20, 40, 60) 2px 4px 6px'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(20, 40, 60) 2px 4px 6px'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px, rgb(20, 40, 60) 2px 4px 6px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'text-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px', |
| replaceTo: 'rgb(200, 200, 200) 20px 40px 60px', |
| }, [ |
| {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px, rgb(26, 52, 78) 2.6px 5.2px 7.8px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(20, 40, 60) 2px 4px 6px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px'}, |
| {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'}, |
| {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px, rgba(0, 0, 0, 0) -1px -2px 0px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'text-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', |
| replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px', |
| addTo: 'rgb(200, 200, 200) 20px 40px 60px', |
| }, [ |
| {at: -0.3, is: 'rgba(96, 91, 87, 0.7) 6.7px 13.4px 20.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px'}, |
| {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(20, 40, 60) 2px 4px 6px'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px, rgb(30, 60, 90) 3px 6px 9px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'text-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px', |
| replaceTo: 'rgb(200, 200, 200) 20px 40px 60px', |
| }, [ |
| {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px, rgb(255, 255, 255) 28.6px 57.2px 85.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(220, 240, 255) 22px 44px 66px, rgb(40, 80, 120) 4px 8px 12px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgb(110, 120, 130) 11px 22px 33px, rgba(40, 80, 120, 0.5) 2px 4px 6px'}, |
| {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'}, |
| {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px, rgba(0, 0, 0, 0) -11px -22px 0px, rgba(0, 0, 0, 0) -2px -4px 0px'}, |
| ]); |
| </script> |
| </body> |
