<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
<link rel="match" href="background-color-animation-fallback-missing-100-percent-ref.html">
<style>
.container {
  /*TODO(crbug.com/1163949): Support animation keyframes without 0% or 100%.*/
  width: 100px;
  height: 100px;
  background-color: green;
  /* Use a long animation that start at 50% progress where the slope of the
     selected timing function is zero. By setting up the animation in this way,
     we accommodate lengthy delays in running the test without a potential drift
     in the animated property value. This is important for avoiding flakes,
     especially on debug builds. The screenshots are taken as soon as the
     animation is ready, thus the long animation duration has no bearing on
     the actual duration of the test. */
  animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s;
}
@keyframes bgcolor {
  0% { background-color: rgb(200, 0, 0); }
  20% { background-color: rgb(0, 200, 0); }
  80% { background-color: rgb(0, 0, 200); }
}
</style>
<script src="/common/reftest-wait.js"></script>
<body>
<div class="container"></div>

<script>
document.getAnimations()[0].ready.then(() => {
  takeScreenshot();
});
</script>
</body>
</html>