animation-range-shorthand.html | Explore in Territory

<!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_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>
chromium/third_party/blink/web_tests/external/wpt/css/css-animations/parsing/animation-range-shorthand.html
