font-size-interpolation-003.html (1074B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>font-size interpolation with zoom</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 a length, respecting zoom"> 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 zoom: 2; 14 } 15 .target { 16 display: inline-block; 17 } 18 .expected { 19 color: green; 20 margin-right: 30px; 21 } 22 </style> 23 24 <body> 25 <template id="target-template"> 26 <span class="container"> 27 <div class="target">TT</div> 28 </span> 29 </template> 30 </body> 31 32 <script> 33 // The container has zoom: 2 applied to it. 34 test_interpolation({ 35 property: 'font-size', 36 from: '10px', 37 to: '20px' 38 }, [ 39 {at: -2, expect: '0px'}, // CSS font-size can't be negative. 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 </script>