Hit Testing

The goal of this effort is to define a consistent, cross-browser hit-detection behavior, and to build on that with features for practical use cases.

Definition

In computer graphics programming, hit-testing (hit detection, picking, or pick correlation) is the process of determining whether a user-controlled cursor (such as a mouse cursor or touch-point on a touch-screen interface) intersects a given shape, line, or curve drawn on the screen. This may be done for movements of the pointer or the underlying shape, or restricted to user-initiated selection, such as a mouse-click.

Hit-testing is important for user interfaces and interactivity.

In Web programming languages such as HTML, SVG, and CSS, this is associated with the concept of pointer-events (e.g. user-initiated cursor movement or object selection).

There are many different algorithms that may be used to perform hit-testing, with different performance or accuracy outcomes.

Collision detection is a related concept for detecting intersections of two or more different shapes, points, or lines, rather than intersection of one or more shapes with a cursor.

Defining 'pointer-events'

The SVG-turned-CSS property pointer-events (not to be confused with the Pointer Events WG's deliverable) allows authors to control whether a given element participates in hit-testing.

This was first defined in SVG 1.0, then implemented for HTML in WebKit and Firefox in 2008. It was initially slated to be defined in the CSS UI level 3 spec, but removed because there was some sentiment that it should not be defined until the whole hit-testing model for the open web platform is defined; the current draft was extracted and put into a wiki page for future reference.

Extending 'pointer-events'

A proposal by Paul Bakaus (Zynga) in April 2011 requests that the pointer-events property be extended, or a new property created, that allows variable hit-testing sensitivity on raster images based on the alpha values (transparency) of each pixel, so that transparent parts of a PNG could be clicked through. This would make writing sprite-based games easier and improve performance, though it may be challenging to implement, according to a reply by Alex Danilo (Google).

CSS Mailing List Thread

Leif Arne Storset, August 2010 presents a strong case for standardizing hit-testing, and describes useful details and next steps.

HTML5 Algorithm

From Hixie on www-style, February 2009:

I had some notes in the HTML5 spec about what IE does for hit testing. It 
was brought to my attention that the general consensus is that this should 
be solved by applying the 'pointer-events' property to all content.

Since some interest has been expressed regarding the notes I had, I have 
included them below.

I have also removed this issue from HTML5, under the assumption that the 
CSS specifications will at some future point deal with the issue.


HIT TESTING TRANSPARENCY

Definition: IE considers a point of an element "transparent" if any
one of the following are true:

1. All of the following are true:
   a: The computed value of 'background-image' is 'none', and
   b: The computed value of 'background-color' is 'transparent', and
   c: The point is over a pixel of an AlphaImageLoader filter image
      that has an alpha value of 0 (fully transparent), or the
      element does not have an AlphaImageLoader filter applied;

2. The point is outside the element's CSS clip rectangle;

3. The computed value of 'visibility' is 'hidden';

4. The element is a transparent IFRAME (in IE, an IFRAME with the
   custom attribute "allowtransparency");

5. The element is an OBJECT with the custom attribute "wmode" set to 
   "transparent" and the point in question is fully transparent.

Given those definitions, when a mouse event occurs, IE finds the
target element as follows:

  A. Take the topmost node that is under the point where the pointer
     was for the event. For CSS boxes, borders, padding areas and
     content areas are considered part of the node, margins and
     leading generated by the 'line-height' property are not.

  B. If there is no node at that point, no event is fired. STOP.

  C. If the node is a text node, then the event is fired at the text
     node's nearest ancestor element node. STOP.

  D. If the node is not an element, assign the node's nearest
     ancestor element node to a variable X. Otherwise, assign the
     element node itself to X.

  E. If the element X is the BODY element or the HTML element and its
     document is not the document of a transparent IFRAME, goto step
     H. Similarly, if the element X is a TABLE element, or is an IMG
     element, goto step H.

  F. If the point where the pointer was is, per the above definition,
     a point that on the element X is transparent, then ignore that
     element and assign the element that is below that element in the
     stacking order to X. If there is no element below X, or if the
     point on X is not transparent and so the previous condition
     doesn't apply, then leave X as is and go straight to step H.

  G. Goto step E.

  H. If the element X is now a BODY or TABLE element, but the element
     assigned to X in step D was some other element, assign the
     element originally assigned in step D back to X.

  I. The event goes to X. STOP

References

Computer Graphics: Principles and Practice 2nd Edition in C, Foley et al, Addison-Wesley, 1997.