These are tests for regressions.

Assumptions:

• The container size is 500px
• Each element size is default at 100px (unless specified)
• The container contains 10 elements and is sticky

Press and hold 1 in playground for a few seconds.

• Add 20 elements very quickly
• Test it again on Firefox

Expect:

• It should not lose stickiness
• During elements add, it should not lose stickiness for a split second
  • In playground, it should not turn pink at any moments

• Set a scroller of 100px
• Add 1 element of 50px
• Add another element of 200px very quickly after the previous one
  • Preferably, use requestAnimationFrame

Expect:

• It should stop at 100px

Press 4 1 5 1 1 in the playground.

• Change the container size to 200px
• Add an element
• Change the container size back to 500px
• Add 2 elements

Expect:

• It should not lose stickiness during the whole test

• Add 10 elements
• Scroll to top (losing stickiness)
• Add a <button> to the very bottom
• Press TAB to focus on the button

Expect:

• Browser will scroll down to show the button
• It should become sticky as it is on the bottom of the screen now

• Set a scroller of 0px
• Add an element

Expect:

• It should lose stickiness after adding an element

• Scroll up and lose stickiness
• Clear the container
• Add 10 elements

Expect:

• It should retain stickiness after the container is emptied

• Show command bar
• Scroll to bottom, it should gain stickiness
• Uncheck "Smooth" checkbox
• Click the "Scroll to end" button multiple times

Expect:

• It should not lose stickiness after clicking on the "Scroll to end" button multiple times