Skip to content

Image maps project

Josh Matthews edited this page Sep 14, 2016 · 3 revisions

Implement HTML image map support

Background information: Image maps are an old HTML technology that allows treating arbitrary areas in an image as separate hyperlinks. Servo does not support them yet; the goal of this project is implement this missing feature.

Note: there are tools that can create image maps for testing. The Space Jam website contains a great premade example.

Initial steps:

  • compile Servo and ensure that it runs on tests/html/about-mozilla.html
  • email the mozilla.dev.servo mailing list (be sure to subscribe first!) introducing your group and asking any necessary questions
  • define an Area enum in htmlareaelement.rs that supports rectangles, circles, and polygons (ie. coordinate representations)
  • implement constructors for each variant that accept a string argument, parse them into appropriate coordinates, and return an appropriate Area instance
  • implement a hit_test method on Area that accepts a Point2D<f32> argument and returns true if the point is within the area's coordinates (return false for all polygonal areas)
  • write tests for the Area constructors and hit tests (add a new htmlareaelement.rs to tests/unit/script/ and run ./mach test-unit -p script)
  • add a method to HTMLAreaElement that returns an Area value derived from that element's attributes

Subsequent steps:

  • add a method named areas to HTMLImageElement that returns a vector of Root<HTMLAreaElement> values - these are the result of finding the HTMLMapElement specified in the image's usemap attribute, then retrieving its child HTMLAreaElement elements
  • write a method for HTMLAreaElement that implements the activation behaviour defined in the specification (see HTMLAnchorElement::activation_behavior for a good model)
  • implement the handle_event method for HTMLImageElement (as part of VirtualMethods) - if the event is a click event, iterate over the list of associated HTMLAreaElements and hit-test the Area values against the click event's coordinates. If an area matches, invoke the HTMLAreaElement's activation behavior
  • extra credit: implement polygon hit testing
Clone this wiki locally