| <!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(90, 110, 130) 9px 18px 27px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(120, 140, 160) 12px 24px 36px'}, |
| {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px, rgb(170, 190, 210) 17px 34px 51px'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(220, 240, 255) 22px 44px 66px'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px, rgb(255, 255, 255) 27px 54px 81px'}, |
| ]); |
| |
| 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(96, 122, 148) 9.6px 19.2px 28.8px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(120, 140, 160) 12px 24px 36px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgb(160, 170, 180) 16px 32px 48px'}, |
| {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'}, |
| {at: 1.5, is: 'rgba(255, 255, 255, 0.501961) 24.5px 49px 73.5px, rgba(255, 255, 255, 0.501961) 24px 48px 72px'}, |
| ]); |
| |
| 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.701961) 6.7px 13.4px 20.1px, rgba(91, 83, 74, 0.701961) 6.4px 12.8px 19.2px'}, |
| {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgb(160, 170, 180) 16px 32px 48px'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(220, 240, 255) 22px 44px 66px'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px, rgb(255, 255, 255) 28px 56px 84px'}, |
| ]); |
| |
| 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(226, 252, 255) 22.6px 45.2px 67.8px, rgb(122, 174, 226) 12.2px 24.4px 36.6px, rgb(213, 226, 239) 21.3px 42.6px 63.9px, rgb(96, 122, 148) 9.6px 19.2px 28.8px, rgb(252, 255, 255) 25.2px 50.4px 75.6px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(220, 240, 255) 22px 44px 66px, rgb(140, 180, 220) 14px 28px 42px, rgb(210, 220, 230) 21px 42px 63px, rgb(120, 140, 160) 12px 24px 36px, rgb(240, 255, 255) 24px 48px 72px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgb(210, 220, 230) 21px 42px 63px, rgb(170, 190, 210) 17px 34px 51px, rgb(205, 210, 215) 20.5px 41px 61.5px, rgb(160, 170, 180) 16px 32px 48px, rgb(220, 240, 255) 22px 44px 66px'}, |
| {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'}, |
| {at: 1.5, is: 'rgba(255, 255, 255, 0.501961) 24.5px 49px 73.5px, rgba(255, 255, 255, 0.501961) 19px 38px 57px, rgba(255, 255, 255, 0.501961) 23px 46px 69px, rgba(255, 255, 255, 0.501961) 19.5px 39px 58.5px, rgba(255, 255, 255, 0.501961) 24px 48px 72px, rgba(255, 255, 255, 0.501961) 18px 36px 54px'}, |
| ]); |
| </script> |
| </body> |
