These are a couple of tests on SVG and DOM that I've made a long time ago. In the first test, I'm simply checking whether it's possible or not to create a svg element with attributes and styles. The attached styles are:

div[id="test"] {
 width: 200px;
 height: 200px;
 background-color: red;
}

svg, rect {
 display: block;
}

rect {
 width: 200px;
 height: 200px;
 background-color: green;
}

and the JavaScript code is:

window.onload = function () {

 var test = document.getElementById("test");
 var svg = document.createElement("svg");
 svg.setAttribute("width", "200");
 svg.setAttribute("height", "200");
 svg.setAttribute("version", "1.1");
 svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
 test.appendChild(svg);
 var rect = document.createElement("rect");
 rect.setAttribute("x", "0");
 rect.setAttribute("y", "0");
 rect.setAttribute("width", "200");
 rect.setAttribute("height", "200");
 rect.setAttribute("fill", "green");
 svg.appendChild(rect);
 
 
 
};

You can see this test here. It works fine in all supporting browsers. In the second test, instead, I have the following markup:

<div id="test">

 <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
  <rect x="0" y="0" width="200" height="200" />
 
 </svg>

</div>

with the following styles:

div[id="test"] {
 width: 200px;
 height: 200px;
 background-color: red;
}

I want to test whether it's possible to set a SVG style attribute via the DOM. The JavaScript code is as follows:

window.onload = function () {


 var rect = document.getElementsByTagName("rect")[0];
 rect.setAttribute("fill", "green");

 
 
 
 
};

You can see this test here. It works fine in all supporting browsers. In the third and last test I have the same markup showed above. What I want to demonstrate is simple: setting a CSS rule via the DOM by using a SVG style property. Here's the JavaScript code:

window.onload = function () {


 return document.styleSheets[0].insertRule("rect {fill: green}", document.styleSheets[0].cssRules.length);

 
 
 
 
};

You can see this test here. It works fine in all supporting browsers.

Sometimes people ask me what's the point in creating a so huge collection of CSS tests. So here are some explanations. First of all, the tests I made are just the result of a good amount of spare time. Being unemployed for a long time forces you to do something with your time schedules. Usually I started wondering about some issues with CSS layouts, for example about floats, positioning and the like and then I used to create a test case that could show why something worked or not. These are basically how my first tests look like to a visitor stumbling for the first time on them. But then came the W3C CSS Test Suite, where I had to get rid of my bad coding habits and get used to code following certain rules.

These kind of CSS tests are rather cryptic, because you have to look at the meta information of the page to see how they should work. I think that these tests are not very useful for a casual reader. It's better to stick to complete layouts and demos to get an idea about how a certain combination of properties should work together. So you should make a choice: W3C testing style or your own testing style. Be aware, however, that your custom style should be self-explanatory or you'll probably end up with receiving mails from people saying "Man, I didn't understand how to do this and that.".

When you make a test, just simply ask yourself what you're going to demonstrate. If it's not clear in your mind what you're going to show to your visitors, it's more likely that you'll fail with your purpose. Second, be clear, Third, even with complex layouts, write a good explanation about how your page should look like and, if proper, provide some screenshots. Remember: if something is not clear to you, it's likely that even your readers will have problems with your tests. So theory first: read the CSS specifications, read tests made by other developers, read the most relevant tutorial on the topic of your choice and, finally, be creative. Further, be ready to update your tests when browser support changes or a new bug comes along. By doing so, your tests will be simply useful and your visitors will be happy.

Here are some notes taken from my CSS and SVG tests:

Notes:

1. Inserting a SVG document in a web page

   Inserting a SVG document through the object element works well in all supporting browsers. Instead, using the img element works only in Safari.

2. Styling SVG documents

   There's no way to apply CSS 2.1 styles directly to a SVG document (see SVG specifications ). On the contrary, we can work on svg blocks when embed in a (X)HTML or XML document.

3. Hidden elements

   Certain SVG elements, such as title and desc cannot be rendered on the page. They work in the same way as the elements contained inside the (X)HTML head element.

4. Using a SVG document as a background image

   Supporting browsers don't allow a SVG document to be used as a background image of an element. So the following code won't work:

   1. element {
   2. background-image: url("file.svg");
   3. }

5. Positioning

   For positioning, we should always work on the entire svg block. Applying positioning styles on its descendants doesn't work.

6. The 'text' element

   The text element accepts only font-related properties (font-family, font-weight etc.). Opera needs also 'font-size: 1em'. Otherwise, the text is showed in a smaller font size.

7. The 'svg' element and the box model

   The svg element accepts borders, background properties and padding. In order to apply also margins, this element must be turned into a block box.

8. XLink support

   Although Opera and Safari don't support XLink per se, in the case of a SVG document they honor the specified linking (see image-000.xml as testcase).

9. Internet Explorer's support

   Internet Explorer 7 (and lower) doesn't support SVG. However, when a SVG fragment is embedded in a XML file and there are some CSS styles applied to it, Internet Explorer 7 honors the specified styles, treating the svg element (and its descendants) as normal XML elements, as shown in the following picture ( box-model-fonts-000.xml).

   

10. Not working styles

    Applying the following styles to a polygon element doesn't work. We should use inline styles instead.

    1. polygon {
    2. filter: url(value);
    3. stroke: value;
    4. stroke-width: value;
    5. stroke-opacity: value;
    6. fill: value;
    7. fill-opacity: value;
    8. }

    See complex-000.xml.

To do: make new tests!