F2F/Auckland 2011/Intrinsic sizing tests

From SVG

During the development of SVG in IE9 we ran across several sizing issues. We did our best to investigate these as they related to the letter of the spec as well as interoperability. A lot of these came at the end of our cycle (some even post RC as we sent to the WG). This is what we uncovered. I mention specific browsers here not to highlight potential pitfalls, but rather to show our interpretation. So you may see something like "Opera does not" or "FireFox does not". Please don't perceive this as our assessment of one browser's quality over another. It is just a perspective on our interpreation of the the specification.

Opera

  • P1: For <embed> only Opera does not implement the part of section 7.2 of the SVG spec where <embed> should take its size from the hosted SVG if no size is specified on the element. Instead it reverts to the 300x150 intrinsic size.
  • P2: Adds viewBox for <img> when one is not present and the width and height are non-percent values. This is intentional.
  • P3: Ignores preserveAspectRatio=”none” for <object>, <embed>, <iframe> and <img> scenarios. (As does Firefox.) We haven’t found any reason for this special case and other preserveAspectRatio values seem to be respected.

Firefox 4 (beta 9)

  • P1: Does not implement the part of section 7.2 of the SVG spec where <object> and <embed> should override the size specified on the hosted SVG if a size was specified on the container. This leads to incorrect sizing and/or scrollbars when no scrollbars should be present.
  • P2: Firefox does take the size from the hosted SVG content when it is not specified on <object> or <embed>, but if that container is navigated to another SVG file with a different size, or to HTML content, the container size is not correctly updated.
  • P2: Future: Next Firefox 4 beta will have Opera’s <img> viewBox logic. (is this still the case?)
  • P2: SVG as CSS backgrounds does not appear to size or tile percent-sized SVG content correctly.
  • P3: Seems to ignore preserveAspectRatio=”none” for <object>, <embed>, <iframe>, and <img> scenarios.

Webkit

  • P1: Does not implement section 7.2 of the SVG spec at all, leading to two major classes of issues:
    • When the size is specified on the <object> or <embed> element it does not override the size specified on the <svg>. This causes incorrect sizing and/or scrollbars when no scrollbars should be present.
    • When the size is not specified on the <object> or <embed> element Webkit does not take the size from the hosted <svg> and instead reverts to 300x150 intrinsic size.
  • P1: Stretches SVG content to fit <img>. The stretching is non-uniform and ignores viewBox entirely.
  • P1: Percent sized SVG content that is referenced by an <img> scales unpredictably. (It seems to scale inversely proportional to the size of the window.)
  • P1: Percent sized content in HTML/XHTML is vertically sized against the height of the window, which is non-compliant CSS 2.1 sizing behavior. (It appears to be quirks-mode sizing behavior.)
    • This impacts both <svg> fragments in XHTML and all embedding scenarios. This also impacts non-SVG scenarios.
  • P1: Because of the above issues we cannot determine whether Webkit implements the intrinsic sizing/ratio logic for <object>, <embed>, or <img> that’s in the SVG 1.2 Tiny specification, section 7.14.
    • In general a lot of the more nuanced sizing behavior can’t be tested yet in Webkit.
  • P2: Zoom: SVG content referenced in <object>/<embed> has double scaling and/or clipping when zooming.
  • P2: SVG as CSS backgrounds does not appear to size percent-sized SVG content correctly.

IE9 RC

  • Bug: For <object> and <embed> that do not specify a size, when IE9 takes the size from the SVG and the height is > 150px, small unnecessary scrollbars will be added even though the content is sized correctly. This was fixed for RTM.
  • (found on Zombo)
    • IE9 was applying percent values for the width and height of the SVG when computing a viewBox for <svg> fragments instead of resolving the viewBox against the actual viewport resolved by layout.
    • IE9 does not compute an intrinsic ratio for <svg> fragments in HTML/XHTML so if only width or height can be resolved the other dimension will revert to intrinsic width or height. We are not certain whether the SVG 1.2 tiny wording applies this case.
  • SVG content used as CSS list-item images was not scaled correctly. This is fixed for RTM based on our interpretation of the spec, but all browsers are a little bit different here.

I will be adding specific test cases for discussion soon.

[Note: CSS3 object-fit/object-position also come into play here, affecting how images (including svg) are displayed. --Erik Dahlström 11:43, 21 February 2011 (UTC)]