For quick reference purposes, here are two images, one which will take 60 seconds to not load and another which will be immediately recognised as broken: [long alt text] [long alt text]

The alternative text of the IMG element - part 2

Prerequisites
Browsers that are subjected to this test should support the IMG element, although they need not be graphical browsers.

See also the ALT text mini FAQ.

Behaviour should IMHO be as described in my spec.

So, without further delay, lets check the behaviour in all these cases...

1. Prior to download attempt

Prior to download attempt, if download attempt is going to be attempted (i.e., not if images are disabled), then...

1.1 If the image size is given

If the image size (width&height) is given (eg, from HTML attributes or from applicable CSS properties), then leave a transparent gap of the right size where the image will end up, using CSS2 replaced content rules as appropriate.

Instead of a transparent gap, some browsers may opt to draw a box with a "missing image" glyph and the alternate text. This is just as acceptable.

1.1.1 Image size given by HTML

The image below (which is 0 bytes long) will take 60 seconds to download. The image has been given, using HTML attributes, a width and height of 50 pixels. Therefore below this paragraph there should be a single inset box with a height of just over 50 pixels (and a width of most of the viewport).

[alt]

1.1.2 Image size given by CSS

The image below (which is also 0 bytes long) will also take 60 seconds to download. The image has been given, using CSS properties, a width and height of 50 pixels. Therefore below this paragraph there should be a single inset box with a height of just over 50 pixels (and a width of most of the viewport).

[alt]

1.2 If the image size is not specified...

If the image size is not specified, then draw in the alternate representation as described below.

The easiest way to test this is to do it at the same time as the broken images. Hence the tests for this section are actually shown in section 2.2.

2. After the download attempt

2.1. If the image is valid

Tests for this are out of scope for this test page.

2.2. If the image is not valid

If the image is not valid, then insert the alternative text into the document as if it were generated content, removing any placeholder gap. The alternative text should be generated using the rules below.

2.2.1. The alt attribute

If alt attribute is present, then use that (even if empty).

There should now follow twenty five identical lines. (Note. Some have numbers in brackets at the end. Please ignore those numbers, they are placeholders for investigating bugs.)

Here is a missing image. (1)

Here is a missing image. (2)

Here is a missing image.

Here is a missing image.

Here is a missing image.

Here is a missing image.

Here is a missing image.

Here is a image. (3)

Here is a missing image.

Here is a image.

Here is a image.

Here is a missing image.

Here is a missing image.

Here is a missing image. (4)

Here is a missing image.

Here is a missing image.

Here is a missing image.

Here is a missing image.

Here is a missing image.

Here is a image. (5)

Here is a missing image.

Here is a image.

Here is a image.

Here is a missing image.

Here is a missing image.

2.2.2. Not the alt attribute

If there is no 'alt' attribute then for INPUT elements, the value attribute should be used, defaulting to the same string as a normal submit button. For IMG elements, the lack of an 'alt' attribute should cause the alternate text to be blank.

There should now follow seven identical lines.

Here is a missing image.

Here is a missing image.

Here is a missing image.

Here is a missing image.

Here is a missing image. (4)

Here is a missing image.

Here is a missing image.

There should now follow seven identical lines, except that the styling on the first might be different.

Here:

Here:

Here:

Here:

Here:

Here:

Here:

3. Clicking on alt text

Ensure that clicking on the alt texts does not cause any problems:

CLICK ME! (1)

(2)

Ensure that clicking on the following links takes you to the placeholder page:

CLICK ME!

Positioned images and other 'clever' stuff

The text below should be self explanatory.

This text should be bold.

This text should be underlined and overlined.

This text should be right aligned.

This text should be capitalised.

The first letter of this paragraph should be twice the size of the rest of the text, and yellow on navy with a purple double border.

This text should be spaced apart.

This text should start half way across the viewport.

Any other ideas?

Resizes

Resize your browser window (if applicable to your browser) and see if anything strange happens... It shouldn't (obviously!).

Submit Results

How does your browser fare on this test?

Up to the Evil Tests Page.

Bugzilla: Bug 1994, Bug 2534, Bug 2723, Bug 2756, Bug 3008, Bug 3268, Bug 4354, Bug 4584, Bug 4661, Bug 5764, Bug 5830, Bug 6166, Bug 6553, Bug 6559.

Last updated in July 1999.