border-image-outset-interpolation.html (2870B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>border-image-outset interpolation</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 <style> 12 .parent { 13 border-image-outset: 10px; 14 } 15 .target { 16 width: 50px; 17 height: 50px; 18 background-color: black; 19 display: inline-block; 20 border: 25px; 21 margin-right: 50px; 22 border-image-slice: 30%; 23 background-clip: content-box; 24 border-image-source: linear-gradient(45deg, pink, blue, white, black, green); 25 border-image-outset: 1px; 26 } 27 .expected { 28 background-color: green; 29 } 30 </style> 31 32 <body></body> 33 34 <script> 35 test_interpolation({ 36 property: 'border-image-outset', 37 from: neutralKeyframe, 38 to: '2px', 39 }, [ 40 {at: -0.3, expect: '0.7px'}, 41 {at: 0, expect: '1px'}, 42 {at: 0.3, expect: '1.3px'}, 43 {at: 0.6, expect: '1.6px'}, 44 {at: 1, expect: '2px'}, 45 {at: 1.5, expect: '2.5px'}, 46 ]); 47 48 test_interpolation({ 49 property: 'border-image-outset', 50 from: 'initial', 51 to: '2', 52 }, [ 53 {at: -0.3, expect: '0'}, // Non-negative 54 {at: 0, expect: '0'}, 55 {at: 0.3, expect: '0.6'}, 56 {at: 0.6, expect: '1.2'}, 57 {at: 1, expect: '2'}, 58 {at: 1.5, expect: '3'}, 59 ]); 60 61 test_interpolation({ 62 property: 'border-image-outset', 63 from: 'inherit', 64 to: '2px', 65 }, [ 66 {at: -0.3, expect: '12.4px'}, 67 {at: 0, expect: '10px'}, 68 {at: 0.3, expect: '7.6px'}, 69 {at: 0.6, expect: '5.2px'}, 70 {at: 1, expect: '2px'}, 71 {at: 1.5, expect: '0px'}, 72 ]); 73 74 test_interpolation({ 75 property: 'border-image-outset', 76 from: 'unset', 77 to: '2', 78 }, [ 79 {at: -0.3, expect: '0'}, // Non-negative 80 {at: 0, expect: '0'}, 81 {at: 0.3, expect: '0.6'}, 82 {at: 0.6, expect: '1.2'}, 83 {at: 1, expect: '2'}, 84 {at: 1.5, expect: '3'}, 85 ]); 86 87 test_interpolation({ 88 property: 'border-image-outset', 89 from: '0px', 90 to: '5px', 91 }, [ 92 {at: -0.3, expect: '0px'}, // Non-negative 93 {at: 0, expect: '0px'}, 94 {at: 0.3, expect: '1.5px'}, 95 {at: 0.6, expect: '3px'}, 96 {at: 1, expect: '5px'}, 97 {at: 1.5, expect: '7.5px'}, 98 ]); 99 100 test_interpolation({ 101 property: 'border-image-outset', 102 from: '0', 103 to: '1', 104 }, [ 105 {at: -0.3, expect: '0'}, // Non-negative 106 {at: 0, expect: '0'}, 107 {at: 0.3, expect: '0.3'}, 108 {at: 0.6, expect: '0.6'}, 109 {at: 1, expect: '1'}, 110 {at: 1.5, expect: '1.5'}, 111 ]); 112 113 test_interpolation({ 114 property: 'border-image-outset', 115 from: '1 2 3px 4px', 116 to: '101 102 103px 104px', 117 }, [ 118 {at: -0.3, expect: '0 0 0px 0px'}, // Non-negative 119 {at: 0, expect: '1 2 3px 4px'}, 120 {at: 0.3, expect: '31 32 33px 34px'}, 121 {at: 0.6, expect: '61 62 63px 64px'}, 122 {at: 1, expect: '101 102 103px 104px'}, 123 {at: 1.5, expect: '151 152 153px 154px'}, 124 ]); 125 </script>