| <!DOCTYPE html> |
| <title>animation-trigger shorthand</title> |
| <!-- TODO(crbug.com/390314945): Replace with spec link when the spec lands. --> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8942"> |
| <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': 'auto', |
| 'animation-trigger-exit-range-end': 'auto', |
| }); |
| 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': 'auto', |
| 'animation-trigger-exit-range-end': 'auto', |
| }); |
| 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': 'auto', |
| 'animation-trigger-exit-range-end': 'auto', |
| }); |
| 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': 'auto', |
| 'animation-trigger-exit-range-end': 'auto', |
| }); |
| 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': 'auto', |
| 'animation-trigger-exit-range-end': 'auto', |
| }); |
| 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': 'auto', |
| 'animation-trigger-exit-range-end': 'auto', |
| }); |
| 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': 'auto', |
| 'animation-trigger-exit-range-end': 'auto', |
| }); |
| 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 auto auto'); |
| test_computed_value('animation-trigger', |
| 'view() once', |
| 'view() once normal normal auto auto'); |
| </script> |
