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