Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/utils.js"></script>
<div id="target"></div>
<script>
transition_test({
syntax: "<angle>#",
from: '100deg, 200deg',
to: '300deg',
expected: '300deg',
behavior: 'allow-discrete',
}, 'A custom property of type <angle># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<angle>+",
from: '100deg 200deg',
to: '300deg',
expected: '300deg',
behavior: 'allow-discrete',
}, 'A custom property of type <angle>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<color>#",
from: 'rgb(100, 100, 100), rgb(150, 150, 150)',
to: 'rgb(200, 200, 200)',
expected: 'rgb(200, 200, 200)',
behavior: 'allow-discrete',
}, 'A custom property of type <color># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<color>+",
from: 'rgb(100, 100, 100) rgb(150, 150, 150)',
to: 'rgb(200, 200, 200)',
expected: 'rgb(200, 200, 200)',
behavior: 'allow-discrete',
}, 'A custom property of type <color>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<custom-ident>#",
from: 'foo, bar',
to: 'baz',
expected: 'baz',
behavior: 'allow-discrete',
}, 'A custom property of type <custom-ident># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<custom-ident>+",
from: 'foo bar',
to: 'baz',
expected: 'baz',
behavior: 'allow-discrete',
}, 'A custom property of type <custom-ident>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<image>#",
behavior: 'allow-discrete',
}, 'A custom property of type <image># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<image>+",
behavior: 'allow-discrete',
}, 'A custom property of type <image>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<integer>#",
from: '100, 200',
to: '300',
expected: '300',
behavior: 'allow-discrete',
}, 'A custom property of type <integer># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<integer>+",
from: '100 200',
to: '300',
expected: '300',
behavior: 'allow-discrete',
}, 'A custom property of type <integer>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<length-percentage>#",
from: '100px, 200px',
to: '300%',
expected: '300%',
behavior: 'allow-discrete',
}, 'A custom property of type <length-percentage># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<length-percentage>+",
from: '100px 200px',
to: '300%',
expected: '300%',
behavior: 'allow-discrete',
}, 'A custom property of type <length-percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<length>#",
from: '100px, 200px',
to: '300px',
expected: '300px',
behavior: 'allow-discrete',
}, 'A custom property of type <length># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<length>+",
from: '100px 200px',
to: '300px',
expected: '300px',
behavior: 'allow-discrete',
}, 'A custom property of type <length>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<number>#",
from: '100, 200',
to: '300',
expected: '300',
behavior: 'allow-discrete',
}, 'A custom property of type <number># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<number>+",
from: '100 200',
to: '300',
expected: '300',
behavior: 'allow-discrete',
}, 'A custom property of type <number>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<percentage>#",
from: '100%, 200%',
to: '300%',
expected: '300%',
behavior: 'allow-discrete',
}, 'A custom property of type <percentage># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<percentage>+",
from: '100% 200%',
to: '300%',
expected: '300%',
behavior: 'allow-discrete',
}, 'A custom property of type <percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<resolution>#",
from: '100dppx, 200dppx',
to: '300dppx',
expected: '300dppx',
behavior: 'allow-discrete',
}, 'A custom property of type <resolution># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<resolution>+",
from: '100dppx 200dppx',
to: '300dppx',
expected: '300dppx',
behavior: 'allow-discrete',
}, 'A custom property of type <resolution>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<time>#",
from: '100s, 200s',
to: '300s',
expected: '300s',
behavior: 'allow-discrete',
}, 'A custom property of type <time># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<time>+",
from: '100s 200s',
to: '300s',
expected: '300s',
behavior: 'allow-discrete',
}, 'A custom property of type <time>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<url>#",
behavior: 'allow-discrete',
}, 'A custom property of type <url># yields a discrete CSS Transition if the lists do not contain the same number of values');
transition_test({
syntax: "<url>+",
behavior: 'allow-discrete',
}, 'A custom property of type <url>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
</script>