font-size-adjust-interpolation.html (3690B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>font-size-adjust interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size-adjust"> 5 <meta name="assert" content="font-size-adjust supports animation as a number"> 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 type="text/css"> 12 .container { 13 font-size: 20px; 14 line-height: 1; 15 } 16 17 .parent { 18 font-size-adjust: 3; 19 } 20 21 .target { 22 display: inline-block; 23 font-size-adjust: 1; 24 } 25 26 .expected { 27 color: green; 28 margin-right: 30px; 29 } 30 </style> 31 32 <body> 33 <template id="target-template"> 34 <span class="container"> 35 <div class="target">x</span> 36 </div> 37 </template> 38 </body> 39 40 <script> 41 test_interpolation({ 42 property: 'font-size-adjust', 43 from: neutralKeyframe, 44 to: '2', 45 }, [ 46 {at: -2, expect: '0'}, 47 {at: -0.3, expect: '0.7'}, 48 {at: 0, expect: '1'}, 49 {at: 0.3, expect: '1.3'}, 50 {at: 0.6, expect: '1.6'}, 51 {at: 1, expect: '2'}, 52 {at: 1.5, expect: '2.5'}, 53 ]); 54 55 test_no_interpolation({ 56 property: 'font-size-adjust', 57 from: 'initial', 58 to: '2', 59 }); 60 61 test_no_interpolation({ 62 property: 'font-size-adjust', 63 from: 'initial', 64 to: 'cap-height 2', 65 }); 66 67 test_interpolation({ 68 property: 'font-size-adjust', 69 from: 'inherit', 70 to: '2', 71 }, [ 72 {at: -2, expect: '5'}, 73 {at: -0.3, expect: '3.3'}, 74 {at: 0, expect: '3'}, 75 {at: 0.3, expect: '2.7'}, 76 {at: 0.6, expect: '2.4'}, 77 {at: 1, expect: '2'}, 78 {at: 1.5, expect: '1.5'}, 79 ]); 80 81 test_interpolation({ 82 property: 'font-size-adjust', 83 from: 'unset', 84 to: '2', 85 }, [ 86 {at: -2, expect: '5'}, 87 {at: -0.3, expect: '3.3'}, 88 {at: 0, expect: '3'}, 89 {at: 0.3, expect: '2.7'}, 90 {at: 0.6, expect: '2.4'}, 91 {at: 1, expect: '2'}, 92 {at: 1.5, expect: '1.5'}, 93 ]); 94 95 96 test_interpolation({ 97 property: 'font-size-adjust', 98 from: '0', 99 to: '1.2' 100 }, [ 101 {at: -2, expect: '0'}, 102 {at: -0.3, expect: '0'}, 103 {at: 0, expect: '0'}, 104 {at: 0.3, expect: '0.36'}, 105 {at: 0.6, expect: '0.72'}, 106 {at: 1, expect: '1.2'}, 107 {at: 1.5, expect: '1.8'}, 108 ]); 109 110 test_interpolation({ 111 property: 'font-size-adjust', 112 from: 'cap-height 0', 113 to: 'cap-height 1.2' 114 }, [ 115 {at: -2, expect: 'cap-height 0'}, 116 {at: -0.3, expect: 'cap-height 0'}, 117 {at: 0, expect: 'cap-height 0'}, 118 {at: 0.3, expect: 'cap-height 0.36'}, 119 {at: 0.6, expect: 'cap-height 0.72'}, 120 {at: 1, expect: 'cap-height 1.2'}, 121 {at: 1.5, expect: 'cap-height 1.8'}, 122 ]); 123 124 test_no_interpolation({ 125 property: 'font-size-adjust', 126 from: 'none', 127 to: '1.2' 128 }); 129 130 test_no_interpolation({ 131 property: 'font-size-adjust', 132 from: 'none', 133 to: 'cap-height 1.2' 134 }); 135 136 test_interpolation({ 137 property: 'font-size-adjust', 138 from: '0.2', 139 to: '1.2' 140 }, [ 141 {at: -2, expect: '0'}, // CSS font-size-adjust can't be negative. 142 {at: -0.3, expect: '0'}, 143 {at: 0, expect: '0.2'}, 144 {at: 0.3, expect: '0.5'}, 145 {at: 0.6, expect: '0.8'}, 146 {at: 1, expect: '1.2'}, 147 {at: 1.5, expect: '1.7'}, 148 ]); 149 150 test_interpolation({ 151 property: 'font-size-adjust', 152 from: 'ch-width 0.2', 153 to: 'ch-width 1.2' 154 }, [ 155 {at: -2, expect: 'ch-width 0'}, // CSS font-size-adjust can't be negative. 156 {at: -0.3, expect: 'ch-width 0'}, 157 {at: 0, expect: 'ch-width 0.2'}, 158 {at: 0.3, expect: 'ch-width 0.5'}, 159 {at: 0.6, expect: 'ch-width 0.8'}, 160 {at: 1, expect: 'ch-width 1.2'}, 161 {at: 1.5, expect: 'ch-width 1.7'}, 162 ]); 163 164 test_no_interpolation({ // can't interpolate between different adjustment basis 165 property: 'font-size-adjust', 166 from: 'ex-height 0.2', 167 to: 'cap-height 1.2' 168 }); 169 </script>