text-shadow-interpolation.html (3801B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>text-shadow interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> 5 <meta name="assert" content="text-shadow supports animation"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <style> 12 .parent { 13 text-shadow: 30px 10px 30px orange; 14 } 15 16 .target { 17 display: inline-block; 18 font-size: 60pt; 19 margin-right: 20px; 20 margin-bottom: 30px; 21 color: green; 22 text-shadow: 10px 30px 10px orange; 23 } 24 25 .expected { 26 margin-right: 40px; 27 } 28 </style> 29 <body> 30 <template id="target-template">T</template> 31 <script> 32 test_interpolation({ 33 property: 'text-shadow', 34 from: neutralKeyframe, 35 to: 'green 20px 20px 20px', 36 }, [ 37 {at: -0.3, expect: 'rgb(255, 176, 0) 7px 33px 7px'}, 38 {at: 0, expect: 'rgb(255, 165, 0) 10px 30px 10px'}, 39 {at: 0.3, expect: 'rgb(179, 154, 0) 13px 27px 13px'}, 40 {at: 0.6, expect: 'rgb(102, 143, 0) 16px 24px 16px'}, 41 {at: 1, expect: 'rgb(0, 128, 0) 20px 20px 20px'}, 42 {at: 1.5, expect: 'rgb(0, 110, 0) 25px 15px 25px'}, 43 ]); 44 45 test_interpolation({ 46 property: 'text-shadow', 47 from: 'initial', 48 to: 'green 20px 20px 20px', 49 }, [ 50 {at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px'}, 51 {at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px'}, 52 {at: 0.3, expect: 'rgba(0, 128, 0, 0.3) 6px 6px 6px'}, 53 {at: 0.6, expect: 'rgba(0, 128, 0, 0.6) 12px 12px 12px'}, 54 {at: 1, expect: 'rgb(0, 128, 0) 20px 20px 20px'}, 55 {at: 1.5, expect: 'rgb(0, 192, 0) 30px 30px 30px'}, 56 ]); 57 58 test_interpolation({ 59 property: 'text-shadow', 60 from: 'inherit', 61 to: 'green 20px 20px 20px', 62 }, [ 63 {at: -0.3, expect: 'rgb(255, 176, 0) 33px 7px 33px'}, 64 {at: 0, expect: 'rgb(255, 165, 0) 30px 10px 30px'}, 65 {at: 0.3, expect: 'rgb(179, 154, 0) 27px 13px 27px'}, 66 {at: 0.6, expect: 'rgb(102, 143, 0) 24px 16px 24px'}, 67 {at: 1, expect: 'rgb(0, 128, 0) 20px 20px 20px'}, 68 {at: 1.5, expect: 'rgb(0, 110, 0) 15px 25px 15px'}, 69 ]); 70 71 test_interpolation({ 72 property: 'text-shadow', 73 from: 'unset', 74 to: 'green 20px 20px 20px', 75 }, [ 76 {at: -0.3, expect: 'rgb(255, 176, 0) 33px 7px 33px'}, 77 {at: 0, expect: 'rgb(255, 165, 0) 30px 10px 30px'}, 78 {at: 0.3, expect: 'rgb(179, 154, 0) 27px 13px 27px'}, 79 {at: 0.6, expect: 'rgb(102, 143, 0) 24px 16px 24px'}, 80 {at: 1, expect: 'rgb(0, 128, 0) 20px 20px 20px'}, 81 {at: 1.5, expect: 'rgb(0, 110, 0) 15px 25px 15px'}, 82 ]); 83 84 test_interpolation({ 85 property: 'text-shadow', 86 from: 'black 15px 10px 5px', 87 to: 'orange -15px -10px 25px', 88 }, [ 89 {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px'}, 90 {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px'}, 91 {at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px'}, 92 {at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px'}, 93 {at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px'}, 94 {at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px'}, 95 ]); 96 97 test_interpolation({ 98 property: 'text-shadow', 99 from: 'black 10px 10px 10px', 100 to: 'currentColor 10px 10px 10px', 101 }, [ 102 {at: -0.3, expect: 'rgb(0, 0, 0) 10px 10px 10px'}, 103 {at: 0, expect: 'rgb(0, 0, 0) 10px 10px 10px'}, 104 {at: 0.3, expect: 'rgb(0, 38, 0) 10px 10px 10px'}, 105 {at: 0.6, expect: 'rgb(0, 77, 0) 10px 10px 10px'}, 106 {at: 1, expect: 'rgb(0, 128, 0) 10px 10px 10px'}, 107 {at: 1.5, expect: 'rgb(0, 192, 0) 10px 10px 10px'}, 108 ]); 109 110 test_interpolation({ 111 property: 'text-shadow', 112 from: 'black 0px 0px 0px', 113 to: 'black 1px 1px 1px', 114 }, [ 115 {at: -0.3, expect: 'rgb(0, 0, 0) -0.3px -0.3px 0px'}, 116 {at: 0, expect: 'rgb(0, 0, 0) 0px 0px 0px'}, 117 {at: 0.3, expect: 'rgb(0, 0, 0) 0.3px 0.3px 0.3px'}, 118 {at: 0.6, expect: 'rgb(0, 0, 0) 0.6px 0.6px 0.6px'}, 119 {at: 1, expect: 'rgb(0, 0, 0) 1px 1px 1px'}, 120 {at: 1.5, expect: 'rgb(0, 0, 0) 1.5px 1.5px 1.5px'}, 121 ]); 122 </script> 123 </body>