font-size-interpolation-001.html (2177B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>font-size interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size"> 5 <meta name="assert" content="font-size supports animation as length"> 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 font-size: 30px; 14 } 15 .target { 16 display: inline-block; 17 font: 10px sans-serif; 18 } 19 .expected { 20 color: green; 21 margin-right: 30px; 22 } 23 </style> 24 25 <body> 26 <template id="target-template"> 27 <span> 28 <div class="target">Test Text</div> 29 </span> 30 </template> 31 </body> 32 33 <script> 34 test_interpolation({ 35 property: 'font-size', 36 from: neutralKeyframe, 37 to: '20px', 38 }, [ 39 {at: -2, expect: '0px'}, 40 {at: -0.3, expect: '7px'}, 41 {at: 0, expect: '10px'}, 42 {at: 0.3, expect: '13px'}, 43 {at: 0.6, expect: '16px'}, 44 {at: 1, expect: '20px'}, 45 {at: 1.5, expect: '25px'}, 46 ]); 47 48 test_interpolation({ 49 property: 'font-size', 50 from: 'initial', 51 to: '20px', 52 }, [ 53 {at: -2, expect: '8px'}, 54 {at: -0.3, expect: '14.8px'}, 55 {at: 0, expect: '16px'}, 56 {at: 0.3, expect: '17.2px'}, 57 {at: 0.6, expect: '18.4px'}, 58 {at: 1, expect: '20px'}, 59 {at: 1.5, expect: '22px'}, 60 ]); 61 62 test_interpolation({ 63 property: 'font-size', 64 from: 'inherit', 65 to: '20px', 66 }, [ 67 {at: -2, expect: '50px'}, 68 {at: -0.3, expect: '33px'}, 69 {at: 0, expect: '30px'}, 70 {at: 0.3, expect: '27px'}, 71 {at: 0.6, expect: '24px'}, 72 {at: 1, expect: '20px'}, 73 {at: 1.5, expect: '15px'}, 74 ]); 75 76 test_interpolation({ 77 property: 'font-size', 78 from: 'unset', 79 to: '20px', 80 }, [ 81 {at: -2, expect: '50px'}, 82 {at: -0.3, expect: '33px'}, 83 {at: 0, expect: '30px'}, 84 {at: 0.3, expect: '27px'}, 85 {at: 0.6, expect: '24px'}, 86 {at: 1, expect: '20px'}, 87 {at: 1.5, expect: '15px'}, 88 ]); 89 90 test_interpolation({ 91 property: 'font-size', 92 from: '4px', 93 to: '14px' 94 }, [ 95 {at: -2, expect: '0px'}, // CSS font-size can't be negative. 96 {at: -0.3, expect: '1px'}, 97 {at: 0, expect: '4px'}, 98 {at: 0.3, expect: '7px'}, 99 {at: 0.6, expect: '10px'}, 100 {at: 1, expect: '14px'}, 101 {at: 1.5, expect: '19px'}, 102 ]); 103 </script>