mask-border-width-composition.html (3759B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>mask-border-width composition</title> 4 <link rel="help" href="https://drafts.fxtf.org/css-masking/#propdef-mask-border-width"> 5 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 6 <meta name="assert" content="mask-border-width supports animation by computed value"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 12 <body> 13 <script> 14 test_composition({ 15 property: 'mask-border-width', 16 underlying: '1 2 3 4', 17 addFrom: '1 2 3 4', 18 addTo: '101 102 103 104', 19 }, [ 20 {at: -0.25, expect: '0'}, // Non-negative. 21 {at: 0, expect: '2 4 6 8'}, 22 {at: 0.25, expect: '27 29 31 33'}, 23 {at: 0.5, expect: '52 54 56 58'}, 24 {at: 0.75, expect: '77 79 81 83'}, 25 {at: 1, expect: '102 104 106 108'}, 26 {at: 1.25, expect: '127 129 131 133'}, 27 ]); 28 29 test_composition({ 30 property: 'mask-border-width', 31 underlying: '100 200 300 400', 32 addFrom: '100', 33 addTo: '200 300 500', 34 }, [ 35 {at: -0.25, expect: '175 250 300 450'}, 36 {at: 0, expect: '200 300 400 500'}, 37 {at: 0.25, expect: '225 350 500 550'}, 38 {at: 0.5, expect: '250 400 600 600'}, 39 {at: 0.75, expect: '275 450 700 650'}, 40 {at: 1, expect: '300 500 800 700'}, 41 {at: 1.25, expect: '325 550 900 750'}, 42 ]); 43 44 test_composition({ 45 property: 'mask-border-width', 46 underlying: '1 2 3px 4%', 47 addFrom: '1 2 3px 4%', 48 addTo: '101 102 103px 104%', 49 }, [ 50 {at: -0.25, expect: '0 0 0px 0%'}, // Non-negative. 51 {at: 0, expect: '2 4 6px 8%'}, 52 {at: 0.25, expect: '27 29 31px 33%'}, 53 {at: 0.5, expect: '52 54 56px 58%'}, 54 {at: 0.75, expect: '77 79 81px 83%'}, 55 {at: 1, expect: '102 104 106px 108%'}, 56 {at: 1.25, expect: '127 129 131px 133%'}, 57 ]); 58 59 test_composition({ 60 property: 'mask-border-width', 61 underlying: '10px 20px', 62 addFrom: '190px 180px 290px 280px', 63 addTo: '90px 80px', 64 }, [ 65 {at: -0.25, expect: '225px 225px 350px 350px'}, 66 {at: 0, expect: '200px 200px 300px 300px'}, 67 {at: 0.25, expect: '175px 175px 250px 250px'}, 68 {at: 0.5, expect: '150px 150px 200px 200px'}, 69 {at: 0.75, expect: '125px 125px 150px 150px'}, 70 {at: 1, expect: '100px'}, 71 {at: 1.25, expect: '75px 75px 50px 50px'}, 72 ]); 73 74 test_composition({ 75 property: 'mask-border-width', 76 underlying: '10 20px', 77 replaceFrom: '100 100px', 78 addTo: '190 180px', 79 }, [ 80 {at: -0.25, expect: '75 75px'}, 81 {at: 0, expect: '100 100px'}, 82 {at: 0.25, expect: '125 125px'}, 83 {at: 0.5, expect: '150 150px'}, 84 {at: 0.75, expect: '175 175px'}, 85 {at: 1, expect: '200 200px'}, 86 {at: 1.25, expect: '225 225px'}, 87 ]); 88 89 test_composition({ 90 property: 'mask-border-width', 91 underlying: '10px 20', 92 addFrom: '90px 80', 93 replaceTo: '0px 0 0px 0', 94 }, [ 95 {at: -0.25, expect: '125px 125'}, 96 {at: 0, expect: '100px 100'}, 97 {at: 0.25, expect: '75px 75'}, 98 {at: 0.5, expect: '50px 50'}, 99 {at: 0.75, expect: '25px 25'}, 100 {at: 1, expect: '0px 0'}, 101 {at: 1.25, expect: '0px 0'}, // Non-negative. 102 ]); 103 104 test_composition({ 105 property: 'mask-border-width', 106 underlying: '10 20', 107 addFrom: '100px 150px', 108 addTo: '200px 250px', 109 }, [ 110 {at: -0.25, expect: '75px 125px'}, 111 {at: 0, expect: '100px 150px'}, 112 {at: 0.25, expect: '125px 175px'}, 113 {at: 0.5, expect: '150px 200px'}, 114 {at: 0.75, expect: '175px 225px'}, 115 {at: 1, expect: '200px 250px'}, 116 {at: 1.25, expect: '225px 275px'}, 117 ]); 118 119 test_composition({ 120 property: 'mask-border-width', 121 underlying: '10 20', 122 addFrom: '100 150px', 123 addTo: '200% 250', 124 }, [ 125 {at: -0.25, expect: '100 150px'}, 126 {at: 0, expect: '100 150px'}, 127 {at: 0.25, expect: '100 150px'}, 128 {at: 0.5, expect: '200% 250'}, 129 {at: 0.75, expect: '200% 250'}, 130 {at: 1, expect: '200% 250'}, 131 {at: 1.25, expect: '200% 250'}, 132 ]); 133 </script> 134 </body>