background-position-interpolation.html (7043B)
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 supports animation as a repeatable list"> 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: 60px 60px; 13 } 14 .target { 15 width: 120px; 16 height: 120px; 17 display: inline-block; 18 border: 2px solid black; 19 background-repeat: no-repeat; 20 background-image: radial-gradient(20px circle at 20px 20px, red 18px, transparent), 21 radial-gradient(20px circle at 20px 20px, yellow 18px, transparent), 22 radial-gradient(20px circle at 20px 20px, lime 18px, transparent), 23 radial-gradient(20px circle at 20px 20px, blue 18px, transparent); 24 background-position: 40px 40px; 25 } 26 .expected { 27 margin-right: 10px; 28 } 29 </style> 30 31 <body></body> 32 33 <script> 34 test_interpolation({ 35 property: 'background-position', 36 from: neutralKeyframe, 37 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 38 }, [ 39 {at: -0.25, expect: '30px 30px, 30px 30px, 30px 30px, 30px 30px'}, 40 {at: 0, expect: '40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 41 {at: 0.25, expect: '50px 50px, 50px 50px, 50px 50px, 50px 50px'}, 42 {at: 0.5, expect: '60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 43 {at: 0.75, expect: '70px 70px, 70px 70px, 70px 70px, 70px 70px'}, 44 {at: 1, expect: '80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 45 {at: 1.25, expect: '90px 90px, 90px 90px, 90px 90px, 90px 90px'}, 46 ]); 47 48 // background-position's initial value is 0% 0%, and calcs involving percentages 49 // are never resolved by the calc spec (even when the percentage is 0%). 50 test_interpolation({ 51 property: 'background-position', 52 from: 'initial', 53 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 54 }, [ 55 {at: -0.25, expect: 'calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px)'}, 56 {at: 0, expect: '0% 0%, 0% 0%, 0% 0%, 0% 0%'}, 57 {at: 0.25, expect: 'calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px)'}, 58 {at: 0.5, expect: 'calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px)'}, 59 {at: 0.75, expect: 'calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px)'}, 60 {at: 1, expect: 'calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px)'}, 61 {at: 1.25, expect: 'calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px)'}, 62 ]); 63 64 test_interpolation({ 65 property: 'background-position', 66 from: 'inherit', 67 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 68 }, [ 69 {at: -0.25, expect: '55px 55px, 55px 55px, 55px 55px, 55px 55px'}, 70 {at: 0, expect: '60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 71 {at: 0.25, expect: '65px 65px, 65px 65px, 65px 65px, 65px 65px'}, 72 {at: 0.5, expect: '70px 70px, 70px 70px, 70px 70px, 70px 70px'}, 73 {at: 0.75, expect: '75px 75px, 75px 75px, 75px 75px, 75px 75px'}, 74 {at: 1, expect: '80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 75 {at: 1.25, expect: '85px 85px, 85px 85px, 85px 85px, 85px 85px'}, 76 ]); 77 78 // background-position is not inherited, so 'unset' is equivalent to initial. 79 test_interpolation({ 80 property: 'background-position', 81 from: 'unset', 82 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 83 }, [ 84 {at: -0.25, expect: 'calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px)'}, 85 {at: 0, expect: '0% 0%, 0% 0%, 0% 0%, 0% 0%'}, 86 {at: 0.25, expect: 'calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px)'}, 87 {at: 0.5, expect: 'calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px)'}, 88 {at: 0.75, expect: 'calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px)'}, 89 {at: 1, expect: 'calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px)'}, 90 {at: 1.25, expect: 'calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px)'}, 91 ]); 92 93 // Test equal number of position values as background images. 94 test_interpolation({ 95 property: 'background-position', 96 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 97 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 98 }, [ 99 {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 100 {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 101 {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 102 {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 103 {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 104 {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 105 {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 106 ]); 107 108 // Test single position value repeated over background images. 109 test_interpolation({ 110 property: 'background-position', 111 from: 'top 0px left 0px', 112 to: 'left 80px top 80px', 113 }, [ 114 {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 115 {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 116 {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 117 {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 118 {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 119 {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 120 {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 121 ]); 122 123 // Test mismatched numbers of position values. 124 test_interpolation({ 125 property: 'background-position', 126 from: '0px 0px, 80px 0px', 127 to: '40px 40px, 80px 80px, 0px 80px', 128 }, [ 129 {at: -0.25, expect: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'}, 130 {at: 0, expect: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 131 {at: 0.25, expect: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'}, 132 {at: 0.5, expect: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'}, 133 {at: 0.75, expect: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'}, 134 {at: 1, expect: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'}, 135 {at: 1.25, expect: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'}, 136 ]); 137 </script>