Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 108 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_computed_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100% cover 0% cover 100%',
'--my-trigger view() contain contain cover 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 cover');
test_computed_value('timeline-trigger',
'--my-trigger view() contain 20% contain 80% cover 10%',
'--my-trigger view() contain 20% contain 80% cover 10% cover');
test_computed_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100%',
'--my-trigger view() contain contain auto auto');
test_computed_value('timeline-trigger',
'view()',
'none view() normal normal auto auto');
test_computed_value('timeline-trigger',
'--my-trigger --my-timeline',
'--my-trigger --my-timeline normal normal auto auto');
test_computed_value('timeline-trigger',
'contain 0% contain 100% --my-trigger --my-timeline',
'--my-trigger --my-timeline contain contain auto auto');
test_computed_value('timeline-trigger',
'--trigger1, --trigger2',
'--trigger1 auto normal normal auto auto, ' +
'--trigger2 auto normal normal auto auto');
test_computed_value('timeline-trigger',
'--trigger1 view(), --trigger2 scroll()',
'--trigger1 view() normal normal auto auto, ' +
'--trigger2 scroll() normal normal auto auto');
</script>