custom-property-transition-mismatched-list.html (7096B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../resources/utils.js"></script> 6 <div id="target"></div> 7 <script> 8 9 transition_test({ 10 syntax: "<angle>#", 11 from: '100deg, 200deg', 12 to: '300deg', 13 expected: '300deg', 14 behavior: 'allow-discrete', 15 }, 'A custom property of type <angle># yields a discrete CSS Transition if the lists do not contain the same number of values'); 16 17 transition_test({ 18 syntax: "<angle>+", 19 from: '100deg 200deg', 20 to: '300deg', 21 expected: '300deg', 22 behavior: 'allow-discrete', 23 }, 'A custom property of type <angle>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 24 25 transition_test({ 26 syntax: "<color>#", 27 from: 'rgb(100, 100, 100), rgb(150, 150, 150)', 28 to: 'rgb(200, 200, 200)', 29 expected: 'rgb(200, 200, 200)', 30 behavior: 'allow-discrete', 31 }, 'A custom property of type <color># yields a discrete CSS Transition if the lists do not contain the same number of values'); 32 33 transition_test({ 34 syntax: "<color>+", 35 from: 'rgb(100, 100, 100) rgb(150, 150, 150)', 36 to: 'rgb(200, 200, 200)', 37 expected: 'rgb(200, 200, 200)', 38 behavior: 'allow-discrete', 39 }, 'A custom property of type <color>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 40 41 transition_test({ 42 syntax: "<custom-ident>#", 43 from: 'foo, bar', 44 to: 'baz', 45 expected: 'baz', 46 behavior: 'allow-discrete', 47 }, 'A custom property of type <custom-ident># yields a discrete CSS Transition if the lists do not contain the same number of values'); 48 49 transition_test({ 50 syntax: "<custom-ident>+", 51 from: 'foo bar', 52 to: 'baz', 53 expected: 'baz', 54 behavior: 'allow-discrete', 55 }, 'A custom property of type <custom-ident>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 56 57 transition_test({ 58 syntax: "<image>#", 59 from: 'url("https://example.com/foo"), url("https://example.com/bar")', 60 to: 'url("https://example.com/to")', 61 expected: 'url("https://example.com/to")', 62 behavior: 'allow-discrete', 63 }, 'A custom property of type <image># yields a discrete CSS Transition if the lists do not contain the same number of values'); 64 65 transition_test({ 66 syntax: "<image>+", 67 from: 'url("https://example.com/foo") url("https://example.com/bar")', 68 to: 'url("https://example.com/to")', 69 expected: 'url("https://example.com/to")', 70 behavior: 'allow-discrete', 71 }, 'A custom property of type <image>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 72 73 transition_test({ 74 syntax: "<integer>#", 75 from: '100, 200', 76 to: '300', 77 expected: '300', 78 behavior: 'allow-discrete', 79 }, 'A custom property of type <integer># yields a discrete CSS Transition if the lists do not contain the same number of values'); 80 81 transition_test({ 82 syntax: "<integer>+", 83 from: '100 200', 84 to: '300', 85 expected: '300', 86 behavior: 'allow-discrete', 87 }, 'A custom property of type <integer>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 88 89 transition_test({ 90 syntax: "<length-percentage>#", 91 from: '100px, 200px', 92 to: '300%', 93 expected: '300%', 94 behavior: 'allow-discrete', 95 }, 'A custom property of type <length-percentage># yields a discrete CSS Transition if the lists do not contain the same number of values'); 96 97 transition_test({ 98 syntax: "<length-percentage>+", 99 from: '100px 200px', 100 to: '300%', 101 expected: '300%', 102 behavior: 'allow-discrete', 103 }, 'A custom property of type <length-percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 104 105 transition_test({ 106 syntax: "<length>#", 107 from: '100px, 200px', 108 to: '300px', 109 expected: '300px', 110 behavior: 'allow-discrete', 111 }, 'A custom property of type <length># yields a discrete CSS Transition if the lists do not contain the same number of values'); 112 113 transition_test({ 114 syntax: "<length>+", 115 from: '100px 200px', 116 to: '300px', 117 expected: '300px', 118 behavior: 'allow-discrete', 119 }, 'A custom property of type <length>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 120 121 transition_test({ 122 syntax: "<number>#", 123 from: '100, 200', 124 to: '300', 125 expected: '300', 126 behavior: 'allow-discrete', 127 }, 'A custom property of type <number># yields a discrete CSS Transition if the lists do not contain the same number of values'); 128 129 transition_test({ 130 syntax: "<number>+", 131 from: '100 200', 132 to: '300', 133 expected: '300', 134 behavior: 'allow-discrete', 135 }, 'A custom property of type <number>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 136 137 transition_test({ 138 syntax: "<percentage>#", 139 from: '100%, 200%', 140 to: '300%', 141 expected: '300%', 142 behavior: 'allow-discrete', 143 }, 'A custom property of type <percentage># yields a discrete CSS Transition if the lists do not contain the same number of values'); 144 145 transition_test({ 146 syntax: "<percentage>+", 147 from: '100% 200%', 148 to: '300%', 149 expected: '300%', 150 behavior: 'allow-discrete', 151 }, 'A custom property of type <percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 152 153 transition_test({ 154 syntax: "<resolution>#", 155 from: '100dppx, 200dppx', 156 to: '300dppx', 157 expected: '300dppx', 158 behavior: 'allow-discrete', 159 }, 'A custom property of type <resolution># yields a discrete CSS Transition if the lists do not contain the same number of values'); 160 161 transition_test({ 162 syntax: "<resolution>+", 163 from: '100dppx 200dppx', 164 to: '300dppx', 165 expected: '300dppx', 166 behavior: 'allow-discrete', 167 }, 'A custom property of type <resolution>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 168 169 transition_test({ 170 syntax: "<time>#", 171 from: '100s, 200s', 172 to: '300s', 173 expected: '300s', 174 behavior: 'allow-discrete', 175 }, 'A custom property of type <time># yields a discrete CSS Transition if the lists do not contain the same number of values'); 176 177 transition_test({ 178 syntax: "<time>+", 179 from: '100s 200s', 180 to: '300s', 181 expected: '300s', 182 behavior: 'allow-discrete', 183 }, 'A custom property of type <time>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 184 185 transition_test({ 186 syntax: "<url>#", 187 from: 'url("https://example.com/foo"), url("https://example.com/bar")', 188 to: 'url("https://example.com/to")', 189 expected: 'url("https://example.com/to")', 190 behavior: 'allow-discrete', 191 }, 'A custom property of type <url># yields a discrete CSS Transition if the lists do not contain the same number of values'); 192 193 transition_test({ 194 syntax: "<url>+", 195 from: 'url("https://example.com/foo") url("https://example.com/bar")', 196 to: 'url("https://example.com/to")', 197 expected: 'url("https://example.com/to")', 198 behavior: 'allow-discrete', 199 }, 'A custom property of type <url>+ yields a discrete CSS Transition if the lists do not contain the same number of values'); 200 201 </script>