<!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>