animation-range-shorthand.html

mozilla-central/testing/web-platform/tests/css/css-animations/parsing/animation-range-shorthand.html

Enable keyboard shortcuts

Source code

File a bug in Core :: CSS Transitions and Animations

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

This test has a WPT meta file that expects 106 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-animations/parsing/animation-range-shorthand.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>animation-range shorthand</title>

<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">

<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_valid_value("animation-range", "normal");

test_valid_value("animation-range", "normal normal", "normal");

test_valid_value("animation-range", "cover");

test_valid_value("animation-range", "contain");

test_valid_value("animation-range", "entry");

test_valid_value("animation-range", "entry-crossing");

test_valid_value("animation-range", "exit");

test_valid_value("animation-range", "exit-crossing");

test_valid_value("animation-range", "entry, exit");

test_valid_value("animation-range", "entry 0% entry 100%", "entry");

test_valid_value("animation-range", "entry-crossing 0% entry-crossing 100%",

                 "entry-crossing");

test_valid_value("animation-range", "exit 0% exit 100%", "exit");

test_valid_value("animation-range", "exit-crossing 0% exit-crossing 100%",

                 "exit-crossing");

test_valid_value("animation-range", "cover 0% cover 100%", "cover");

test_valid_value("animation-range", "contain 0% contain 100%", "contain");

test_valid_value("animation-range",

                 "entry calc(10% - 10%) entry calc(50% + 50%)", "entry");

test_valid_value("animation-range", "cover 50%");

test_valid_value("animation-range", "contain 50%");

test_valid_value("animation-range", "entry 50%");

test_valid_value("animation-range", "entry-crossing 50%");

test_valid_value("animation-range", "exit 50%");

test_valid_value("animation-range", "exit-crossing 50%");

test_valid_value("animation-range", "entry 50px exit 100px");

test_valid_value("animation-range", "exit calc(10% + 50px)");

test_valid_value("animation-range", "entry 50% exit 50%");

test_valid_value("animation-range",

                 "cover 50% entry 50%, contain 50% exit 50%");

test_valid_value("animation-range", "50% exit 50%");

test_valid_value("animation-range", "normal 100px");

test_valid_value("animation-range", "100px");

test_valid_value("animation-range", "100px normal", "100px");

test_valid_value("animation-range", "10% normal", "10%");

test_computed_value("animation-range", "normal");

test_computed_value("animation-range", "normal normal", "normal");

test_computed_value("animation-range", "cover");

test_computed_value("animation-range", "contain");

test_computed_value("animation-range", "entry");

test_computed_value("animation-range", "entry-crossing");

test_computed_value("animation-range", "exit");

test_computed_value("animation-range", "exit-crossing");

test_computed_value("animation-range", "entry, exit");

test_computed_value("animation-range", "entry 0% entry 100%", "entry");

test_computed_value("animation-range", "entry-crossing 0% entry-crossing 100%",

                 "entry-crossing");

test_computed_value("animation-range", "exit 0% exit 100%", "exit");

test_computed_value("animation-range", "exit-crossing 0% exit-crossing 100%",

                 "exit-crossing");

test_computed_value("animation-range", "cover 0% cover 100%", "cover");

test_computed_value("animation-range", "contain 0% contain 100%", "contain");

test_computed_value("animation-range",

                 "entry calc(10% - 10%) entry calc(50% + 50%)", "entry");

test_computed_value("animation-range", "cover 50%");

test_computed_value("animation-range", "contain 50%");

test_computed_value("animation-range", "entry 50%");

test_computed_value("animation-range", "entry-crossing 50%");

test_computed_value("animation-range", "exit 50%");

test_computed_value("animation-range", "exit-crossing 50%");

test_computed_value("animation-range", "entry 50px exit 100px");

test_computed_value("animation-range", "exit calc(10% + 50px)");

test_computed_value("animation-range", "entry 50% exit 50%");

