SVG Torture Tests

I had started something here, but this is a very early rough draft: http://www.codedread.com/acid/acid1.html 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

• elliptical arc path segments (??http://srufaculty.sru.edu/david.dailey/svg/newstuff/arcsSimple.svg ??)
• nested <svg> elements
• inline style attribute
• style elements
• SVG inline with HTML5 (inheritance of style from HTML), given the importance of HTML5 maybe we want this to be in Test 1?
• HTMLish syntax:
  • quoteless attributes
  • mixed case elements/attributes
  • duplicate attributes
• SVG referenced via svg:image
• gradient support (linear and radial, offsets, stop-color, stop-opacity)
• masking (see http://srufaculty.sru.edu/david.dailey/svg/newstuff/mask6.svg -- and discussion concerning "what constitutes passing?")
• simple SVG text support:
  • text, tspan elements
  • text decoration (see http://srufaculty.sru.edu/david.dailey/svg/newstuff/text6.svg )

Bucket

• 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:
  • see Mozilla SVG bug 306098 for some background and/or inspiration
• "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
    • known to have crashed Firefox (Mozilla SVG bug 393832) in the past

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... :-)

SMIL

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 http://srufaculty.sru.edu/david.dailey/svg/newstuff/path10.svg -- 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:

http://srufaculty.sru.edu/david.dailey/svg/ovaling.svg

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

http://srufaculty.sru.edu/david.dailey/svg/newstuff/clipPath4.svg

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

Discussion

For some methodological questions, see discussion tab.