Jump to: navigation, search

SVG Torture Tests

I had started something here, but this is a very early rough draft: Yes, the image is boring/ugly. However it is recognizable. I am open to better ideas, of course :)

My basic idea is that we construct a series of increasingly more complex tests that show support for a wide range of SVG features and really delve into the obscure syntaces, quirks of the spec. If you see the above starting point, I'm really trying to test every way of specifying colors, coordinates, etc in addition to other features of the spec.

Test 1

This test should cover basic things that all SVG implementors should handle. It includes integration of SVG with (X)HTML, XML syntax, all basic shapes and path segments, coordinate handling, units, transforms and more.

  • simple SVG integration:
    • SVG inline with XHTML
    • SVG referenced via html:object
    • SVG referenced via html:iframe
    • SVG referenced via html:img
    • SVG referenced via css background-image (dstorey had a couple different ideas for this one)
  • XML syntax (namespaces, comments, foreign elements/attrs, self-closing elements, close tags, CDATA, text nodes, XML prolog)
  • all basic shapes (line, polyline, polygon, circle, ellipse, rect)
  • all path segment types except elliptical arcs (a,A)
  • use element referencing local element
  • switch element showcasing requiredFeatures, requiredExtension
  • image element for rasters:
    • local URIs
    • absolute URI
    • data: URIs
  • coordinate systems
  • units
  • all transformation types (scale, translate, rotate, skewX, skewY, matrix)
  • color formats
  • opacity
  • list syntax (commas, whitespace) - investigate Scour for that bug I fixed)
  • CSS features:
    • external CSS - should it be allowed for <img> and background-image?
    • proper cascade/inheritance

Test 2


  • text selection
  • text on path (with decoration)
  • DOM support:
    • do some major properties exist in the DOM? (document, documentElement, childNodes, firstChild, etc)
    • set attributes from within DOM based on getting attributes of other elements
    • creation of nodes
    • cloning of nodes
    • append, insertBefore, remove children
    • test SVGTransformList
    • test SVGPathSegList (normalized and others)
    • test style.XXX manipulation
    • test rect.x.baseVal.value manipulation
  • Random (potentially) invalid content:
  • "Smart" potentially erroneous content:
    • single point polyline and similar edge cases
    • shapes with missing attributes (line with only "x1" and "y1" attributes defined, for example)
    • zero length dimensions/stroke-width/font-size, etc.
      • known to crash Renesis 1.1, for example (link to bug tracker no longer available)
    • negative lengths
  • Limits:
    • test infinitely large/small (both positive and negative) coordinates and (positive) lengths

Helder: should we start using the project tracker for this sort of tasks? A preliminary brainstorm in the wiki is probably useful, for the moment... :-)


Since this is an area that some browsers are only now getting into, maybe it should be a separate section??

  • simple SMIL support:
    • set, animate on various geometric (numeric) properties, time-based
    • animate color values
    • animate enumerable values with <set>
    • animate non-numeric attribute values (like named values of "fill" such as "red" and "papayawhip" or <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"> <animate attributeName="mode" dur="5s" values="screen;multiply;lighten;darken;" repeatCount="indefinite"/> </feBlend> )
    • animate multi-valued attributes (like path "d") (see -- example can/should be simplified )
  • animate path
  • animate list data
  • animateMotion
  • animateTransform
  • event-based animation (click)
  • sync-based animation

At any rate, here are some interesting things (URL's with scores by browser:

IE/ASV 100% Opera - 100% Chrome & Safari - 66% Firefox - 40%

IE/ASV 100% Opera 10 - 95% (Opera 9.5 was only at about 78%) Chrome & Safari - 10% Firefox - 40%


For some methodological questions, see discussion tab.