font-stretch-interpolation.html (3682B)
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-stretch: ultra-expanded; 14 } 15 .container2 { 16 font-stretch: ultra-condensed; 17 } 18 .target { 19 display: inline-block; 20 font: 100px sans-serif; 21 font-stretch: normal; 22 } 23 .expected { 24 color: green; 25 margin-right: 30px; 26 } 27 </style> 28 29 <body> 30 <template id="target-template"> 31 <span class="container"> 32 <div class="target">TT</div> 33 </span> 34 </template> 35 36 <span id="inv-container" class="container"> 37 <div id="inv-target" class="target">TT</div> 38 </span> 39 </body> 40 41 <script> 42 test_interpolation({ 43 property: 'font-stretch', 44 from: '100%', 45 to: '200%' 46 }, [ 47 {at: -2, expect: '0%'}, // CSS font-stretch can't be negative. 48 {at: -0.25, expect: '75%'}, 49 {at: 0, expect: '100%'}, 50 {at: 0.3, expect: '130%'}, 51 {at: 0.6, expect: '160%'}, 52 {at: 1, expect: '200%'}, 53 {at: 1.5, expect: '250%'}, 54 ]); 55 56 test_interpolation({ 57 property: 'font-stretch', 58 from: neutralKeyframe, 59 to: '200%' 60 }, [ 61 {at: -2, expect: '0%'}, 62 {at: -0.25, expect: '75%'}, 63 {at: 0, expect: '100%'}, 64 {at: 0.3, expect: '130%'}, 65 {at: 0.6, expect: '160%'}, 66 {at: 1, expect: '200%'}, 67 {at: 1.5, expect: '250%'}, 68 ]); 69 70 test_interpolation({ 71 property: 'font-stretch', 72 from: 'initial', 73 to: 'inherit' 74 }, [ 75 {at: -2, expect: '0%'}, 76 {at: -0.25, expect: '75%'}, 77 {at: 0, expect: '100%'}, 78 {at: 0.3, expect: '130%'}, 79 {at: 0.6, expect: '160%'}, 80 {at: 1, expect: '200%'}, 81 {at: 1.5, expect: '250%'}, 82 ]); 83 84 // Test interpolation from keywords. 85 test_interpolation({ 86 property: 'font-stretch', 87 from: 'normal', 88 to: 'ultra-expanded' 89 }, [ 90 {at: -0.25, expect: '75%'}, 91 {at: 0, expect: '100%'}, 92 {at: 0.125, expect: '112.5%'}, 93 {at: 0.25, expect: '125%'}, 94 {at: 0.5, expect: '150%'}, 95 {at: 0.75, expect: '175%'}, 96 {at: 1, expect: '200%'}, 97 ]); 98 99 test_interpolation({ 100 property: 'font-stretch', 101 from: 'ultra-condensed', 102 to: 'condensed' 103 }, [ 104 {at: 0, expect: '50%'}, 105 {at: 0.5, expect: '62.5%'}, 106 {at: 1, expect: '75%'}, 107 ]); 108 109 test_interpolation({ 110 property: 'font-stretch', 111 from: 'extra-condensed', 112 to: 'semi-condensed' 113 }, [ 114 {at: 0, expect: '62.5%'}, 115 {at: 0.5, expect: '75%'}, 116 {at: 1, expect: '87.5%'}, 117 ]); 118 119 test_interpolation({ 120 property: 'font-stretch', 121 from: 'condensed', 122 to: 'expanded' 123 }, [ 124 {at: 0, expect: '75%'}, 125 {at: 0.25, expect: '87.5%'}, 126 {at: 0.5, expect: '100%'}, 127 {at: 0.75, expect: '112.5%'}, 128 {at: 1, expect: '125%'}, 129 ]); 130 131 test_interpolation({ 132 property: 'font-stretch', 133 from: 'semi-condensed', 134 to: 'semi-expanded' 135 }, [ 136 {at: 0, expect: '87.5%'}, 137 {at: 0.5, expect: '100%'}, 138 {at: 1, expect: '112.5%'}, 139 ]); 140 141 test_interpolation({ 142 property: 'font-stretch', 143 from: 'normal', 144 to: 'extra-expanded' 145 }, [ 146 {at: 0, expect: '100%'}, 147 {at: 0.25, expect: '112.5%'}, 148 {at: 0.5, expect: '125%'}, 149 {at: 1, expect: '150%'}, 150 ]); 151 152 test(t => { 153 var container = document.getElementById('inv-container'); 154 var target = document.getElementById('inv-target'); 155 var anim = target.animate({fontStretch: ['normal', 'inherit']}, 1000); 156 anim.pause(); 157 anim.currentTime = 500; 158 assert_equals(getComputedStyle(target).fontStretch, '150%'); 159 160 container.setAttribute('class', 'container2'); 161 assert_equals(getComputedStyle(target).fontStretch, '75%'); 162 }, "An interpolation to inherit updates correctly on a parent style change."); 163 164 </script>