How the elements are structured
All event handlers are on the colored elements. The element structure, the target of the initial event, and the recipient of pointer capture vary in each test case, as described below.
- Green is a single div that recieves both the initial event and the capture.
- Yellow is a div where a child element recieves the initial event and the capture.
- Orange is a div where a child element recieves the initial event and the colored element recieves the capture.
- Red is a div that recieves the initial event and the parent element recieves the capture.
What should happen
Green, yellow, and orange should all move with the pointer if the pointer sequence starts on the colored element.
Red should never move.
What does happen (post Safari 15.5)
Green and yellow correctly follow the pointer.
- For green, this means that pointer caputer works correctly in a minimal layout sitution.
- For yellow, this means that pointer capture can be delegated down to whatever element was the target of the initial event.
Orange might not move for one event (barely noticable, except for through the console logs),
Red might move for one event (noticable as a slight change in position, both conditional on the pointer remaining over the slider element.