<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#target {
  animation-name: first, second;
  animation-duration: 1e8s;
  animation-timing-function: steps(2, start);
  left: 100px;
}

@keyframes first {
  from { left: 300px; }
  to { left: 300px; }
}

@keyframes second {
  to { left: 200px; }
}
</style>
<div id="target"></div>
<script>
test(_ => {
  assert_equals(getComputedStyle(target).left, '250px');
}, 'Multiple CSS Animations on the same property should composite together');
</script>