Re-import the css/css-shapes WPT
[WebKit-https.git] / 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>