[Web Animations] Update WPT tests related to Web Animations and remove imported Mozil...
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / currentcolor-animation-001.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>CSS Transitions of currentcolor</title>
6 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
7 <link rel="author" title="Mozilla Corporation" href="https://mozilla.com/">
8 <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
9 <link rel="help" href="https://drafts.csswg.org/css-color/#resolving-color-values">
10 <script src="/resources/testharness.js"></script>
11 <script src="/resources/testharnessreport.js"></script>
12 </head>
13 <body>
14 <div id="log"></div>
15 <div id="test"></div>
16 <script>
17
18 test(() => {
19   const div = document.getElementById('test');
20   const cs = getComputedStyle(div, '');
21
22   // Setup before-change style
23   div.style.color = 'red';
24   div.style.backgroundColor = 'currentcolor';
25   cs.backgroundColor; // Flush style
26
27   // Change color -- this should NOT trigger a transition because as per [1]
28   // the computed value of 'currentcolor' for properties other than 'color'
29   // is 'currentcolor' and transitions operate on computed values (not used
30   // values).
31   //
32   // [1] https://drafts.csswg.org/css-color/#resolving-color-values
33   div.style.transition = 'background-color linear 50s -10s';
34   div.style.color = 'blue';
35   const valueAfterUpdatingColor = cs.backgroundColor;
36
37   // Generate some reference values for comparing
38   div.style.transition = '';
39   div.style.backgroundColor = 'rgb(204, 0, 51)';
40   const quarterReference = cs.backgroundColor;
41
42   div.style.backgroundColor = 'blue';
43   const finalReference = cs.backgroundColor;
44
45   assert_true(
46     valueAfterUpdatingColor != quarterReference &&
47     valueAfterUpdatingColor == finalReference
48   );
49 }, 'Transition does not occur when the value is currentcolor and color changes');
50
51 </script>
52 </body>
53 </html>