Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 90 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-animations/parsing/animation-trigger-shorthand.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>animation-trigger shorthand</title>
<!-- TODO(crbug.com/390314945): Replace with spec link when the spec lands. -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/shorthand-testcommon.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<div id="target" style="font-size:10px"></div>
<script>
test_shorthand_value('animation-trigger',
'view() once contain 0% contain 100% cover 0% cover 100%',
{
'animation-trigger-type': 'once',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain',
'animation-trigger-range-end': 'contain',
'animation-trigger-exit-range-start': 'cover',
'animation-trigger-exit-range-end': 'cover',
});
test_shorthand_value('animation-trigger',
'view() once contain 20% contain 80% cover 10% cover 90%',
{
'animation-trigger-type': 'once',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain 20%',
'animation-trigger-range-end': 'contain 80%',
'animation-trigger-exit-range-start': 'cover 10%',
'animation-trigger-exit-range-end': 'cover 90%',
});
test_shorthand_value('animation-trigger',
'view() once contain 0% contain 100% cover 0%',
{
'animation-trigger-type': 'once',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain',
'animation-trigger-range-end': 'contain',
'animation-trigger-exit-range-start': 'cover',
'animation-trigger-exit-range-end': 'cover',
});
test_shorthand_value('animation-trigger',
'view() once contain 20% contain 80% cover 10%',
{
'animation-trigger-type': 'once',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain 20%',
'animation-trigger-range-end': 'contain 80%',
'animation-trigger-exit-range-start': 'cover 10%',
'animation-trigger-exit-range-end': 'cover',
});
test_shorthand_value('animation-trigger',
'view() once contain 0% contain 100% cover',
{
'animation-trigger-type': 'once',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain',
'animation-trigger-range-end': 'contain',
'animation-trigger-exit-range-start': 'cover',
'animation-trigger-exit-range-end': 'cover',
});
test_shorthand_value('animation-trigger',
'view() alternate contain 0% contain 100%',
{
'animation-trigger-type': 'alternate',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain',
'animation-trigger-range-end': 'contain',
'animation-trigger-exit-range-start': 'normal',
'animation-trigger-exit-range-end': 'normal',
});
test_shorthand_value('animation-trigger',
'view() alternate contain 20% contain 80%',
{
'animation-trigger-type': 'alternate',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain 20%',
'animation-trigger-range-end': 'contain 80%',
'animation-trigger-exit-range-start': 'normal',
'animation-trigger-exit-range-end': 'normal',
});
test_shorthand_value('animation-trigger',
'view() alternate contain 0%',
{
'animation-trigger-type': 'alternate',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain',
'animation-trigger-range-end': 'contain',
'animation-trigger-exit-range-start': 'normal',
'animation-trigger-exit-range-end': 'normal',
});
test_shorthand_value('animation-trigger',
'view() alternate contain 10%',
{
'animation-trigger-type': 'alternate',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain 10%',
'animation-trigger-range-end': 'contain',
'animation-trigger-exit-range-start': 'normal',
'animation-trigger-exit-range-end': 'normal',
});
test_shorthand_value('animation-trigger',
'view() alternate contain',
{
'animation-trigger-type': 'alternate',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'contain',
'animation-trigger-range-end': 'contain',
'animation-trigger-exit-range-start': 'normal',
'animation-trigger-exit-range-end': 'normal',
});
test_shorthand_value('animation-trigger', 'view() alternate',
{
'animation-trigger-type': 'alternate',
'animation-trigger-timeline': 'view()',
'animation-trigger-range-start': 'normal',
'animation-trigger-range-end': 'normal',
'animation-trigger-exit-range-start': 'normal',
'animation-trigger-exit-range-end': 'normal',
});
test_shorthand_value('animation-trigger', 'repeat',
{
'animation-trigger-type': 'repeat',
'animation-trigger-timeline': 'auto',
'animation-trigger-range-start': 'normal',
'animation-trigger-range-end': 'normal',
'animation-trigger-exit-range-start': 'normal',
'animation-trigger-exit-range-end': 'normal',
});
test_computed_value('animation-trigger',
'view() once contain 0% contain 100% cover 0% cover 100%',
'view() once contain contain cover cover');
test_computed_value('animation-trigger',
'view() once contain 20% contain 80% cover 10% cover 90%');
test_computed_value('animation-trigger',
'view() once contain 20% contain 80% cover 0%',
'view() once contain 20% contain 80% cover cover');
test_computed_value('animation-trigger',
'view() once contain 20% contain 80% cover 10%',
'view() once contain 20% contain 80% cover 10% cover');
test_computed_value('animation-trigger',
'view() once contain 0% contain 100%',
'view() once contain contain normal normal');
test_computed_value('animation-trigger',
'view() once',
'view() once normal normal normal normal');
</script>