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