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>