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

   1 <!DOCTYPE html>
   2 <title>animation-range shorthand</title>
   3 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range">
   4 <script src="/resources/testharness.js"></script>
   5 <script src="/resources/testharnessreport.js"></script>
   6 <script src="/css/support/shorthand-testcommon.js"></script>
   7 <script src="/css/support/parsing-testcommon.js"></script>
   8 <script>
   9 test_valid_value("animation-range", "cover");
  10 test_valid_value("animation-range", "contain");
  11 test_valid_value("animation-range", "enter");
  12 test_valid_value("animation-range", "exit");
  13 test_valid_value("animation-range", "enter, exit");
  14
  15 test_valid_value("animation-range", "enter 0% enter 100%", "enter");
  16 test_valid_value("animation-range", "exit 0% exit 100%", "exit");
  17 test_valid_value("animation-range", "cover 0% cover 100%", "cover");
  18 test_valid_value("animation-range", "contain 0% contain 100%", "contain");
  19 test_valid_value("animation-range", "enter calc(10% - 10%) enter calc(50% + 50%)", "enter");
  20
  21 test_valid_value("animation-range", "cover 50%");
  22 test_valid_value("animation-range", "contain 50%");
  23 test_valid_value("animation-range", "enter 50%");
  24 test_valid_value("animation-range", "exit 50%");
  25
  26 test_valid_value("animation-range", "enter 50px exit 100px");
  27 test_valid_value("animation-range", "exit calc(10% + 50px)");
  28
  29 test_valid_value("animation-range", "enter 50% exit 50%");
  30 test_valid_value("animation-range", "cover 50% enter 50%, contain 50% exit 50%");
  31
  32 test_invalid_value("animation-range", "enter 50% 0s", "enter 50%");
  33 test_invalid_value("animation-range", "0s enter 50%");
  34 test_invalid_value("animation-range", "1s");
  35 test_invalid_value("animation-range", "-1s");
  36 test_invalid_value("animation-range", "1s 2s");
  37 test_invalid_value("animation-range", "1s, 2s");
  38 test_invalid_value("animation-range", "1s 2s, 3s");
  39 test_invalid_value("animation-range", "1s, 2s 3s");
  40 test_invalid_value("animation-range", "1s, 2s, 3s");
  41 test_invalid_value("animation-range", "1s 2s 3s");
  42 test_invalid_value("animation-range", "0s, 1s 2s 3s");
  43 test_invalid_value("animation-range", "1s / 2s");
  44 test_invalid_value("animation-range", "1s, 2px");
  45 test_invalid_value("animation-range", "#ff0000");
  46 test_invalid_value("animation-range", "red");
  47 test_invalid_value("animation-range", "thing");
  48 test_invalid_value("animation-range", "thing 0%");
  49 test_invalid_value("animation-range", "thing 42%");
  50 test_invalid_value("animation-range", "thing 100%");
  51 test_invalid_value("animation-range", "thing 100px");
  52 test_invalid_value("animation-range", "100% thing");
  53
  54 test_shorthand_value('animation-range', 'cover', {
  55   'animation-range-start': 'cover 0%',
  56   'animation-range-end': 'cover 100%',
  57 });
  58
  59 test_shorthand_value('animation-range', 'contain', {
  60   'animation-range-start': 'contain 0%',
  61   'animation-range-end': 'contain 100%',
  62 });
  63
  64 test_shorthand_value('animation-range', 'enter 10% exit 20%', {
  65   'animation-range-start': 'enter 10%',
  66   'animation-range-end': 'exit 20%',
  67 });
  68
  69 test_shorthand_value('animation-range', 'enter calc(10% + 10px) exit 20px', {
  70   'animation-range-start': 'enter calc(10% + 10px)',
  71   'animation-range-end': 'exit 20px',
  72 });
  73
  74 test_shorthand_value('animation-range', 'enter, exit', {
  75   'animation-range-start': 'enter 0%, exit 0%',
  76   'animation-range-end': 'enter 100%, exit 100%',
  77 });
  78
  79 test_shorthand_value('animation-range', 'enter 0%, exit', {
  80   'animation-range-start': 'enter 0%, exit 0%',
  81   'animation-range-end': 'auto, exit 100%',
  82 });
  83 </script>