Before you start, display the browser console with Ctrl-Shift-k.
Click a button to do a selection action. The exact selection object that got created will be printed to the console.
You can also click, drag or use keys to create a selection, and when you do, the selection object will be printed to the console too. (If nothing is printed, your click didn't change the selection.)
This means you can compare the selection you get manually with what we can construct in code.
Read selections.js to see how the different actions are implemented.
The reason this page exists is because it's surprisingly difficult to recreate the exact Selection object that is created when you manually click or cursor around.
One thing that is particularly difficult is "backward" selections (where you clicked and dragged from right to left). These are very flakey in various browsers, so you may not need to consider them. There are behaviour differences in some rare cases, though.
Note: a lot of this stuff changes if you have line breaks inside your div. (Not BR tags, but actual line breaks in the HTML source code, so I would recommend avoiding that.
Source code is at gitlab.com/andybalaam/browser-selections. Written while trying to write decent browser-based tests for matrix-wysiwyg.
See also my blog post: Setting the text selection in a browser: just use setBaseAndExtent.