transition-currentcolor.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="../resources/gesture-util.js"></script>
<style>
div {
  border-left-color: currentColor;
  border-top-color: initial;
  transition: 100s;
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<script>

window.onload = async () => {
  promise_test(async t => {
    await waitForCompositorCommit();
    target1.style.color = "orange";
    await raf();
    assert_equals(target1.getAnimations().length, 1);
  }, 'A property set to currentColor shouldn\'t transition when color changes');

  promise_test(async t => {
    await waitForCompositorCommit();
    target2.style.borderLeftColor = "orange";
    await raf();
    assert_equals(target2.getAnimations().length, 1);
  }, 'A property set should transition from currentColor to an explicit color');
}
</script>

chromium/third_party/blink/web_tests/transitions/transition-currentcolor.html