font-size-interpolation-002.html (1082B)
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 .container { 13 font-size: 10px; 14 } 15 .target { 16 display: inline-block; 17 font: 100px sans-serif; 18 font-size: 20px; 19 } 20 .expected { 21 color: green; 22 margin-right: 30px; 23 } 24 </style> 25 26 <body> 27 <template id="target-template"> 28 <span class="container"> 29 <div class="target">TT</div> 30 </span> 31 </template> 32 </body> 33 34 <script> 35 // Test the 'unset' case. 36 test_interpolation({ 37 property: 'font-size', 38 from: 'unset', 39 to: '20px' 40 }, [ 41 {at: -2, expect: '0px'}, // CSS font-size can't be negative. 42 {at: -0.3, expect: '7px'}, 43 {at: 0, expect: '10px'}, 44 {at: 0.3, expect: '13px'}, 45 {at: 0.6, expect: '16px'}, 46 {at: 1, expect: '20px'}, 47 {at: 1.5, expect: '25px'}, 48 ]); 49 </script>