text-size-adjust-interpolation.html (2171B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>text-size-adjust-interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-size-adjust/#adjustment-control"> 5 <meta name="assert" content="text-size-adjust supports animation"> 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 display: inline-block; 14 } 15 16 .parent { 17 text-size-adjust: 70%; 18 } 19 20 .target { 21 text-size-adjust: 60%; 22 } 23 24 .expected { 25 color: green; 26 margin-right: 30px; 27 } 28 </style> 29 <body></body> 30 <template id="target-template"> 31 <span class="container"> 32 <div class="target">x</span> 33 </div> 34 </template> 35 <script> 36 test_interpolation({ 37 property: 'text-size-adjust', 38 from: neutralKeyframe, 39 to: '50%', 40 }, [ 41 {at: -2, expect: '80%'}, 42 {at: -0.3, expect: '63%'}, 43 {at: 0, expect: '60%'}, 44 {at: 0.3, expect: '57%'}, 45 {at: 0.6, expect: '54%'}, 46 {at: 1, expect: '50%'}, 47 {at: 1.5, expect: '45%'}, 48 ]); 49 50 test_no_interpolation({ 51 property: 'text-size-adjust', 52 from: 'initial', 53 to: '70%', 54 }); 55 56 test_interpolation({ 57 property: 'text-size-adjust', 58 from: 'inherit', // 70% 59 to: '50%', 60 }, [ 61 {at: -2, expect: '110%'}, 62 {at: -0.3, expect: '76%'}, 63 {at: 0, expect: '70%'}, 64 {at: 0.3, expect: '64%'}, 65 {at: 0.6, expect: '58%'}, 66 {at: 1, expect: '50%'}, 67 {at: 1.5, expect: '40%'}, 68 ]); 69 70 test_interpolation({ 71 property: 'text-size-adjust', 72 from: 'unset', 73 to: '50%', 74 }, [ 75 {at: -2, expect: '110%'}, 76 {at: -0.3, expect: '76%'}, 77 {at: 0, expect: '70%'}, 78 {at: 0.3, expect: '64%'}, 79 {at: 0.6, expect: '58%'}, 80 {at: 1, expect: '50%'}, 81 {at: 1.5, expect: '40%'}, 82 ]); 83 84 85 test_interpolation({ 86 property: 'text-size-adjust', 87 from: '10%', 88 to: '0%' 89 }, [ 90 {at: -2, expect: '30%'}, 91 {at: -0.3, expect: '13%'}, 92 {at: 0, expect: '10%'}, 93 {at: 0.3, expect: '7%'}, 94 {at: 0.6, expect: '4%'}, 95 {at: 1, expect: '0%'}, 96 {at: 1.5, expect: '0%'}, // text-size-adjust can't be negative 97 ]); 98 99 test_no_interpolation({ 100 property: 'text-size-adjust', 101 from: 'none', 102 to: '100%' 103 }); 104 </script>