text-indent-composition.html (2255B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>letter-spacing composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> 5 <meta name="test" content="text-indent supports animation by computed value type"> 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 <body></body> 12 <script> 13 test_composition({ 14 property: 'text-indent', 15 underlying: '100%', 16 addFrom: '50px', 17 addTo: '150px', 18 }, [ 19 {at: -0.3, expect: 'calc(100% + 20px)'}, 20 {at: 0, expect: 'calc(100% + 50px)'}, 21 {at: 0.3, expect: 'calc(100% + 80px)'}, 22 {at: 0.6, expect: 'calc(100% + 110px)'}, 23 {at: 1, expect: 'calc(100% + 150px)'}, 24 {at: 1.5, expect: 'calc(100% + 200px)'}, 25 ]); 26 27 test_composition({ 28 property: 'text-indent', 29 underlying: '250px', 30 addFrom: '50px', 31 replaceTo: '100px', 32 }, [ 33 {at: -0.3, expect: '360px'}, 34 {at: 0, expect: '300px'}, 35 {at: 0.3, expect: '240px'}, 36 {at: 0.6, expect: '180px'}, 37 {at: 1, expect: '100px'}, 38 {at: 1.5, expect: '0px'}, 39 ]); 40 41 test_composition({ 42 property: 'text-indent', 43 underlying: '50%', 44 replaceFrom: '-100%', 45 addTo: '50%', 46 }, [ 47 {at: -0.3, expect: '-160%'}, 48 {at: 0, expect: '-100%'}, 49 {at: 0.3, expect: '-40%'}, 50 {at: 0.5, expect: '0%'}, 51 {at: 0.6, expect: '20%'}, 52 {at: 1, expect: '100%'}, 53 {at: 1.5, expect: '200%'}, 54 ]); 55 56 test_composition({ 57 property: 'text-indent', 58 underlying: '250px', 59 addFrom: '50px each-line hanging', 60 replaceTo: '150px hanging each-line', 61 }, [ 62 {at: -0.3, expect: '20px hanging each-line'}, 63 {at: 0, expect: '50px hanging each-line'}, 64 {at: 0.3, expect: '80px hanging each-line'}, 65 {at: 0.6, expect: '110px hanging each-line'}, 66 {at: 1, expect: '150px hanging each-line'}, 67 {at: 1.5, expect: '200px hanging each-line'}, 68 ]); 69 70 test_composition({ 71 property: 'text-indent', 72 underlying: '250px each-line', 73 addFrom: '50px each-line', 74 replaceTo: '150px hanging', 75 }, [ 76 {at: -0.3, expect: '300px each-line'}, 77 {at: 0, expect: '300px each-line'}, 78 {at: 0.3, expect: '300px each-line'}, 79 {at: 0.6, expect: '150px hanging'}, 80 {at: 1, expect: '150px hanging'}, 81 {at: 1.5, expect: '150px hanging'}, 82 ]); 83 </script> 84 </body>