| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| baseline-shift: 30px; |
| } |
| .target { |
| stroke: black; |
| /* |
| CSS transitions and animations for baseline-shift are broken unless a |
| numerical underlying value is specified. See crbug.com/304007. |
| */ |
| baseline-shift: 0px; |
| } |
| .expected { |
| stroke: green; |
| } |
| svg:nth-child(2n) { |
| margin-right: 10px; |
| } |
| svg { |
| baseline-shift: 30px; |
| } |
| </style> |
| <body> |
| <template id="target-template"> |
| <svg width="30" height="50"> |
| <!-- |
| We have to specify the target class on the text element because numerical |
| values of baseline-shift are not inherited properly. See crbug.com/304006. |
| --> |
| <text x="0" y="25" font-size="10" class="target"> |
| <tspan>T</tspan>T |
| </text> |
| </svg> |
| </template> |
| <script src="resources/interpolation-test.js"></script> |
| <script> |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: neutralKeyframe, |
| to: '20px', |
| }, [ |
| {at: -0.25, is: '-5px'}, |
| {at: 0, is: '0px'}, |
| {at: 0.25, is: '5px'}, |
| {at: 0.5, is: '10px'}, |
| {at: 0.75, is: '15px'}, |
| {at: 1, is: '20px'}, |
| {at: 1.25, is: '25px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: 'initial', |
| to: '20px', |
| }, [ |
| {at: -0.25, is: '-5px'}, |
| {at: 0, is: '0px'}, |
| {at: 0.25, is: '5px'}, |
| {at: 0.5, is: '10px'}, |
| {at: 0.75, is: '15px'}, |
| {at: 1, is: '20px'}, |
| {at: 1.25, is: '25px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: 'inherit', |
| to: '20px', |
| }, [ |
| {at: -0.25, is: '32.5px'}, |
| {at: 0, is: '30px'}, |
| {at: 0.25, is: '27.5px'}, |
| {at: 0.5, is: '25px'}, |
| {at: 0.75, is: '22.5px'}, |
| {at: 1, is: '20px'}, |
| {at: 1.25, is: '17.5px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: 'unset', |
| to: '20px', |
| }, [ |
| {at: -0.25, is: '-5px'}, |
| {at: 0, is: '0px'}, |
| {at: 0.25, is: '5px'}, |
| {at: 0.5, is: '10px'}, |
| {at: 0.75, is: '15px'}, |
| {at: 1, is: '20px'}, |
| {at: 1.25, is: '25px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: '-10px', |
| to: '10px' |
| }, [ |
| {at: -0.25, is: '-15px'}, |
| {at: 0, is: '-10px'}, |
| {at: 0.25, is: '-5px'}, |
| {at: 0.5, is: '0px'}, |
| {at: 0.75, is: '5px'}, |
| {at: 1, is: '10px'}, |
| {at: 1.25, is: '15px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: 'baseline', |
| to: '100px', |
| }, [ |
| {at: -0.25, is: '-25px'}, |
| {at: 0, is: '0px'}, |
| {at: 0.25, is: '25px'}, |
| {at: 0.5, is: '50px'}, |
| {at: 0.75, is: '75px'}, |
| {at: 1, is: '100px'}, |
| {at: 1.25, is: '125px'}, |
| ]); |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: '100px', |
| to: 'baseline', |
| }, [ |
| {at: -0.25, is: '125px'}, |
| {at: 0, is: '100px'}, |
| {at: 0.25, is: '75px'}, |
| {at: 0.5, is: '50px'}, |
| {at: 0.75, is: '25px'}, |
| {at: 1, is: '0px'}, |
| {at: 1.25, is: '-25px'}, |
| ]); |
| assertNoInterpolation({ |
| property: 'baseline-shift', |
| from: 'sub', |
| to: '100px', |
| }); |
| assertNoInterpolation({ |
| property: 'baseline-shift', |
| from: '100px', |
| to: 'super', |
| }); |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: '50mm', |
| to: 'inherit', |
| }, [ |
| {at: -0.25, is: '228.720474243164px'}, |
| {at: 0, is: '50mm'}, |
| {at: 0.25, is: '149.232284545898px'}, |
| {at: 0.75, is: '69.7440948486328px'}, |
| {at: 1, is: '30px'}, |
| {at: 1.25, is: '-9.74409484863281px'}, |
| ]); |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: '10px', |
| to: '21em', |
| }, [ |
| {at: -0.25, is: '-40px'}, |
| {at: 0, is: '10px'}, |
| {at: 0.25, is: '60px'}, |
| {at: 0.75, is: '160px'}, |
| {at: 1, is: '210px'}, |
| {at: 1.25, is: '260px'}, |
| ]); |
| assertInterpolation({ |
| property: 'baseline-shift', |
| from: 'inherit', |
| to: '33em', |
| }, [ |
| {at: -0.25, is: '-45px'}, |
| {at: 0, is: '30px'}, |
| {at: 0.25, is: '105px'}, |
| {at: 0.75, is: '255px'}, |
| {at: 1, is: '330px'}, |
| {at: 1.25, is: '405px'}, |
| ]); |
| |
| </script> |
| </body> |
