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