<!DOCTYPE html>
<title>Tests animation with tree-scoped names and references</title>

<style>
@counter-style from-counter-style {
  system: cyclic;
  symbols: 'X';
}

@counter-style to-counter-style {
  system: cyclic;
  symbols: 'O';
}

#target1 {
  list-style-type: from-counter-style;
}

#target2 {
  list-style-type: to-counter-style;
}
</style>

<ul id="target1">
  <li>List marker should be X
</ul>

<ul id="target2">
  <li>List marker should be O
</ul>
