text-underline-offset-interpolation.html (4988B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="help" href="https://www.w3.org/TR/css-text-decor-4/#underline-offset"> 4 <meta name="test" content="text-underline-offset supports animation by computed value type"> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/interpolation-testcommon.js"></script> 9 10 <style> 11 .target { 12 font: 16px sans-serif; 13 } 14 </style> 15 16 <body> 17 <template id="target-template">T</template> 18 </body> 19 20 <script> 21 test_interpolation({ 22 property: 'text-underline-offset', 23 from: '15px', 24 to: '0px', 25 }, [ 26 {at: 0, expect: '15px'}, 27 {at: 0.3, expect: '10.5px'}, 28 {at: 0.6, expect: '6px'}, 29 {at: 1, expect: '0px'}, 30 ]); 31 32 test_interpolation({ 33 property: 'text-underline-offset', 34 from: '16px', 35 to: '0px', 36 }, [ 37 {at: 0, expect: '16px'}, 38 {at: 0.3, expect: '11.2px'}, 39 {at: 0.6, expect: '6.4px'}, 40 {at: 1, expect: '0px'}, 41 ]); 42 43 test_interpolation({ 44 property: 'text-underline-offset', 45 from: '16px', 46 to: '32px', 47 }, [ 48 {at: 0, expect: '16px'}, 49 {at: 0.3, expect: '20.8px'}, 50 {at: 0.6, expect: '25.6px'}, 51 {at: 1, expect: '32px'}, 52 ]); 53 54 test_interpolation({ 55 property: 'text-underline-offset', 56 from: '1em', 57 to: '0em', 58 }, [ 59 {at: 0, expect: '16px'}, 60 {at: 0.3, expect: '11.2px'}, 61 {at: 0.6, expect: '6.4px'}, 62 {at: 1, expect: '0px'}, 63 ]); 64 65 test_interpolation({ 66 property: 'text-underline-offset', 67 from: '1em', 68 to: '2em', 69 }, [ 70 {at: 0, expect: '16px'}, 71 {at: 0.3, expect: '20.8px'}, 72 {at: 0.6, expect: '25.6px'}, 73 {at: 1, expect: '32px'}, 74 ]); 75 76 test_interpolation({ 77 property: 'text-underline-offset', 78 from: '100%', 79 to: '0%', 80 }, [ 81 {at: 0, expect: '100%'}, 82 {at: 0.3, expect: '70%'}, 83 {at: 0.6, expect: '40%'}, 84 {at: 1, expect: '0%'}, 85 ]); 86 87 test_interpolation({ 88 property: 'text-underline-offset', 89 from: '100%', 90 to: '200%', 91 }, [ 92 {at: 0, expect: '100%'}, 93 {at: 0.3, expect: '130%'}, 94 {at: 0.6, expect: '160%'}, 95 {at: 1, expect: '200%'}, 96 ]); 97 98 test_interpolation({ 99 property: 'text-underline-offset', 100 from: '16px', 101 to: '0em', 102 }, [ 103 {at: 0, expect: '16px'}, 104 {at: 0.3, expect: '11.2px'}, 105 {at: 0.6, expect: '6.4px'}, 106 {at: 1, expect: '0px'}, 107 ]); 108 109 test_interpolation({ 110 property: 'text-underline-offset', 111 from: '16px', 112 to: '2em', 113 }, [ 114 {at: 0, expect: '16px'}, 115 {at: 0.3, expect: '20.8px'}, 116 {at: 0.6, expect: '25.6px'}, 117 {at: 1, expect: '32px'}, 118 ]); 119 120 test_interpolation({ 121 property: 'text-underline-offset', 122 from: '16px', 123 to: '0%', 124 }, [ 125 {at: 0, expect: 'calc(0% + 16px)'}, 126 {at: 0.3, expect: 'calc(0% + 11.2px)'}, 127 {at: 0.6, expect: 'calc(0% + 6.4px)'}, 128 {at: 1, expect: '0%'}, 129 ]); 130 131 test_interpolation({ 132 property: 'text-underline-offset', 133 from: '16px', 134 to: '200%', 135 }, [ 136 {at: 0, expect: 'calc(0% + 16px)'}, 137 {at: 0.3, expect: 'calc(60% + 11.2px)'}, 138 {at: 0.6, expect: 'calc(120% + 6.4px)'}, 139 {at: 1, expect: '200%'}, 140 ]); 141 142 test_interpolation({ 143 property: 'text-underline-offset', 144 from: '1em', 145 to: '0px', 146 }, [ 147 {at: 0, expect: '16px'}, 148 {at: 0.3, expect: '11.2px'}, 149 {at: 0.6, expect: '6.4px'}, 150 {at: 1, expect: '0px'}, 151 ]); 152 153 test_interpolation({ 154 property: 'text-underline-offset', 155 from: '1em', 156 to: '32px', 157 }, [ 158 {at: 0, expect: '16px'}, 159 {at: 0.3, expect: '20.8px'}, 160 {at: 0.6, expect: '25.6px'}, 161 {at: 1, expect: '32px'}, 162 ]); 163 164 test_interpolation({ 165 property: 'text-underline-offset', 166 from: '1em', 167 to: '0%', 168 }, [ 169 {at: 0, expect: 'calc(0% + 16px)'}, 170 {at: 0.3, expect: 'calc(0% + 11.2px)'}, 171 {at: 0.6, expect: 'calc(0% + 6.4px)'}, 172 {at: 1, expect: '0%'}, 173 ]); 174 175 test_interpolation({ 176 property: 'text-underline-offset', 177 from: '1em', 178 to: '200%', 179 }, [ 180 {at: 0, expect: 'calc(0% + 16px)'}, 181 {at: 0.3, expect: 'calc(60% + 11.2px)'}, 182 {at: 0.6, expect: 'calc(120% + 6.4px)'}, 183 {at: 1, expect: '200%'}, 184 ]); 185 186 test_interpolation({ 187 property: 'text-underline-offset', 188 from: '100%', 189 to: '0px', 190 }, [ 191 {at: 0, expect: '100%'}, 192 {at: 0.3, expect: '70%'}, 193 {at: 0.6, expect: '40%'}, 194 {at: 1, expect: '0%'}, 195 ]); 196 197 test_interpolation({ 198 property: 'text-underline-offset', 199 from: '100%', 200 to: '32px', 201 }, [ 202 {at: 0, expect: 'calc(100% + 0px)'}, 203 {at: 0.3, expect: 'calc(70% + 9.6px)'}, 204 {at: 0.6, expect: 'calc(40% + 19.2px)'}, 205 {at: 1, expect: 'calc(0% + 32px)'}, 206 ]); 207 208 test_interpolation({ 209 property: 'text-underline-offset', 210 from: '100%', 211 to: '0em', 212 }, [ 213 {at: 0, expect: 'calc(100% + 0em)'}, 214 {at: 0.3, expect: 'calc(70% + 0em)'}, 215 {at: 0.6, expect: 'calc(40% + 0em)'}, 216 {at: 1, expect: 'calc(0% + 0em)'}, 217 ]); 218 219 test_interpolation({ 220 property: 'text-underline-offset', 221 from: '100%', 222 to: '2em', 223 }, [ 224 {at: 0, expect: '100%'}, 225 {at: 0.3, expect: 'calc(70% + 9.6px)'}, 226 {at: 0.6, expect: 'calc(40% + 19.2px)'}, 227 {at: 1, expect: 'calc(0% + 32px)'}, 228 ]); 229 230 test_interpolation({ 231 property: 'text-underline-offset', 232 from: '0%', 233 to: '100%', 234 }, [ 235 {at: 0, expect: '0%'}, 236 {at: 0.3, expect: '30%'}, 237 {at: 0.6, expect: '60%'}, 238 {at: 1, expect: '100%'}, 239 ]); 240 </script>