Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 173 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /scroll-animations/animation-trigger/parsing/timeline-trigger-shorthand.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>timeline-trigger shorthand</title>
<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('timeline-trigger',
'--my-trigger view() contain 0% contain 100% / cover 0% cover 100%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'cover',
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 10% cover 90%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain 20%',
'timeline-trigger-range-end': 'contain 80%',
'timeline-trigger-exit-range-start': 'cover 10%',
'timeline-trigger-exit-range-end': 'cover 90%',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100% / cover 0%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'cover',
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 10%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain 20%',
'timeline-trigger-range-end': 'contain 80%',
'timeline-trigger-exit-range-start': 'cover 10%',
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100% / cover',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'cover',
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'auto',
'timeline-trigger-exit-range-end': 'auto',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain 20%',
'timeline-trigger-range-end': 'contain 80%',
'timeline-trigger-exit-range-start': 'auto',
'timeline-trigger-exit-range-end': 'auto',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain 0%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'auto',
'timeline-trigger-exit-range-end': 'auto',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain 10%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain 10%',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'auto',
'timeline-trigger-exit-range-end': 'auto',
});
test_shorthand_value('timeline-trigger',
'--my-trigger view() contain',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'auto',
'timeline-trigger-exit-range-end': 'auto',
});
test_shorthand_value('timeline-trigger', '--my-trigger view()',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
'timeline-trigger-range-start': 'normal',
'timeline-trigger-range-end': 'normal',
'timeline-trigger-exit-range-start': 'auto',
'timeline-trigger-exit-range-end': 'auto',
});
test_shorthand_value('timeline-trigger', '--my-trigger --my-timeline',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': '--my-timeline',
'timeline-trigger-range-start': 'normal',
'timeline-trigger-range-end': 'normal',
'timeline-trigger-exit-range-start': 'auto',
'timeline-trigger-exit-range-end': 'auto',
});
test_shorthand_value('timeline-trigger', '--my-trigger1, --my-trigger2',
{
'timeline-trigger-name': '--my-trigger1, --my-trigger2',
'timeline-trigger-source': 'auto, auto',
'timeline-trigger-range-start': 'normal, normal',
'timeline-trigger-range-end': 'normal, normal',
'timeline-trigger-exit-range-start': 'auto, auto',
'timeline-trigger-exit-range-end': 'auto, auto',
});
test_shorthand_value('timeline-trigger',
'--my-trigger1 --my-timeline1 contain cover / normal exit, '+
'--my-trigger2 --my-timeline2 entry exit / contain normal',
{
'timeline-trigger-name': '--my-trigger1, --my-trigger2',
'timeline-trigger-source': '--my-timeline1, --my-timeline2',
'timeline-trigger-range-start': 'contain, entry',
'timeline-trigger-range-end': 'cover, exit',
'timeline-trigger-exit-range-start': 'normal, contain',
'timeline-trigger-exit-range-end': 'exit, normal',
});
test_shorthand_value('timeline-trigger',
'--my-trigger1 --my-timeline1 contain / cover',
{
'timeline-trigger-name': '--my-trigger1',
'timeline-trigger-source': '--my-timeline1',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'cover',
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
'--my-trigger1 --my-timeline1 contain exit 0% / cover',
{
'timeline-trigger-name': '--my-trigger1',
'timeline-trigger-source': '--my-timeline1',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'exit 0%',
'timeline-trigger-exit-range-start': 'cover',
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
'--my-trigger1 --my-timeline1 contain cover 100% / cover exit 100%',
{
'timeline-trigger-name': '--my-trigger1',
'timeline-trigger-source': '--my-timeline1',
'timeline-trigger-range-start': 'contain',
'timeline-trigger-range-end': 'cover',
'timeline-trigger-exit-range-start': 'cover',
'timeline-trigger-exit-range-end': 'exit',
});
test_shorthand_value('timeline-trigger',
'--my-trigger1 --my-timeline1 contain 50% / cover 50%',
{
'timeline-trigger-name': '--my-trigger1',
'timeline-trigger-source': '--my-timeline1',
'timeline-trigger-range-start': 'contain 50%',
'timeline-trigger-range-end': 'contain',
'timeline-trigger-exit-range-start': 'cover 50%',
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
'--my-trigger1 --my-timeline1 contain 50% contain 90% / cover 50% cover 90%',
{
'timeline-trigger-name': '--my-trigger1',
'timeline-trigger-source': '--my-timeline1',
'timeline-trigger-range-start': 'contain 50%',
'timeline-trigger-range-end': 'contain 90%',
'timeline-trigger-exit-range-start': 'cover 50%',
'timeline-trigger-exit-range-end': 'cover 90%',
});
test_shorthand_value('timeline-trigger',
'--my-trigger1 --my-timeline1 / cover ',
{
'timeline-trigger-name': '--my-trigger1',
'timeline-trigger-source': '--my-timeline1',
'timeline-trigger-range-start': 'normal',
'timeline-trigger-range-end': 'normal',
'timeline-trigger-exit-range-start': 'cover',
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
'--my-trigger1 --my-timeline1 / cover exit 100%',
{
'timeline-trigger-name': '--my-trigger1',
'timeline-trigger-source': '--my-timeline1',
'timeline-trigger-range-start': 'normal',
'timeline-trigger-range-end': 'normal',
'timeline-trigger-exit-range-start': 'cover',
'timeline-trigger-exit-range-end': 'exit',
});
test_computed_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100% / cover 0% cover 100%',
'--my-trigger view() contain / cover');
test_computed_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 10% cover 90%');
test_computed_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 0%',
'--my-trigger view() contain 20% contain 80% / cover');
test_computed_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 10%',
'--my-trigger view() contain 20% contain 80% / cover 10%');
test_computed_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100%',
'--my-trigger view() contain');
test_computed_value('timeline-trigger', 'view()');
test_computed_value('timeline-trigger',
'--my-trigger --my-timeline',
'--my-trigger --my-timeline');
test_computed_value('timeline-trigger', '--trigger1, --trigger2');
test_computed_value('timeline-trigger',
'--trigger1 view(), --trigger2 scroll()',
'--trigger1 view(), --trigger2 scroll()');
test_computed_value('timeline-trigger',
'--my-trigger --my-timeline normal / contain',
'--my-trigger --my-timeline / contain');
test_computed_value('timeline-trigger',
'--my-trigger --my-timeline / contain');
test_valid_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100% / cover 0% cover 100%',
'--my-trigger view() contain / cover');
test_valid_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 10% cover 90%');
test_valid_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 0%',
'--my-trigger view() contain 20% contain 80% / cover');
test_valid_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 10%',
'--my-trigger view() contain 20% contain 80% / cover 10%');
test_valid_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100%',
'--my-trigger view() contain');
test_valid_value('timeline-trigger', 'view()');
test_valid_value('timeline-trigger', '--my-trigger --my-timeline');
test_valid_value('timeline-trigger', '--trigger1, --trigger2');
test_valid_value('timeline-trigger',
'--trigger1 view(), --trigger2 scroll()',
'--trigger1 view(), --trigger2 scroll()');
test_valid_value('timeline-trigger',
'--my-trigger view() normal normal / auto auto',
'--my-trigger view()');
test_valid_value('timeline-trigger',
'--my-trigger view() normal normal / normal auto',
'--my-trigger view() / normal');
test_valid_value('timeline-trigger',
'--my-trigger view() normal normal / cover auto',
'--my-trigger view() / cover');
test_valid_value('timeline-trigger',
'--my-trigger view() normal normal / cover 10% auto',
'--my-trigger view() / cover 10%');
test_valid_value('timeline-trigger',
'--my-trigger --my-timeline normal / contain',
'--my-trigger --my-timeline / contain');
test_valid_value('timeline-trigger',
'--my-trigger --my-timeline / contain');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100% // cover 0% cover 100%');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% contain / cover 10% cover 90%');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 10% cover 90% cover 100%');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% /');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% / cover 10% /');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% cover 10% cover 90% contan');
test_invalid_value('timeline-trigger', '--my-trigger view() /');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain / cover, contain /');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain / cover, contain contain /');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain / cover, contain contain contain / cover');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain contain cover cover');
test_invalid_value('timeline-trigger',
'--my-trigger view() contain contain cover');
</script>