list-style-image-interpolation.html (4628B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>list-style-image interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-image"> 5 <meta name="assert" content="list-style-image supports animation"> 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 list-style-image: url(../resources/blue-20.png); 14 } 15 .target { 16 background-color: black; 17 width: 100px; 18 list-style-image: url(../resources/green-20.png); 19 } 20 .expected { 21 background-color: green; 22 } 23 </style> 24 25 <body> 26 <template id="target-template"> 27 <ul> 28 <li class="target"></li> 29 </ul> 30 </template> 31 <script> 32 test_interpolation({ 33 property: 'list-style-image', 34 from: neutralKeyframe, 35 to: 'url(../resources/stripes-20.png)', 36 }, [ 37 {at: -0.3, expect: 'url(../resources/green-20.png)'}, 38 {at: 0, expect: 'url(../resources/green-20.png)'}, 39 {at: 0.3, expect: 'url(../resources/green-20.png)'}, 40 {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, 41 {at: 1, expect: 'url(../resources/stripes-20.png)'}, 42 {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, 43 ]); 44 45 test_interpolation({ 46 property: 'list-style-image', 47 from: 'initial', 48 to: 'url(../resources/stripes-20.png)', 49 }, [ 50 {at: -0.3, expect: 'none'}, 51 {at: 0, expect: 'none'}, 52 {at: 0.3, expect: 'none'}, 53 {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, 54 {at: 1, expect: 'url(../resources/stripes-20.png)'}, 55 {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, 56 ]); 57 58 test_interpolation({ 59 property: 'list-style-image', 60 from: 'inherit', 61 to: 'url(../resources/stripes-20.png)', 62 }, [ 63 {at: -0.3, expect: 'url(../resources/blue-20.png)'}, 64 {at: 0, expect: 'url(../resources/blue-20.png)'}, 65 {at: 0.3, expect: 'url(../resources/blue-20.png)'}, 66 {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, 67 {at: 1, expect: 'url(../resources/stripes-20.png)'}, 68 {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, 69 ]); 70 71 test_interpolation({ 72 property: 'list-style-image', 73 from: 'unset', 74 to: 'url(../resources/stripes-20.png)', 75 }, [ 76 {at: -0.3, expect: 'url(../resources/blue-20.png)'}, 77 {at: 0, expect: 'url(../resources/blue-20.png)'}, 78 {at: 0.3, expect: 'url(../resources/blue-20.png)'}, 79 {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, 80 {at: 1, expect: 'url(../resources/stripes-20.png)'}, 81 {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, 82 ]); 83 84 // Constant image 85 test_no_interpolation({ 86 property: 'list-style-image', 87 from: 'url(../resources/stripes-20.png)', 88 to: 'url(../resources/stripes-20.png)', 89 }); 90 91 // None to image 92 test_interpolation({ 93 property: 'list-style-image', 94 from: 'none', 95 to: 'url(../resources/stripes-20.png)', 96 }, [ 97 {at: -0.3, expect: 'none'}, 98 {at: 0, expect: 'none'}, 99 {at: 0.3, expect: 'none'}, 100 {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, 101 {at: 1, expect: 'url(../resources/stripes-20.png)'}, 102 {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, 103 ]); 104 105 // Image to image 106 test_interpolation({ 107 property: 'list-style-image', 108 from: 'url(../resources/green-20.png)', 109 to: 'url(../resources/stripes-20.png)', 110 }, [ 111 {at: -0.3, expect: 'url(../resources/green-20.png)'}, 112 {at: 0, expect: 'url(../resources/green-20.png)'}, 113 {at: 0.3, expect: 'url(../resources/green-20.png)'}, 114 {at: 0.6, expect: 'url(../resources/stripes-20.png)'}, 115 {at: 1, expect: 'url(../resources/stripes-20.png)'}, 116 {at: 1.5, expect: 'url(../resources/stripes-20.png)'}, 117 ]); 118 119 // Image to gradient 120 test_interpolation({ 121 property: 'list-style-image', 122 from: 'url(../resources/green-20.png)', 123 to: 'linear-gradient(45deg, blue, orange)', 124 }, [ 125 {at: -0.3, expect: 'url(../resources/green-20.png)'}, 126 {at: 0, expect: 'url(../resources/green-20.png)'}, 127 {at: 0.3, expect: 'url(../resources/green-20.png)'}, 128 {at: 0.6, expect: 'linear-gradient(45deg, blue, orange)'}, 129 {at: 1, expect: 'linear-gradient(45deg, blue, orange)'}, 130 {at: 1.5, expect: 'linear-gradient(45deg, blue, orange)'}, 131 ]); 132 133 // Gradient to gradient 134 test_interpolation({ 135 property: 'list-style-image', 136 from: 'linear-gradient(-45deg, red, yellow)', 137 to: 'linear-gradient(45deg, blue, orange)', 138 }, [ 139 {at: -0.3, expect: 'linear-gradient(-45deg, red, yellow)'}, 140 {at: 0, expect: 'linear-gradient(-45deg, red, yellow)'}, 141 {at: 0.3, expect: 'linear-gradient(-45deg, red, yellow)'}, 142 {at: 0.6, expect: 'linear-gradient(45deg, blue, orange)'}, 143 {at: 1, expect: 'linear-gradient(45deg, blue, orange)'}, 144 {at: 1.5, expect: 'linear-gradient(45deg, blue, orange)'}, 145 ]); 146 </script> 147 </body>