animation-start-option.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<style>
option {
  background-color: red;
}

.animated {
  animation: 2s anim;
}

@keyframes anim {
  from { background-color: green; }
  to   { background-color: blue; }
}

</style>

<select multiple="multiple">
  <option id="target">option</option>
</select>

<script>
  async_test(function(t) {
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(255, 0, 0)');

    target.addEventListener('animationstart', t.step_func_done(function() {
      assert_not_equals(getComputedStyle(target).backgroundColor, 'rgb(255, 0, 0)');
    }));

    target.className = 'animated';
  }, 'Animation starts on <option>');
</script>

chromium/third_party/blink/web_tests/animations/animation-start-option.html