tab-size-interpolation.html (2364B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property"> 4 <meta name="test" content="tab-size 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 .parent { 12 tab-size: 20; 13 } 14 .target { 15 font: 10px sans-serif; 16 tab-size: 5; 17 } 18 .expected { 19 color: green; 20 } 21 </style> 22 23 <body> 24 <template id="target-template">T</template> 25 </body> 26 27 <script> 28 test_interpolation({ 29 property: 'tab-size', 30 from: neutralKeyframe, 31 to: 10, 32 }, [ 33 {at: -0.3, expect: '3.5'}, 34 {at: 0, expect: '5'}, 35 {at: 0.3, expect: '6.5'}, 36 {at: 0.6, expect: '8'}, 37 {at: 1, expect: '10'}, 38 {at: 1.5, expect: '12.5'}, 39 ]); 40 41 test_interpolation({ 42 property: 'tab-size', 43 from: 'initial', 44 to: 10, 45 }, [ 46 {at: -0.3, expect: '7.4'}, 47 {at: 0, expect: '8'}, 48 {at: 0.3, expect: '8.6'}, 49 {at: 0.6, expect: '9.2'}, 50 {at: 1, expect: '10'}, 51 {at: 1.5, expect: '11'}, 52 ]); 53 54 test_interpolation({ 55 property: 'tab-size', 56 from: 'inherit', 57 to: 10, 58 }, [ 59 {at: -0.3, expect: '23'}, 60 {at: 0, expect: '20'}, 61 {at: 0.3, expect: '17'}, 62 {at: 0.6, expect: '14'}, 63 {at: 1, expect: '10'}, 64 {at: 1.5, expect: '5'}, 65 ]); 66 67 test_interpolation({ 68 property: 'tab-size', 69 from: 'unset', 70 to: 10, 71 }, [ 72 {at: -0.3, expect: '23'}, 73 {at: 0, expect: '20'}, 74 {at: 0.3, expect: '17'}, 75 {at: 0.6, expect: '14'}, 76 {at: 1, expect: '10'}, 77 {at: 1.5, expect: '5'}, 78 ]); 79 80 test_interpolation({ 81 property: 'tab-size', 82 from: 0, 83 to: 10, 84 }, [ 85 {at: -0.3, expect: '0'}, 86 {at: 0, expect: '0'}, 87 {at: 0.3, expect: '3'}, 88 {at: 0.6, expect: '6'}, 89 {at: 1, expect: '10'}, 90 {at: 1.5, expect: '15'}, 91 ]); 92 93 test_interpolation({ 94 property: 'tab-size', 95 from: 4, 96 to: 10, 97 }, [ 98 {at: -0.3, expect: '2.2'}, 99 {at: 0, expect: '4'}, 100 {at: 0.3, expect: '5.8'}, 101 {at: 0.6, expect: '7.6'}, 102 {at: 1, expect: '10'}, 103 {at: 1.5, expect: '13'}, 104 ]); 105 106 test_interpolation({ 107 property: 'tab-size', 108 from: '1px', 109 to: '10px', 110 }, [ 111 {at: -0.3, expect: '0px'}, 112 {at: 0, expect: '1px'}, 113 {at: 0.3, expect: '3.7px'}, 114 {at: 0.6, expect: '6.4px'}, 115 {at: 1, expect: '10px'}, 116 {at: 1.5, expect: '14.5px'}, 117 ]); 118 119 test_no_interpolation({ 120 property: 'tab-size', 121 from: '1', 122 to: '10px', 123 }); 124 125 </script>