OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
3 <style> | 3 <style> |
4 .target { | 4 .target { |
5 width: 40px; | 5 width: 40px; |
6 height: 40px; | 6 height: 40px; |
7 background-color: black; | 7 background-color: black; |
8 } | 8 } |
9 .expected { | 9 .expected { |
10 background-color: green; | 10 background-color: green; |
(...skipping 14 matching lines...) Expand all Loading... |
25 {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px'}, | 25 {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px'}, |
26 {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px'}, | 26 {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px'}, |
27 ]); | 27 ]); |
28 | 28 |
29 assertComposition({ | 29 assertComposition({ |
30 property: 'text-shadow', | 30 property: 'text-shadow', |
31 underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', | 31 underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', |
32 addFrom: 'rgb(100, 100, 100) 10px 20px 30px', | 32 addFrom: 'rgb(100, 100, 100) 10px 20px 30px', |
33 addTo: 'rgb(200, 200, 200) 20px 40px 60px', | 33 addTo: 'rgb(200, 200, 200) 20px 40px 60px', |
34 }, [ | 34 }, [ |
35 {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px, rgb(90, 110, 130) 9px 18px 27p
x'}, | 35 {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px, rgb(20, 40, 60) 2px 4px 6px'}, |
36 {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(120, 140, 160) 12px 24px 3
6px'}, | 36 {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(20, 40, 60) 2px 4px 6px'}, |
37 {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px, rgb(170, 190, 210) 17px 34px
51px'}, | 37 {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px, rgb(20, 40, 60) 2px 4px 6px'
}, |
38 {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(220, 240, 255) 22px 44px 6
6px'}, | 38 {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(20, 40, 60) 2px 4px 6px'}, |
39 {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px, rgb(255, 255, 255) 27px 54px
81px'}, | 39 {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px, rgb(20, 40, 60) 2px 4px 6px'
}, |
40 ]); | 40 ]); |
41 | 41 |
42 assertComposition({ | 42 assertComposition({ |
43 property: 'text-shadow', | 43 property: 'text-shadow', |
44 underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', | 44 underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', |
45 addFrom: 'rgb(100, 100, 100) 10px 20px 30px', | 45 addFrom: 'rgb(100, 100, 100) 10px 20px 30px', |
46 replaceTo: 'rgb(200, 200, 200) 20px 40px 60px', | 46 replaceTo: 'rgb(200, 200, 200) 20px 40px 60px', |
47 }, [ | 47 }, [ |
48 {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px, rgb(96, 122, 148) 9.6px
19.2px 28.8px'}, | 48 {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px, rgb(26, 52, 78) 2.6px 5.
2px 7.8px'}, |
49 {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(120, 140, 160) 12px 24px 3
6px'}, | 49 {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(20, 40, 60) 2px 4px 6px'}, |
50 {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgb(160, 170, 180) 16px
32px 48px'}, | 50 {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgba(20, 40, 60, 0.5) 1p
x 2px 3px'}, |
51 {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'}, | 51 {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'}, |
52 {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px, rgba(255, 255, 255
, 0.5) 24px 48px 72px'}, | 52 {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px, rgba(0, 0, 0, 0) -
1px -2px 0px'}, |
53 ]); | 53 ]); |
54 | 54 |
55 assertComposition({ | 55 assertComposition({ |
56 property: 'text-shadow', | 56 property: 'text-shadow', |
57 underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', | 57 underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px', |
58 replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px', | 58 replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px', |
59 addTo: 'rgb(200, 200, 200) 20px 40px 60px', | 59 addTo: 'rgb(200, 200, 200) 20px 40px 60px', |
60 }, [ | 60 }, [ |
61 {at: -0.3, is: 'rgba(96, 91, 87, 0.701961) 6.7px 13.4px 20.1px, rgba(91, 83, 7
4, 0.701961) 6.4px 12.8px 19.2px'}, | 61 {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'}, |
62 {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px'}, | 62 {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px'}, |
63 {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgb(160, 170, 180) 16px
32px 48px'}, | 63 {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px, rgba(20, 40, 60, 0.5) 1p
x 2px 3px'}, |
64 {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(220, 240, 255) 22px 44px 6
6px'}, | 64 {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px, rgb(20, 40, 60) 2px 4px 6px'}, |
65 {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px, rgb(255, 255, 255) 28px
56px 84px'}, | 65 {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px, rgb(30, 60, 90) 3px 6px
9px'}, |
66 ]); | 66 ]); |
67 | 67 |
68 assertComposition({ | 68 assertComposition({ |
69 property: 'text-shadow', | 69 property: 'text-shadow', |
70 underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40,
80, 120) 4px 8px 12px', | 70 underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40,
80, 120) 4px 8px 12px', |
71 addFrom: 'rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px
', | 71 addFrom: 'rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px
', |
72 replaceTo: 'rgb(200, 200, 200) 20px 40px 60px', | 72 replaceTo: 'rgb(200, 200, 200) 20px 40px 60px', |
73 }, [ | 73 }, [ |
74 {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px, rgb(226, 252, 255) 22.6p
x 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'}, | 74 {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px, rgb(255, 255, 255) 28.6p
x 57.2px 85.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px'}, |
75 {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(220, 240, 255) 22px 44px 6
6px, rgb(140, 180, 220) 14px 28px 42px, rgb(210, 220, 230) 21px 42px 63px, rgb(1
20, 140, 160) 12px 24px 36px, rgb(240, 255, 255) 24px 48px 72px'}, | 75 {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px, rgb(220, 240, 255) 22px 44px 6
6px, rgb(40, 80, 120) 4px 8px 12px'}, |
76 {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'}, | 76 {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'}, |
77 {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'}, | 77 {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'}, |
78 {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px, rgba(255, 255, 255
, 0.5) 19px 38px 57px, rgba(255, 255, 255, 0.5) 23px 46px 69px, rgba(255, 255, 2
55, 0.5) 19.5px 39px 58.5px, rgba(255, 255, 255, 0.5) 24px 48px 72px, rgba(255,
255, 255, 0.5) 18px 36px 54px'}, | 78 {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'}, |
79 ]); | 79 ]); |
80 </script> | 80 </script> |
81 </body> | 81 </body> |
OLD | NEW |