Layout Mode Test

No quirks mode!

Also known as the full standards mode.

Limited quirks mode!

Also known as the almost standards mode.

Quirks mode!

Also known as the mode you should not use.

JavaScript disabled

This test requires JavaScript.

Test document and content type browser support

This page allows you to check what kind of layout mode is triggered when a page is served with a certain DOCTYPE and content type combination. This page has no value in pre-IE6 browsers as all of those could only render in quirks mode.

The test

Test itself is rather simple: first level test is to see whether document.body's clientWidth and offsetWidth are the same. They always match in not quirk modes, ie. the so-called standards mode. There are actually a separation to two "standards" modes: no quirks and limited quirks. To ensure the browser is in either standards mode, the CSS parsing behavior is checked for: incorrect color values should be omitted.

Finally, to distinguish between the two standards modes, a check for table cell height with a single 1px image is ran: the cell should be the height of the text, if it instead is only 1 pixel then we are in the limited quirks mode and not in the no quirks mode.

The page switches between HTML and XHTML output depending on whether it should be well formed XML or not. The HTML/XHTML validates with the most common DOCTYPEs. The CSS does not validate as invalid CSS is required by the test.

See also...

Similar test for XHTML 1.1 with XML and XSLT served as application/xml (because you can't serve application/xhtml+xml to Internet Explorer).

DOCTYPE and media type

(W3C: XHTML Media Types)