Notes on CSS generated content tests

Here are some notes on my tests.

1. table-values-000

   This test focuses on the support for table values. CSS 2.1 specifications state that

   "The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached" and "In a :before or :after pseudo-element declaration, non-inherited properties take their initial values".

2. table-values-001

   Same as table-values-000. In this test we use the 'inline-table' value.

   Note: 'inline-table' is a valid CSS 2.1 value.

3. pseudo-elements-000

   Here we test the interaction between the :before and :after pseudo-elements and the :first-line pseudo-element. This is an aspect of the specs that is not perfectly clear.

4. pseudo-elements-001

   Same as pseudo-elements-000.

5. replaced-elements-000

   This test focuses on the insertion of an image before the main content of an element (which is also an image). Both images are identical and should have the same dimensions and vertical alignment. The parent element has stated dimensions, which are equal to the height of a single image and to their total width (100px x 2).

6. content-url-000

   Here we test the 'content: url()' syntax, in order to check if a UA is able to recognize a file without an explicit extension, based only on its content.

7. content-char-000

   This test focuses on the positioning of generated content. The figures provided should be aligned on the same baseline.

8. content-computed-000

   This test focuses on the computed value of the 'content' property. The JavaScript used here is pretty simple:

      function showStyle() {
    var elem = document.getElementById("content");
    var computedStyle = window.getComputedStyle(elem, "");
    var content = computedStyle.getPropertyValue("content");
    var p = document.createElement("p");
    p.innerHTML = content;
    p.style.backgroundColor = "#0c0";
    p.style.color = "#fff";
    p.style.padding = "1em";
    p.style.font = "bold 1em sans-serif";
    elem.appendChild(p);
      }
      

9. counter-increment-computed-000

   Test on the computed value of the 'counter-increment' property. The JavaScript used here is pretty simple:

      function showStyle() {
    var elem = document.getElementById("content");
    var computedStyle = window.getComputedStyle(elem, "");
    var content = computedStyle.getPropertyValue("counter-increment");
    var p = document.createElement("p");
    p.innerHTML = content;
    p.style.backgroundColor = "#0c0";
    p.style.color = "#fff";
    p.style.padding = "1em";
    p.style.font = "bold 1em sans-serif";
    elem.appendChild(p);
      }
      

10. counter-reset-computed-000

    Test on the computed value of the 'counter-reset' property. The JavaScript used here is pretty simple:

       function showStyle() {
     var elem = document.getElementById("content");
     var computedStyle = window.getComputedStyle(elem, "");
     var content = computedStyle.getPropertyValue("counter-reset");
     var p = document.createElement("p");
     p.innerHTML = content;
     p.style.backgroundColor = "#0c0";
     p.style.color = "#fff";
     p.style.padding = "1em";
     p.style.font = "bold 1em sans-serif";
     elem.appendChild(p);
       }
      

11. content-char-001

    This test focuses on special characters inserted via the 'content' property. There should be two identical Greek fragments on the page.

    Note: The fragment is by Sappho. It means "The stars around the beatiful moon". The pronunciation is " 'asteres am'phi 'kallan se'lannan " and it should be similar to the Italian one.

12. counters-display-000

    Test on counters and the 'display' property set to 'none'. Such declaration should reset a counter on the specified element.

13. counters-visibility-000

    Test on counters and the 'visibility' property set to 'hidden'. Such declaration should not reset a counter on the specified element.

14. counters-pseudo-elements-000

    This test focuses on the interaction between pseudo-elements (:first-line) and counters. This is a not-well defined issue.

15. counters-dynamic-000

    Test on dynamic counters inserted via the DOM. The JavaScript code used here is pretty simple:

      function insertRules() {
     var styleRule1 = document.styleSheets[0].insertRule
     ("ul {counter-reset: item;}", document.styleSheets[0].cssRules.length);
     var styleRule2 = document.styleSheets[0].insertRule
     ("li {display: block;}", document.styleSheets[0].cssRules.length);
     var styleRule3 = document.styleSheets[0].insertRule
     ("li:before {counter-increment: item;}", document.styleSheets[0].cssRules.length);
     var styleRule4 = document.styleSheets[0].insertRule
     ("li:before {content: counter(item)'. ';}", document.styleSheets[0].cssRules.length);
       }
       

16. counters-display-001

    Test on counters and the 'display' property set to 'none'. Such declaration should reset a counter on the specified element. This time we test the interaction with the 'counters()' function.

17. counters-visibility-001

    Test on counters and the 'visibility' property set to 'hidden'. Such declaration should not reset a counter on the specified element. This time we test the interaction with the 'counters()' function.

18. counters-style-000

    Test on the style of counters. Although CSS 2.1 allow the values 'disc', 'circle' and 'square' for counters, the rendering is obviously undefined, since a counter should not have a graphic symbol but only a number. Numbers belong to well-known numeric systems, but other glyphs depend on the UA rendering conventions. Opera does not show the bullets, since this is perfectly meaningless in a numbering context.

19. counters-style-001

    Test on the style of counters. More precisely, this test focus on the values 'lower-alpha' and 'upper-alpha'. Note that CSS 2.1 encourage authors to use true numbers instead of alphabetical letters, since the rendering after the last letter of an alphabet is undefined.

20. counters-exac-000

    This is an advanced test on counters. The following CSS needs a further explanation.

      div[id="exac"] {
     counter-reset: bit0 -1 e2 total e10 -1;
      }
    
      span[class="bit0"]:before {
     counter-increment: bit0;
     content: counter(bit0);
      }
    
      span[class="bit1"]:before {
     counter-reset: bit1;
     counter-increment: bit1;
     content: counter(bit1);
      }
    
      sub[class="e2"]:before {
     counter-increment: e2 2;
     content: counter(e2);
      }
    
      span[class="total"]:before {
     counter-increment: total 15;
     content: counter(total);
      }
    
      sub[class="e10"]:before {
     counter-increment: e10 11;
     content: counter(e10);
      }
      

    The first group of declarations creates a general scope for all the counters used inside the #exac element. The counters named as 'bit0' and 'e10' have a negative value. When incremented, the first have the value 0, while the latter will be incremented by 11 and have the value 10 (11-1). The 'counter-increment' property set in the 4th and 5th blocks has a specific value (2 and 15, respectively), so all the instances of those elements get these values. The third block focus on a particular feature of the current implementations used by most UA. According to specs, an element can always reset and increment a counter on itself. Although this is perfectly correct, most UA will not increment the counter on all the instances of the element, so we get the same number for all elements (1 in this case).

21. content-attr-000

    This test focuses on the 'attr()' function of the 'content' property. The element targeted has a class with a special character (@). UA should insert this value.