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