General style rules: outer object elements have a red border, nested objects a green border, doubly nested a blue border; all fallback text is in a span element within the object and is styled with a yellow background. Spans that are not in an object (and this is the only one) are styled with a pink background.
Using img to display the image:
Now with object, with a correct type attribute. You should see the word CORRECT! here (with a red border added by the style sheet to all objects):
The same case, but without using the 'type' attribute. It should give the identical result:
A missing image, the URL is to a nonexistent document: you should see the fallback text (which says "Correct!) with a yellow background (added by the stylesheet to all fallback text, and the border added to the object):
The type attribute says it is an unknown type, and it really is. You should see the fallback text instead (which starts "This is the fallback text.")
Now an object, with the same image, but incorrectly with a non-existent type attribute (image/foo). Since the type attribute is only a hint, if you see the image (correct!) the browser has ignored the type attribute and decided it could process the image anyway. If you see the fallback text it has used the type attribute and decided it doesn't know how to process the image. Either behaviour is acceptable:
A nonsense file, it should not try to display the image, but display the alternate text instead (which starts "If you can read this,"):
The type attribute says it's a gif, but it isn't (it's a nonsense file). Since the 'type' attribute is only advisory, it should not try to display the image, but display the alternate text instead (which starts "If you can read this,"):
Nested gifs. You should see the word "CORRECT!", from the outer nested object, and nothing else:
Four nested objects. The outer one is garbage (non-existent type, garbage file). The next one is the correct one. The next two should therefore be ignored. Therefore you should only see the word "CORRECT!" once: