background-size-interpolation.html (6065B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size"> 4 <meta name="test" content="background-size 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-size: 100px 100px; 13 } 14 .target { 15 width: 80px; 16 height: 100px; 17 display: inline-block; 18 border: 10px solid black; 19 background-repeat: no-repeat; 20 background-image: url(../resources/stripes-100.png), 21 url(../resources/stripes-100.png), 22 url(../resources/blue-100.png), 23 url(../resources/green-100.png); 24 background-position: left top, right top, left bottom, right bottom; 25 background-size: 10px 10px; 26 } 27 .expected { 28 margin-right: 10px; 29 border-color: green; 30 } 31 </style> 32 33 <body></body> 34 35 <script> 36 // neutral 37 test_interpolation({ 38 property: 'background-size', 39 from: neutralKeyframe, 40 to: '20px 20px, 0px 0px', 41 }, [ 42 {at: -0.25, expect: ' 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px'}, 43 {at: 0, expect: '10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px'}, 44 {at: 0.25, expect: '12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px'}, 45 {at: 0.5, expect: '15.0px 15.0px, 5.0px 5.0px, 15.0px 15.0px, 5.0px 5.0px'}, 46 {at: 0.75, expect: '17.5px 17.5px, 2.5px 2.5px, 17.5px 17.5px, 2.5px 2.5px'}, 47 {at: 1, expect: '20.0px 20.0px, 0.0px 0.0px, 20.0px 20.0px, 0.0px 0.0px'}, 48 {at: 1.25, expect: '22.5px 22.5px, 0.0px 0.0px, 22.5px 22.5px, 0.0px 0.0px'}, 49 ]); 50 51 // initial 52 test_no_interpolation({ 53 property: 'background-size', 54 from: 'initial', 55 to: '20px 20px, 0px 0px', 56 }); 57 58 // inherit 59 test_interpolation({ 60 property: 'background-size', 61 from: 'inherit', 62 to: '20px 20px, 0px 0px', 63 }, [ 64 {at: -0.25, expect: '120px 120px, 125px 125px, 120px 120px, 125px 125px'}, 65 {at: 0, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 66 {at: 0.25, expect: ' 80px 80px, 75px 75px, 80px 80px, 75px 75px'}, 67 {at: 0.5, expect: ' 60px 60px, 50px 50px, 60px 60px, 50px 50px'}, 68 {at: 0.75, expect: ' 40px 40px, 25px 25px, 40px 40px, 25px 25px'}, 69 {at: 1, expect: ' 20px 20px, 0px 0px, 20px 20px, 0px 0px'}, 70 {at: 1.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 71 ]); 72 73 // unset 74 test_no_interpolation({ 75 property: 'background-size', 76 from: 'unset', 77 to: '20px 20px, 0px 0px', 78 }); 79 80 // Matched keywords in size value list. 81 test_interpolation({ 82 property: 'background-size', 83 from: '0px auto, 0px 0px, contain, cover', 84 to: '40px auto, 40px 40px, contain, cover', 85 }, [ 86 {at: -0.25, expect: ' 0px auto, 0px 0px, contain, cover'}, 87 {at: 0, expect: ' 0px auto, 0px 0px, contain, cover'}, 88 {at: 0.25, expect: '10px auto, 10px 10px, contain, cover'}, 89 {at: 0.5, expect: '20px auto, 20px 20px, contain, cover'}, 90 {at: 0.75, expect: '30px auto, 30px 30px, contain, cover'}, 91 {at: 1, expect: '40px auto, 40px 40px, contain, cover'}, 92 {at: 1.25, expect: '50px auto, 50px 50px, contain, cover'}, 93 ]); 94 95 // Mismatched keywords in size value list. 96 test_no_interpolation({ 97 property: 'background-size', 98 from: '0px 0px, 0px 0px, contain, cover', 99 to: '40px 40px, 40px 40px, cover, contain', 100 }); 101 102 test_no_interpolation({ 103 property: 'background-size', 104 from: '0px auto, 0px 0px', 105 to: 'auto 40px, 40px 40px', 106 }); 107 108 // Equal number of size values as background images. 109 test_interpolation({ 110 property: 'background-size', 111 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 112 to: '20px 20px, 40px 40px, 60px 60px, 100px 100px', 113 }, [ 114 {at: -0.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 115 {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 116 {at: 0.25, expect: ' 5px 5px, 10px 10px, 15px 15px, 25px 25px'}, 117 {at: 0.5, expect: '10px 10px, 20px 20px, 30px 30px, 50px 50px'}, 118 {at: 0.75, expect: '15px 15px, 30px 30px, 45px 45px, 75px 75px'}, 119 {at: 1, expect: '20px 20px, 40px 40px, 60px 60px, 100px 100px'}, 120 {at: 1.25, expect: '25px 25px, 50px 50px, 75px 75px, 125px 125px'}, 121 ]); 122 123 // Single size value repeated over background images. 124 test_interpolation({ 125 property: 'background-size', 126 from: '0px 0px', 127 to: '80px 80px', 128 }, [ 129 {at: -0.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 130 {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 131 {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 132 {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 133 {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 134 {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 135 {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 136 ]); 137 138 test_interpolation({ 139 property: 'background-size', 140 from: '0px', 141 to: '80px', 142 }, [ 143 {at: -0.25, expect: ' 0px, 0px, 0px, 0px'}, 144 {at: 0, expect: ' 0px, 0px, 0px, 0px'}, 145 {at: 0.25, expect: ' 20px, 20px, 20px, 20px'}, 146 {at: 0.5, expect: ' 40px, 40px, 40px, 40px'}, 147 {at: 0.75, expect: ' 60px, 60px, 60px, 60px'}, 148 {at: 1, expect: ' 80px, 80px, 80px, 80px'}, 149 {at: 1.25, expect: '100px, 100px, 100px, 100px'}, 150 ]); 151 152 // Mismatched numbers of size values. 153 test_interpolation({ 154 property: 'background-size', 155 from: '0px 0px, 80px 0px', 156 to: '40px 40px, 80px 80px, 0px 80px', 157 }, [ 158 {at: -0.25, expect: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'}, 159 {at: 0, expect: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 160 {at: 0.25, expect: '10px 10px, 80px 20px, 0px 20px, 70px 10px'}, 161 {at: 0.5, expect: '20px 20px, 80px 40px, 0px 40px, 60px 20px'}, 162 {at: 0.75, expect: '30px 30px, 80px 60px, 0px 60px, 50px 30px'}, 163 {at: 1, expect: '40px 40px, 80px 80px, 0px 80px, 40px 40px'}, 164 {at: 1.25, expect: '50px 50px, 80px 100px, 0px 100px, 30px 50px'}, 165 ]); 166 </script>