currentcolor-animation-001.html | Explore in Territory

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>CSS Transitions of currentcolor</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla Corporation" href="https://mozilla.com/">
<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
<link rel="help" href="https://drafts.csswg.org/css-color/#resolving-color-values">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>

test(() => {
  const div = document.getElementById('test');
  const cs = getComputedStyle(div, '');

  // Setup before-change style
  div.style.color = 'red';
  div.style.backgroundColor = 'currentcolor';
  cs.backgroundColor; // Flush style

  // Change color -- this should NOT trigger a transition because as per [1]
  // the computed value of 'currentcolor' for properties other than 'color'
  // is 'currentcolor' and transitions operate on computed values (not used
  // values).
  //
  // [1] https://drafts.csswg.org/css-color/#resolving-color-values
  div.style.transition = 'background-color linear 50s -10s';
  div.style.color = 'blue';
  const valueAfterUpdatingColor = cs.backgroundColor;

  // Generate some reference values for comparing
  div.style.transition = '';
  div.style.backgroundColor = 'rgb(204, 0, 51)';
  const quarterReference = cs.backgroundColor;

  div.style.backgroundColor = 'blue';
  const finalReference = cs.backgroundColor;

  assert_true(
    valueAfterUpdatingColor != quarterReference &&
    valueAfterUpdatingColor == finalReference
  );
}, 'Transition does not occur when the value is currentcolor and color changes');

</script>
</body>
</html>
chromium/third_party/blink/web_tests/external/wpt/css/css-transitions/currentcolor-animation-001.html
