<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Media types - CSS 2.1 Conformance Test Suite</title> <style type="text/css"> @import "http://www.w3.org/StyleSheets/TR/base.css"; @import "../indices.css"; </style> </head> <body> <h1>CSS 2.1 Conformance Test Suite</h1> <h2>Media types (22 tests)</h2> <table width="100%"> <col id="test-column"> <col id="refs-column"> <col id="flags-column"> <col id="info-column"> <thead> <tr> <th>Test</th> <th><abbr title="Rendering References">Refs</abbr></th> <th>Flags</th> <th>Info</th> </tr> </thead> <tbody id="s7"> <tr><th colspan="4" scope="rowgroup"> <a href="#s7">+</a> <a href="http://www.w3.org/TR/CSS21/media.html">7 Media types</a></th></tr> <!-- 17 tests --> <tr id="media-dependency-001-7" class="primary"> <td><strong> <a href="media-dependency-001.htm">media-dependency-001</a></strong></td> <td></td> <td></td> <td>@media and target mediums <ul class="assert"> <li>@media with a target medium applies styles on that target medium (screen).</li> </ul> </td> </tr> <tr id="media-dependency-002-7" class="primary"> <td><strong> <a href="media-dependency-002.htm">media-dependency-002</a></strong></td> <td></td> <td></td> <td>@import and target mediums <ul class="assert"> <li>@media with a target medium applies styles on that target medium (screen).</li> </ul> </td> </tr> <tr id="media-dependency-003-7" class="primary"> <td><strong> <a href="media-dependency-003.htm">media-dependency-003</a></strong></td> <td></td> <td></td> <td>Link tags and target mediums <ul class="assert"> <li>Link with a target medium applies styles on that target medium (screen).</li> </ul> </td> </tr> <tr id="media-dependency-004-7" class="primary"> <td><strong> <a href="media-dependency-004.htm">media-dependency-004</a></strong></td> <td></td> <td></td> <td>Case-insensitive media types <ul class="assert"> <li>Media types are case-insensitive.</li> </ul> </td> </tr> <tr id="media-dependency-005-7" class="primary invalid"> <td><strong> <a href="media-dependency-005.htm">media-dependency-005</a></strong></td> <td></td> <td><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> <td>Ignoring bad media types with @import <ul class="assert"> <li>User agent ignores media types it does not understand with @import.</li> </ul> </td> </tr> <tr id="media-dependency-006-7" class="primary invalid"> <td><strong> <a href="media-dependency-006.htm">media-dependency-006</a></strong></td> <td></td> <td><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> <td>Ignoring bad media types with @media <ul class="assert"> <li>User agent ignores media types it does not understand with @media.</li> </ul> </td> </tr> <tr id="media-dependency-007-7" class="primary"> <td><strong> <a href="media-dependency-007.htm">media-dependency-007</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums <ul class="assert"> <li>The @media block does not apply because it does not match the target medium.</li> </ul> </td> </tr> <tr id="media-dependency-008-7" class="primary"> <td><strong> <a href="media-dependency-008.htm">media-dependency-008</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums and @import <ul class="assert"> <li>The @import command does not apply because it does not match the target medium.</li> </ul> </td> </tr> <tr id="media-dependency-009-7" class="primary"> <td><strong> <a href="media-dependency-009.htm">media-dependency-009</a></strong></td> <td></td> <td></td> <td>Matching the 'All' target medium <ul class="assert"> <li>The 'all' media type applies to the screen medium.</li> </ul> </td> </tr> <tr id="media-dependency-010-7" class="primary"> <td><strong> <a href="media-dependency-010.htm">media-dependency-010</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums (braille) <ul class="assert"> <li>The 'braille' media type does not apply to the screen medium.</li> </ul> </td> </tr> <tr id="media-dependency-011-7" class="primary"> <td><strong> <a href="media-dependency-011.htm">media-dependency-011</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums (embossed) <ul class="assert"> <li>The 'embossed' media type does not apply to the screen medium.</li> </ul> </td> </tr> <tr id="media-dependency-012-7" class="primary"> <td><strong> <a href="media-dependency-012.htm">media-dependency-012</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums (handheld) <ul class="assert"> <li>The 'handheld' media type does not apply to the screen medium.</li> </ul> </td> </tr> <tr id="media-dependency-013-7" class="primary"> <td><strong> <a href="media-dependency-013.htm">media-dependency-013</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums (projection) <ul class="assert"> <li>The 'projection' media type does not apply to the screen medium.</li> </ul> </td> </tr> <tr id="media-dependency-014-7" class="primary"> <td><strong> <a href="media-dependency-014.htm">media-dependency-014</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums (speech) <ul class="assert"> <li>The 'speech' media type does not apply to the screen medium.</li> </ul> </td> </tr> <tr id="media-dependency-015-7" class="primary"> <td><strong> <a href="media-dependency-015.htm">media-dependency-015</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums (tty) <ul class="assert"> <li>The 'tty' media type does not apply to the screen medium.</li> </ul> </td> </tr> <tr id="media-dependency-016-7" class="primary"> <td><strong> <a href="media-dependency-016.htm">media-dependency-016</a></strong></td> <td></td> <td></td> <td>Non-matching target mediums (tv) <ul class="assert"> <li>The 'tv' media type does not apply to the screen medium.</li> </ul> </td> </tr> <tr id="media-dependency-017-7" class="primary"> <td><strong> <a href="media-dependency-017.htm">media-dependency-017</a></strong></td> <td></td> <td></td> <td>Multiple target mediums <ul class="assert"> <li>An '@media' rule specifies the target media types separated by commas.</li> </ul> </td> </tr> </tbody> <tbody id="s7.1"> <tr><th colspan="4" scope="rowgroup"> <a href="#s7.1">+</a> <a href="http://www.w3.org/TR/CSS21/media.html#media-intro">7.1 Introduction to media types</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s7.2"> <tr><th colspan="4" scope="rowgroup"> <a href="#s7.2">+</a> <a href="http://www.w3.org/TR/CSS21/media.html#media-sheets">7.2 Specifying media-dependent style sheets</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s7.2.#x0"> <!-- 0 tests --> </tbody> <tbody id="s7.2.#x1"> <!-- 0 tests --> </tbody> <tbody id="s7.2.1"> <tr><th colspan="4" scope="rowgroup"> <a href="#s7.2.1">+</a> <a href="http://www.w3.org/TR/CSS21/media.html#at-media-rule">7.2.1 The @media rule</a></th></tr> <!-- 4 tests --> <tr id="at-rule-013-7.2.1" class="invalid"> <td> <a href="at-rule-013.htm">at-rule-013</a></td> <td></td> <td><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> <td>Ignoring at-rules inside @media blocks <ul class="assert"> <li>At-rules inside @media blocks are ignored up to up to the end of the block that contains the invalid at-keyword, or up to and including the next semicolon (;) or up to and including the next block ({...}), whichever comes first.</li> </ul> </td> </tr> <tr id="matching-brackets-001-7.2.1" class="invalid"> <td> <a href="matching-brackets-001.htm">matching-brackets-001</a></td> <td></td> <td><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> <td>Matching brackets and quotes for @rules <ul class="assert"> <li>User agents must handle unexpected tokens encountered while parsing an at-rule by reading until the end of the statement, while observing the rules for matching pairs of brackets and quotes, and correctly handling escapes.</li> </ul> </td> </tr> <tr id="matching-brackets-002-7.2.1" class="invalid"> <td> <a href="matching-brackets-002.htm">matching-brackets-002</a></td> <td></td> <td><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> <td>Matching brackets and quotes for declarations <ul class="assert"> <li>User agents must handle unexpected tokens encountered while parsing a declaration by reading until the end of the statement, while observing the rules for matching pairs of brackets and quotes, and correctly handling escapes.</li> </ul> </td> </tr> <tr id="matching-brackets-003-7.2.1" class="invalid"> <td> <a href="matching-brackets-003.htm">matching-brackets-003</a></td> <td></td> <td><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> <td>Matching brackets and quotes for selectors <ul class="assert"> <li>User agents must handle unexpected tokens encountered while parsing a declaration by reading until the end of the statement, while observing the rules for matching pairs of brackets and quotes, and correctly handling escapes.</li> </ul> </td> </tr> </tbody> <tbody id="s7.2.1.#x2"> <!-- 0 tests --> </tbody> <tbody id="s7.2.1.#x3"> <!-- 0 tests --> </tbody> <tbody id="s7.3"> <tr><th colspan="4" scope="rowgroup"> <a href="#s7.3">+</a> <a href="http://www.w3.org/TR/CSS21/media.html#media-types">7.3 Recognized media types</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s7.3.1"> <tr><th colspan="4" scope="rowgroup"> <a href="#s7.3.1">+</a> <a href="http://www.w3.org/TR/CSS21/media.html#media-groups">7.3.1 Media groups</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#all-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#audio-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#bitmap-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#continuous-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#grid-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#interactive-media-group"> <!-- 1 tests --> <tr id="outline-focus-001-7.3.1.#interactive-media-group" class="interact may"> <td> <a href="outline-focus-001.htm">outline-focus-001</a></td> <td></td> <td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="may" title="Behavior tested is preferred but optional">Optional</abbr></td> <td>Default outlines and interactive media groups <ul class="assert"> <li>Interactive media groups may show a focus outline to indicate that focus has been set on an element.</li> </ul> </td> </tr> </tbody> <tbody id="s7.3.1.#paged-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#speech-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#static-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#tactile-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#visual-media-group"> <!-- 0 tests --> </tbody> <tbody id="s7.3.1.#x4"> <!-- 0 tests --> </tbody> </table> </body> </html>