| <!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: 'box-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', |
| addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', |
| }, [ |
| {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px'}, |
| {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'box-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px inset', |
| addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px inset', |
| }, [ |
| {at: -0.3, is: 'rgb(70, 70, 70) 7px 14px 21px 28px inset'}, |
| {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px 40px inset'}, |
| {at: 0.5, is: 'rgb(150, 150, 150) 15px 30px 45px 60px inset'}, |
| {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px inset'}, |
| {at: 1.5, is: 'rgb(250, 250, 250) 25px 50px 75px 100px inset'}, |
| ]); |
| |
| assertComposition({ |
| property: 'box-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', |
| addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', |
| }, [ |
| {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px, rgb(20, 40, 60) 2px 4px 6px 8px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(20, 40, 60) 2px 4px 6px 8px'}, |
| {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px, rgb(20, 40, 60) 2px 4px 6px 8px'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(20, 40, 60) 2px 4px 6px 8px'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px, rgb(20, 40, 60) 2px 4px 6px 8px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'box-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset', |
| addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset', |
| }, [ |
| {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px, rgb(70, 70, 70) 7px 14px 21px 28px inset'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(100, 100, 100) 10px 20px 30px 40px inset'}, |
| {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px, rgb(150, 150, 150) 15px 30px 45px 60px inset'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(200, 200, 200) 20px 40px 60px 80px inset'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px, rgb(250, 250, 250) 25px 50px 75px 100px inset'}, |
| ]); |
| |
| assertComposition({ |
| property: 'box-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', |
| replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', |
| }, [ |
| {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px 33.2px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(20, 40, 60) 2px 4px 6px 8px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px'}, |
| {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px'}, |
| {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px 98px, rgba(0, 0, 0, 0) -1px -2px 0px -4px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'box-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px', |
| replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px', |
| addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', |
| }, [ |
| {at: -0.3, is: 'rgba(96, 91, 87, 0.7) 6.7px 13.4px 20.1px 26.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px'}, |
| {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px 40px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px'}, |
| {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(20, 40, 60) 2px 4px 6px 8px'}, |
| {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px 106px, rgb(30, 60, 90) 3px 6px 9px 12px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'box-shadow', |
| underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px', |
| addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px', |
| replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', |
| }, [ |
| {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px 33.2px, rgb(255, 255, 255) 28.6px 57.2px 85.8px 114.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px'}, |
| {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(220, 240, 255) 22px 44px 66px 88px, rgb(40, 80, 120) 4px 8px 12px 16px'}, |
| {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgb(110, 120, 130) 11px 22px 33px 44px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px'}, |
| {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px'}, |
| {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px 98px, rgba(0, 0, 0, 0) -11px -22px 0px -44px, rgba(0, 0, 0, 0) -2px -4px 0px -8px'}, |
| ]); |
| </script> |
| </body> |
