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