#container {
    overflow-y: scroll;
    height:  300px;
    width: 300px;
    border:  1px solid black;
    timeline-scope: --foo;
  }
  .big-spacer {
    height:  800px;
  }
  #subject {
    background-color:  green;
    height:  100px;
    width:  100px;
    view-timeline-name: --foo;
  }
  #box {
    position: fixed;
    top: 0;
    background-color: red;
    width: 50px;
    height: 50px;
    /* Please don't delete the following comments */
    /* This comment has been added to make sure css parser ignores it */
    /* animation-range: entry 0% 100%; */
    animation: linear anim forwards;
    animation-timeline: --foo;
  }
  
  /* Please don't delete the following comments */
  /* This comment has been added to make sure css parser ignores it */
  /*
  #box {
    position: fixed;
    top: 0;
    background-color: red;
    width: 50px;
    height: 50px;
    animation-timeline: foo;
    animation-range: entry 0% 100%;
    animation: linear anim;
  }
  */
  
  @keyframes anim {
    from { top: 0px; left: 0px; }
    to { top: 100px; left: 200px; }
  }
  