test_computed_value("animation-range",

                 "cover 50% entry 50%, contain 50% exit 50%");

test_computed_value("animation-range", "entry 10em exit 20em", "entry 100px exit 200px");

test_computed_value("animation-range", "10em exit 20em", "100px exit 200px");

test_computed_value("animation-range", "normal 100px");

test_computed_value("animation-range", "100px");

test_computed_value("animation-range", "100px normal", "100px");

test_computed_value("animation-range", "10% normal", "10%");

test_computed_value("animation-range", "10% calc(70% + 10% * sign(100em - 1px))", "10% 80%");

test_invalid_value("animation-range", "entry 50% 0s", "entry 50%");

test_invalid_value("animation-range", "0s entry 50%");

test_invalid_value("animation-range", "1s");

test_invalid_value("animation-range", "-1s");

test_invalid_value("animation-range", "1s 2s");

test_invalid_value("animation-range", "1s, 2s");

test_invalid_value("animation-range", "1s 2s, 3s");

test_invalid_value("animation-range", "1s, 2s 3s");

test_invalid_value("animation-range", "1s, 2s, 3s");

test_invalid_value("animation-range", "1s 2s 3s");

test_invalid_value("animation-range", "0s, 1s 2s 3s");

test_invalid_value("animation-range", "1s / 2s");

test_invalid_value("animation-range", "1s, 2px");

test_invalid_value("animation-range", "#ff0000");

test_invalid_value("animation-range", "red");

test_invalid_value("animation-range", "thing");

test_invalid_value("animation-range", "thing 0%");

test_invalid_value("animation-range", "thing 42%");

test_invalid_value("animation-range", "thing 100%");

test_invalid_value("animation-range", "thing 100px");

test_invalid_value("animation-range", "100% thing");

test_shorthand_value('animation-range', 'normal', {

  'animation-range-start': 'normal',

  'animation-range-end': 'normal',

});

test_shorthand_value('animation-range', 'normal normal', {

  'animation-range-start': 'normal',

  'animation-range-end': 'normal',

});

test_shorthand_value('animation-range', 'normal entry 100%', {

  'animation-range-start': 'normal',

  'animation-range-end': 'entry',

});

test_shorthand_value('animation-range', 'normal entry 10%', {

  'animation-range-start': 'normal',

  'animation-range-end': 'entry 10%',

});

test_shorthand_value('animation-range', 'cover', {

  'animation-range-start': 'cover',

  'animation-range-end': 'cover',

});

test_shorthand_value('animation-range', 'contain', {

  'animation-range-start': 'contain',

  'animation-range-end': 'contain',

});

test_shorthand_value('animation-range', 'contain 100% contain 0%', {

  'animation-range-start': 'contain 100%',

  'animation-range-end': 'contain 0%',

});

test_shorthand_value('animation-range', 'entry 10% exit 20%', {

  'animation-range-start': 'entry 10%',

  'animation-range-end': 'exit 20%',

});

test_shorthand_value('animation-range', 'entry calc(10% + 10px) exit 20px', {

  'animation-range-start': 'entry calc(10% + 10px)',

  'animation-range-end': 'exit 20px',

});

test_shorthand_value('animation-range', 'entry, exit', {

  'animation-range-start': 'entry, exit',

  'animation-range-end': 'entry, exit',

});

test_shorthand_value('animation-range', 'entry 0%, exit', {

  'animation-range-start': 'entry, exit',

  'animation-range-end': 'entry, exit',

});

test_shorthand_value('animation-range', 'exit calc(10% + 50px)', {

  'animation-range-start': 'exit calc(10% + 50px)',

  'animation-range-end': 'exit',

});

test_shorthand_value('animation-range', '100px', {

  'animation-range-start': '100px',

  'animation-range-end': 'normal',

});

test_shorthand_value('animation-range', '10%', {

  'animation-range-start': '10%',

  'animation-range-end': 'normal',

});

</script>