background-position-origin-interpolation.html (5777B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> 4 <meta name="test" content="background-position animation handles origin parameters"> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/interpolation-testcommon.js"></script> 9 10 <style> 11 .parent { 12 background-position: 80px 80px; 13 } 14 .target { 15 border: 3px solid skyblue; 16 width: 100px; 17 height: 100px; 18 background-image: linear-gradient(to right, green, green); 19 background-size: 20px 20px; 20 background-repeat: no-repeat; 21 background-position: 10px 10px; 22 display: inline-block; 23 } 24 25 .actual { 26 background-image: linear-gradient(to right, red, red); 27 } 28 .expected { 29 margin-left: -106px; 30 } 31 </style> 32 33 <body></body> 34 35 <script> 36 // neutral 37 test_interpolation({ 38 property: 'background-position', 39 from: neutralKeyframe, 40 to: 'left 20px top 20px', 41 }, [ 42 {at: 0, expect: '10px 10px'}, 43 {at: 0.25, expect: '12.5px 12.5px'}, 44 {at: 0.5, expect: '15px 15px'}, 45 {at: 0.75, expect: '17.5px 17.5px'}, 46 {at: 1, expect: '20px 20px'}, 47 ]); 48 49 // initial 50 test_interpolation({ 51 property: 'background-position', 52 from: 'initial', 53 to: 'left 20px top 20px', 54 }, [ 55 {at: 0, expect: '0% 0%'}, 56 {at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'}, 57 {at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'}, 58 {at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'}, 59 {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, 60 ]); 61 62 // inherit 63 test_interpolation({ 64 property: 'background-position', 65 from: 'inherit', 66 to: 'left 20px top 20px', 67 }, [ 68 {at: 0, expect: '80px 80px'}, 69 {at: 0.25, expect: '65px 65px'}, 70 {at: 0.5, expect: '50px 50px'}, 71 {at: 0.75, expect: '35px 35px'}, 72 {at: 1, expect: '20px 20px'}, 73 ]); 74 75 // unset 76 test_interpolation({ 77 property: 'background-position', 78 from: 'unset', 79 to: 'left 20px top 20px', 80 }, [ 81 {at: 0, expect: '0% 0%'}, 82 {at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'}, 83 {at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'}, 84 {at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'}, 85 {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, 86 ]); 87 88 // left-top 89 test_interpolation({ 90 property: 'background-position', 91 from: 'center center', 92 to: 'left 20px top 20px', 93 }, [ 94 {at: 0, expect: '50% 50%'}, 95 {at: 0.25, expect: 'calc(5px + 37.5%) calc(5px + 37.5%)'}, 96 {at: 0.5, expect: 'calc(10px + 25%) calc(10px + 25%)'}, 97 {at: 0.75, expect: 'calc(15px + 12.5%) calc(15px + 12.5%)'}, 98 {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, 99 ]); 100 101 // center-top 102 test_interpolation({ 103 property: 'background-position', 104 from: 'center center', 105 to: 'center top 20px', 106 }, [ 107 {at: 0, expect: '50% 50%'}, 108 {at: 0.25, expect: '50% calc(5px + 37.5%)'}, 109 {at: 0.5, expect: '50% calc(10px + 25%)'}, 110 {at: 0.75, expect: '50% calc(15px + 12.5%)'}, 111 {at: 1, expect: '50% calc(0% + 20px)'}, 112 ]); 113 114 // right-top 115 test_interpolation({ 116 property: 'background-position', 117 from: 'center center', 118 to: 'right 20px top 20px', 119 }, [ 120 {at: 0, expect: '50% 50%'}, 121 {at: 0.25, expect: 'calc(-5px + 62.5%) calc(5px + 37.5%)'}, 122 {at: 0.5, expect: 'calc(-10px + 75%) calc(10px + 25%)'}, 123 {at: 0.75, expect: 'calc(-15px + 87.5%) calc(15px + 12.5%)'}, 124 {at: 1, expect: 'calc(-20px + 100%) calc(0% + 20px)'}, 125 ]); 126 127 // left-center 128 test_interpolation({ 129 property: 'background-position', 130 from: 'center center', 131 to: 'left 20px center', 132 }, [ 133 {at: 0, expect: '50% 50%'}, 134 {at: 0.25, expect: 'calc(5px + 37.5%) 50%'}, 135 {at: 0.5, expect: 'calc(10px + 25%) 50%'}, 136 {at: 0.75, expect: 'calc(15px + 12.5%) 50%'}, 137 {at: 1, expect: 'calc(0% + 20px) 50%'}, 138 ]); 139 140 // center-center 141 test_interpolation({ 142 property: 'background-position', 143 from: 'center center', 144 to: 'center center', 145 }, [ 146 {at: 0, expect: '50% 50%'}, 147 {at: 0.25, expect: '50% 50%'}, 148 {at: 0.5, expect: '50% 50%'}, 149 {at: 0.75, expect: '50% 50%'}, 150 {at: 1, expect: '50% 50%'}, 151 ]); 152 153 // right-center 154 test_interpolation({ 155 property: 'background-position', 156 from: 'center center', 157 to: 'right 20px center', 158 }, [ 159 {at: 0, expect: '50% 50%'}, 160 {at: 0.25, expect: 'calc(-5px + 62.5%) 50%'}, 161 {at: 0.5, expect: 'calc(-10px + 75%) 50%'}, 162 {at: 0.75, expect: 'calc(-15px + 87.5%) 50%'}, 163 {at: 1, expect: 'calc(-20px + 100%) 50%'}, 164 ]); 165 166 // left-bottom 167 test_interpolation({ 168 property: 'background-position', 169 from: 'center center', 170 to: 'left 20px bottom 20px', 171 }, [ 172 {at: 0, expect: '50% 50%'}, 173 {at: 0.25, expect: 'calc(5px + 37.5%) calc(-5px + 62.5%)'}, 174 {at: 0.5, expect: 'calc(10px + 25%) calc(-10px + 75%)'}, 175 {at: 0.75, expect: 'calc(15px + 12.5%) calc(-15px + 87.5%)'}, 176 {at: 1, expect: 'calc(0% + 20px) calc(-20px + 100%)'}, 177 ]); 178 179 // center-bottom 180 test_interpolation({ 181 property: 'background-position', 182 from: 'center center', 183 to: 'center bottom 20px', 184 }, [ 185 {at: 0, expect: '50% 50%'}, 186 {at: 0.25, expect: '50% calc(-5px + 62.5%)'}, 187 {at: 0.5, expect: '50% calc(-10px + 75%)'}, 188 {at: 0.75, expect: '50% calc(-15px + 87.5%)'}, 189 {at: 1, expect: '50% calc(-20px + 100%)'}, 190 ]); 191 192 // right-bottom 193 test_interpolation({ 194 property: 'background-position', 195 from: 'center center', 196 to: 'right 20px bottom 20px', 197 }, [ 198 {at: 0, expect: '50% 50%'}, 199 {at: 0.25, expect: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'}, 200 {at: 0.5, expect: 'calc(-10px + 75%) calc(-10px + 75%)'}, 201 {at: 0.75, expect: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'}, 202 {at: 1, expect: 'calc(-20px + 100%) calc(-20px + 100%)'}, 203 ]); 204 205 // Single values 206 test_interpolation({ 207 property: 'background-position', 208 from: 'center', 209 to: 'bottom', 210 }, [ 211 {at: 0, expect: '50% 50%'}, 212 {at: 0.25, expect: '50% 62.5%'}, 213 {at: 0.5, expect: '50% 75%'}, 214 {at: 0.75, expect: '50% 87.5%'}, 215 {at: 1, expect: '50% 100%'}, 216 ]); 217 </script>