LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-image-threshold-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <title>shape-image-threshold interpolation</title>
   4 <link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property">
   5 <meta name="assert" content="shape-image-threshold supports animation by computed value">
   6
   7 <script src="/resources/testharness.js"></script>
   8 <script src="/resources/testharnessreport.js"></script>
   9 <script src="/css/support/interpolation-testcommon.js"></script>
  10
  11 <style>
  12 .parent {
  13   shape-image-threshold: 0.4;
  14 }
  15 .target {
  16   shape-image-threshold: 0.6;
  17 }
  18 </style>
  19
  20 <body></body>
  21
  22 <script>
  23 test_interpolation({
  24   property: 'shape-image-threshold',
  25   from: neutralKeyframe,
  26   to: '0.8',
  27 }, [
  28   {at: -1.5, expect: '0.3'},
  29   {at: -0.5, expect: '0.5'},
  30   {at: 0, expect: '0.6'},
  31   {at: 0.5, expect: '0.7'},
  32   {at: 1, expect: '0.8'},
  33   {at: 1.5, expect: '0.9'},
  34 ]);
  35
  36 test_interpolation({
  37   property: 'shape-image-threshold',
  38   from: 'initial',
  39   to: '0.8',
  40 }, [
  41   {at: -1.5, expect: '0'},
  42   {at: -0.5, expect: '0'},
  43   {at: 0, expect: '0'},
  44   {at: 0.5, expect: '0.4'},
  45   {at: 1, expect: '0.8'},
  46   {at: 1.5, expect: '1'},
  47 ]);
  48
  49 test_interpolation({
  50   property: 'shape-image-threshold',
  51   from: 'inherit',
  52   to: '0.8',
  53 }, [
  54   {at: -1.5, expect: '0'},
  55   {at: -0.5, expect: '0.2'},
  56   {at: 0, expect: '0.4'},
  57   {at: 0.5, expect: '0.6'},
  58   {at: 1, expect: '0.8'},
  59   {at: 1.5, expect: '1'},
  60 ]);
  61
  62 test_interpolation({
  63   property: 'shape-image-threshold',
  64   from: 'unset',
  65   to: '0.8',
  66 }, [
  67   {at: -1.5, expect: '0'},
  68   {at: -0.5, expect: '0'},
  69   {at: 0, expect: '0'},
  70   {at: 0.5, expect: '0.4'},
  71   {at: 1, expect: '0.8'},
  72   {at: 1.5, expect: '1'},
  73 ]);
  74
  75 test_interpolation({
  76   property: 'shape-image-threshold',
  77   from: '0.5',
  78   to: '1'
  79 }, [
  80   {at: -1.5, expect: '0'},
  81   {at: -0.5, expect: '0.25'},
  82   {at: 0, expect: '0.5'},
  83   {at: 0.5, expect: '0.75'},
  84   {at: 1, expect: '1'},
  85   {at: 1.5, expect: '1'}
  86 ]);
  87 </script>