Reference

http://wiki.csswg.org/spec/css3-ui#issue-5, especially link 3.

Why am I bringing this back up?

• I would like to know if there has been any decision (in the specs) about the 6 states mentioned below.
• What is the proper way (according to specs) to code all 6 states mentioned below? Or which ones are still undetermined?
• I would like to contact the IE devs regarding some problems.

Confusion about specs/implementation

It should be possible to enable any one of 4 different states:

	Floating SVG element (position:absolute)	Inline SVG element
Non-blocking/non-interactive (does not trigger events)	[1] critical (no workaround)	[2] useful (complex workaround)
Blocking/interactive (triggers events)	[3] non-critical (easy workaround)	[4] non-critical (easy workaround)

Also, there is a question about what should be the default state:

[5] Default State for: Floating SVG element (position:absolute)

[6] Default State for: Inline SVG element

This make a total of 6 different states. However, only state [1] is absolutely critical (since there are no workarounds if a browser does not provide support for it).

What I am testing

I have provided some test results for two states: State [1] and State [2]

How

To test States [1] and [2], I added "pointer-events:none" to the svg tag. In theory this should mean the svg tag should be non-blocking and should not trigger pointer events.

Unfortunately, much of this was still up in the air (spec-wise) when I last visited this issue months ago. So I do not know the proper way to test the other 4 states (and, for all I know, I may even be testing all of them wrong).

Tests

• Two Quick Testcases for States [1] and [2] The green one tests state [1]. The blue one tests state [2]
  • Firefox 4.0B12pre (2011-02-16) - passes both
  • Opera 11.11, Build 2109 - passes both
  • Safari 5.0.5 (7533.21.1) r87071 - passed both
  • IE 9.0.8112.16421 - fails critical test [1]; passes test [2]
• 48 tests These test states [1] and [2] more thoroughly. They cover the 6 examples at the bottom of this page. Tests 1-3 are for state [1]; tests 4-6 are for state [2]
  Note: Tests 1 & 3 are critical (absolutely necessary that they must pass).
  Current results:
  • Firefox 4.0B12pre (2011-02-16) - passes all, except "mousewheel"
  • Opera 11.11, Build 2109 - passes critical 1 & 3, but fails semi-important 4 & 6 (pass: 1,2,3,5; fail: 4,6)
  • Safari 5.0.5 (7533.21.1) r87071 - passes all
  • IE 9.0.8112.16421 - fails critical tests 1 & 3 (pass 2,5; fail: 1,3,4,6)
• Manual Tests It's not enough to just try the scripted tests. There are some things related to user interaction that must be tested manually. Some of these are critically required functionality.
  Current results:
  • Firefox 10.0a1 (2011-10-20) - passes all tests
  • Opera 11.11, Build 2109 - passes all critical tests (7.1 is "iffy": Opera lets you select text in 7.1)
  • Safari 5.0.5 (7533.21.1) r87071 - passes all critical tests (does not work for: 5.1,6.1,7.2,8.4,8.5 because Safari does not have a context menu for SVG)
  • IE 9.0.8112.16421 - interestingly enough, IE passes most of the critical stuff, but it is problematic in a few ways:
    • 1-4 - shows extra options for svg -- this could be annoying/problematic
    • 5.2 fails: the cursor changes and it also shows the url in the status indicator at the bottom
    • 7.3 shows the I bar when it shouldn't
    • 8.1 shows teh I bar, but it shouldn't
    • 8.3 - the button highlights when you hover over; it shouldn't