CSS Zibaldone

How to build an Acid Test

In this article I'll explain how to build an Acid Test on a CSS feature. The test will focus on the box model. We start from the following picture:

A smiling face

Figure 1. A smiling face

The result we want to achieve is the following:

The reference image

Figure 2. The reference image

Table of contents

The markup

When providing a test that will be used by browsers vendors, there are some simple rules to follow before writing down our markup. Let's start by viewing a prototype of a test page.

Listing 1. Page format for a test

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>CSS 2.1 Test Suite: Acid Test on the box model </title>
  6. <link rel="author" title="Gabriele Romanato" href="mailto:gabriele.romanato@gmail.com"/>
  7. <link rel="help" href="http://www.w3.org/TR/CSS21/box.html"/>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta name="flags" content="Valid" />
  10. <meta name="assert" content="UA should support the specified properties"/>
  11. <style type="text/css" media="screen">
  12. </style>
  13. </head>
  14. ...omission...

Some considerations:

  1. The markup must be valid and should have an XML prolog.
  2. The title of the page should be self-evident and clear.
  3. The link elements must provide two kinds of information:
    1. the author of the test (email or contact page)
    2. the relevant section of the specifications that's being tested.
  4. The meta elements must provide two kinds of information:
    1. the type of the test (Flags)
    2. what User-Agents (browsers) must do to pass the test (Assert).
  5. The relevant styles should be embedded in the page itself.

Furhermore, the test should be provided in two different formats: application/xhtml+xml (XHTML 1.1) and text/html (XHTML 1.0).

Positioning and initial formatting of the face

Our image is virtually divided into 15 rows, since its original dimensions are 150 x 150 pixels. So we're going to format one row per time, after setting the global dimensions of the main container.

Listing 2. Positioning and initial formatting of the face

  1. #face {
  2. font-size: 10px;
  3. width: 15em;
  4. margin: 2em auto;
  5. background: white;
  6. color: black;
  7. }
  8. .row {
  9. margin: 0;
  10. }

We've set a font size of 10 pixels so that 15em will be equal to 150 pixels. Then we've centered the face on the page through its horizontal automatic margins.

The top of the face

Since we're working with the box model, we won't use any declaration of width or height. Instead, we'll use only margins, padding, and borders to create our face. Here are the first styles:

Listing 3. The top of the face

  1. #top {
  2. margin-left: 5em;
  3. margin-right: 5em;
  4. background: black;
  5. padding: 0.5em 0;
  6. }

View the example

Our box will have a width of 5em, since it has its horizontal margins set to 5em (so 15em - 5em - 5em = 5em). Since we don't use an explicit height here, we have to set some vertical padding to make the background color appear. Our rows should be 1em high, so we set the vertical padding to 0.5em.

The forehead of the face

The following three boxes draw the forehead of our face.

Listing 4. The forehead of the face

  1. #forehead-1 {
  2. margin-left: 3em;
  3. margin-right: 3em;
  4. background: yellow;
  5. padding: 0.5em 0;
  6. border-left: 2em solid black;
  7. border-right: 2em solid black;
  8. }
  9. #forehead-2 {
  10. margin-left: 2em;
  11. margin-right: 2em;
  12. background: yellow;
  13. padding: 0.5em 0;
  14. border-left: 1em solid black;
  15. border-right: 1em solid black;
  16. }
  17. #forehead-3 {
  18. margin-left: 1em;
  19. margin-right: 1em;
  20. background: yellow;
  21. padding: 0.5em 0;
  22. border-left: 1em solid black;
  23. border-right: 1em solid black;
  24. }

View the example

The technique is very similar to the one above. The only difference here is that we've used horizontal borders to draw the outline of the face.

The eyes

The styles for the eyes allows us to use also negative margins, as shown below.

Listing 5. The eyes

  1. #forehead-4 {
  2. margin-left: 1em;
  3. margin-right: 1em;
  4. background: yellow;
  5. padding: 0.5em 0;
  6. border-left: 1em solid black;
  7. border-right: 1em solid black;
  8. }
  9. #eyes-1 {
  10. margin-left: 2em;
  11. margin-right: 2em;
  12. border-left: 2em solid black;
  13. border-right: 2em solid black;
  14. padding: 0.5em 0;
  15. }
  16. #head-1 {
  17. background: yellow;
  18. padding: 0.5em 0;
  19. border-left: 1em solid black;
  20. border-right: 1em solid black;
  21. }
  22. #eyes-2 {
  23. margin-left: 3em;
  24. margin-right: 3em;
  25. border-left: 2em solid black;
  26. border-right: 2em solid black;
  27. padding: 0.5em 0;
  28. margin-top: -1em;
  29. }

View the example

We've used a negative top margin to fix a side effect of the vertical padding used on each element. In fact, since the box that draws the second row of the eyes is contained inside another element, we have a gap of 1em, that is, the sum of the padding of the parent and its in-flow child.

The most part of the face

The following styles are really simple:

Listing 6. The most part of the face

  1. #head-2, #head-3, #head-4 {
  2. background: yellow;
  3. padding: 0.5em 0;
  4. border-left: 1em solid black;
  5. border-right: 1em solid black;
  6. }

View the example

Again, we've used horizontal borders to draw the outline of the face.

The smile of the face

The tecniques described below are very similar to those used for the eyes.

Listing 7. The smile of the face

  1. #head-5 {
  2. background: yellow;
  3. padding: 0.5em 0;
  4. border-left: 1em solid black;
  5. border-right: 1em solid black;
  6. }
  7. #smile-1 {
  8. margin-left: 2em;
  9. margin-right: 2em;
  10. border-left: 1em solid black;
  11. border-right: 1em solid black;
  12. padding: 0.5em 0;
  13. }
  14. #head-6, #head-7 {
  15. background: yellow;
  16. padding: 0.5em 0;
  17. margin-left: 1em;
  18. margin-right: 1em;
  19. border-right: 1em solid black;
  20. border-left: 1em solid black;
  21. }
  22. #smile-2 {
  23. margin-left: 2em;
  24. margin-right: 2em;
  25. border-left: 1em solid black;
  26. border-right: 1em solid black;
  27. padding: 0.5em 0;
  28. margin-top: -1em;
  29. }
  30. #smile-3 {
  31. margin-left: 3em;
  32. margin-right: 3em;
  33. padding: 0.5em 0;
  34. background: black;
  35. margin-top: -1em;
  36. }

View the example

We've used again negative margins to fill the gap caused by the vertical padding used on each element. The smile is actually made up of three different nested boxes per single row.

The final section of the face

We use some of the styles just seen above.

Listing 8. The final section of the face

  1. #head-8 {
  2. margin-left: 2em;
  3. margin-right: 2em;
  4. padding: 0.5em 0;
  5. background: yellow;
  6. border-left: 1em solid black;
  7. border-right: 1em solid black;
  8. }
  9. #head-9 {
  10. margin-left: 3em;
  11. margin-right: 3em;
  12. padding: 0.5em 0;
  13. background: yellow;
  14. border-left: 2em solid black;
  15. border-right: 2em solid black;
  16. }
  17. #bottom {
  18. margin-left: 5em;
  19. margin-right: 5em;
  20. background: black;
  21. padding: 0.5em 0;
  22. }

View the example

Download examples

examples.zip

Risorse interne

Altro

Risorse esterne

Post, demo, test

Feed dal blog

onwebdev

Gabriele Romanato