W3C home > Mailing lists > Public > whatwg@whatwg.org > November 2014

[whatwg] How do CSS "object-position" & "object-fit" affect the coordinates used by image <map>/<area>?

From: Daniel Holbert <dholbert@mozilla.com>
Date: Thu, 06 Nov 2014 12:36:39 -0800
Message-ID: <545BDBD7.1040400@mozilla.com>
To: WHAT Working Group <whatwg@whatwg.org>
Hi whatwg,

I'm working on implementing the "object-fit" & "object-position" CSS
properties in Gecko (which allow authors to adjust the
scaling/positioning behavior of image data inside of an <img> element),
and I'm wondering how these properties should affect the coordinate
space that's used by the <map> & <area> elements.

Spec reference for <map> and <area>:
https://html.spec.whatwg.org/multipage/embedded-content.html#processing-model-2

QUESTION: The processing model's "step 8" says to interpret coordinates
as "CSS pixels from the left [or top] edge of the image".  i.e.
coordinates are relative to the top-left corner of the image.  But, what
does that mean, for an image that's being rendered under the influence
of "object-fit" / "object-position"?

Should these coordinates be relative to...
 (A) ...the top-left corner of the <img> element itself?
OR
 (B) ...the top-left corner of the rectangle where the image's pixel
data actually maps to? (which may be inside or outside the bounds of the
<img> element) (Of course, parts outside the <img> won't render and
shouldn't receive clicks, but the rect is still there.)

I tend to think "B" is the correct answer, but I'm not 100% sure, and
I'd like a sanity-check.

(Chrome is the only implementation that I've tested on this, and it
appears to choose (A), which seems wrong to me. I'm not sure this was a
conscious choice on the part of the developers, though, since this
admittedly an obscure use-case, and easy to miss.)

Also, FWIW: at the bottom of that same section, the spec says:
  # For historical reasons, the coordinates must
  # be interpreted relative to the displayed image
  # after any stretching caused by the CSS 'width'
  # and 'height' properties.
  #
  # Note: [...] transforms applied using CSS or SVG
  # do not affect the coordinates.

That seems relevant, but it still leaves things vague for me.

Thanks!
Daniel Holbert
Mozilla

P.S. For reference, object-fit/object-position are specced here:
http://dev.w3.org/csswg/css-images-3/#propdef-object-position
Received on Thursday, 6 November 2014 20:37:04 UTC

This archive was generated by hypermail 2.3.1 : Monday, 13 April 2015 23:09:32 UTC