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
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 and red follow the pointer if the pointer remains over the colored slider.
- For orange, this indicates that pointer capture was not recieved, with interference caused by an invisible child.
- For red, this incicates that pointer capture was not delegated up, with the visible slider causing interference.