<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page Selectors and the Page Context - CSS Paged Media Module Level 3 CR Test Suite</title> <style type="text/css"> @import "http://www.w3.org/StyleSheets/TR/base.css"; @import "../indices.css"; </style> </head> <body> <h1>CSS Paged Media Module Level 3 CR Test Suite</h1> <h2>Page Selectors and the Page Context (29 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> <col id="flags-column"></col> <col id="info-column"></col> <thead> <tr> <th>Test</th> <th><abbr title="Rendering References">Refs</abbr></th> <th>Flags</th> <th>Info</th> </tr> </thead> <tbody id="s5"> <tr><th colspan="4" scope="rowgroup"> <a href="#s5">+</a> <a href="http://www.w3.org/TR/css3-page/#page-selector-and-context">5 Page Selectors and the Page Context</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s5.1"> <tr><th colspan="4" scope="rowgroup"> <a href="#s5.1">+</a> <a href="http://www.w3.org/TR/css3-page/#at-page-rule">5.1 The @page Rule</a></th></tr> <!-- 3 tests --> <tr id="page-props-100-a-5.1" class="paged"> <td> <a href="page-props-100-a.xht">page-props-100-a</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Unqualified Page Contexts (first, right) <ul class="assert"> <li>A margin declaration within a page context which is not qualified by a pseudo-class (or, for css3, a named page identifier) sets the margins for every page of the document which doesn't match a page context with a :first, :right, or :left pseudoclass (or, for css3, a named page identifier).</li> </ul> </td> </tr> <tr id="page-props-100-b-5.1" class="paged"> <td> <a href="page-props-100-b.xht">page-props-100-b</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Unqualified Page Contexts (first, left) <ul class="assert"> <li>A margin declaration within a page context which is not qualified by a pseudo-class (or, for css3, a named page identifier) sets the margins for every page of the document which doesn't match a page context with a :first, :right, or :left pseudoclass (or, for css3, a named page identifier).</li> </ul> </td> </tr> <tr id="page-selectors-001-5.1" class="paged"> <td> <a href="page-selectors-001.xht">page-selectors-001</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>page selector is optional in @page rules <ul class="assert"> <li>An @page rule consists of the keyword '@page', followed by an optional page selector, followed by a block of declarations.</li> </ul> </td> </tr> </tbody> <tbody id="s5.1.#page-box-page-rule"> <!-- 17 tests --> <tr id="at-page-rule-002-a-5.1.#page-box-page-rule" class="paged"> <td> <a href="at-page-rule-002-a.xht">at-page-rule-002-a</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page margins on top and right using percentages <ul class="assert"> <li>A percentage right margin in the @page context applies to the page box and is relative to the width of the page box. A percentage top margin in the @page context applies to the page box and is relative to the height of the page box.</li> </ul> </td> </tr> <tr id="at-page-rule-002-b-5.1.#page-box-page-rule" class="paged"> <td> <a href="at-page-rule-002-b.xht">at-page-rule-002-b</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page margins shorthand using fixed physical units <ul class="assert"> <li>A margin declaration within the @page context applies to the page box.</li> </ul> </td> </tr> <tr id="at-page-rule-002-c-5.1.#page-box-page-rule" class="paged"> <td> <a href="at-page-rule-002-c.xht">at-page-rule-002-c</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Page Margins: bottom and left (percent) <ul class="assert"> <li>A margin declaration within the @page context applies to the page box.</li> <li>Percentage values on right and left margins are relative to the page box width.</li> <li>Percentage values on top and bottom margins are relative to the page box height.</li> </ul> </td> </tr> <tr id="page-borders-000-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-borders-000.xht">page-borders-000</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page border shorthand (absolute units) <ul class="assert"> <li>A border declaration within the @page context applies to the page box.</li> </ul> </td> </tr> <tr id="page-container-000-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-container-000.xht">page-container-000</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Paged Media root container <ul class="assert"> <li>For a single-page document, the containing box for the root element is the page area.</li> </ul> </td> </tr> <tr id="page-container-001-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-container-001.xht">page-container-001</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>paged media abspos containing block <ul class="assert"> <li>For a single-page document, the containing box for positioned content with no positioned ancestor is the page area.</li> </ul> </td> </tr> <tr id="page-container-002-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-container-002.xht">page-container-002</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>paged media root percent height <ul class="assert"> <li>A percentage height on the root element is relative to the page area height.</li> </ul> </td> </tr> <tr id="page-container-003-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-container-003.xht">page-container-003</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>paged media position fixed <ul class="assert"> <li>Elements with 'position: fixed' are positioned relative to the page area and are rendered on every page of the printed document.</li> </ul> </td> </tr> <tr id="page-container-004-5.1.#page-box-page-rule" class="may paged"> <td> <a href="page-container-004.xht">page-container-004</a></td> <td></td> <td><abbr class="may" title="Behavior tested is preferred but optional">Optional</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Paged Media root container (float) <ul class="assert"> <li>The root element when floated abuts the left or right edge of the page area.</li> </ul> </td> </tr> <tr id="page-container-005-5.1.#page-box-page-rule" class="image paged"> <td> <a href="page-container-005.xht">page-container-005</a></td> <td></td> <td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Paged content <ul class="assert"> <li>The page area includes the boxes laid out on that page. The content of the document is flowed into the page area of one or more page sheets.</li> </ul> </td> </tr> <tr id="page-container-006-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-container-006.xht">page-container-006</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Paged media - percent on root <ul class="assert"> <li>A percentage width on the root element is relative to the page area width.</li> </ul> </td> </tr> <tr id="page-container-010-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-container-010.xht">page-container-010</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Paged Media Height (percent) <ul class="assert"> <li>For HTML documents in paged media, when the HTML and BODY elements have heights of 100%, a percentage height on a child of BODY is relative to the page area height.</li> </ul> </td> </tr> <tr id="page-margin-000-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-margin-000.xht">page-margin-000</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page margins shorthand using fixed physical units <ul class="assert"> <li>A margin declaration within the @page context applies to the page box.</li> </ul> </td> </tr> <tr id="page-margin-001-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-margin-001.xht">page-margin-001</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page margins on top and right using percentages <ul class="assert"> <li>A percentage right margin in the @page context applies to the page box and is relative to the width of the page box. A percentage top margin in the @page context applies to the page box and is relative to the height of the page box.</li> </ul> </td> </tr> <tr id="page-margin-002-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-margin-002.xht">page-margin-002</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page margins on bottom and left using percentages <ul class="assert"> <li>A margin declaration within the @page context applies to the page box.</li> </ul> </td> </tr> <tr id="page-margin-003-5.1.#page-box-page-rule" class="paged"> <td> <a href="page-margin-003.xht">page-margin-003</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page margin shorthand using ems <ul class="assert"> <li>A margin declaration within the @page context applies to the page box.</li> <li>A margin expressed in ems uses the page context's font.</li> </ul> </td> </tr> <tr id="page-properties-000-5.1.#page-box-page-rule" class="primary paged"> <td><strong> <a href="page-properties-000.xht">page-properties-000</a></strong></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page width and height <ul class="assert"> <li>The 'width' and 'height' properties do not apply to a page box.</li> </ul> </td> </tr> </tbody> <tbody id="s5.1.#page-context"> <!-- 0 tests --> </tbody> <tbody id="s5.2"> <tr><th colspan="4" scope="rowgroup"> <a href="#s5.2">+</a> <a href="http://www.w3.org/TR/css3-page/#page-selectors">5.2 Page selectors</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s5.2.#match"> <!-- 0 tests --> </tbody> <tbody id="s5.2.#page-pseudo-class"> <!-- 0 tests --> </tbody> <tbody id="s5.2.#page-selector"> <!-- 0 tests --> </tbody> <tbody id="s5.2.#page-selector-syntax-restrict"> <!-- 0 tests --> </tbody> <tbody id="s5.2.#page-type-selector"> <!-- 0 tests --> </tbody> <tbody id="s5.2.1"> <tr><th colspan="4" scope="rowgroup"> <a href="#s5.2.1">+</a> <a href="http://www.w3.org/TR/css3-page/#spread-pseudos">5.2.1 Spread pseudo-classes: ‘:left’, ‘:right’</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s5.2.1.#left"> <!-- 0 tests --> </tbody> <tbody id="s5.2.1.#left-right-first"> <!-- 3 tests --> <tr id="page-props-101-5.2.1.#left-right-first" class="paged"> <td> <a href="page-props-101.xht">page-props-101</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Right and Left Pages (page area equal) <ul class="assert"> <li>The right and left pages of a document may use differing margin styles that yield equivalent page area heights.</li> </ul> </td> </tr> <tr id="page-props-103-5.2.1.#left-right-first" class="paged"> <td> <a href="page-props-103.xht">page-props-103</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Right and Left Pages (page area equal) <ul class="assert"> <li>The right and left pages of a document may use differing margin styles that yield different page area heights.</li> </ul> </td> </tr> <tr id="page-selectors-002-5.2.1.#left-right-first" class="paged"> <td> <a href="page-selectors-002.xht">page-selectors-002</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Page Selectors: first, right, and left pages <ul class="assert"> <li>In CSS 2.1, page selectors may designate the first page, all left pages, or all right pages.</li> </ul> </td> </tr> </tbody> <tbody id="s5.2.1.#right"> <!-- 0 tests --> </tbody> <tbody id="s5.2.2"> <tr><th colspan="4" scope="rowgroup"> <a href="#s5.2.2">+</a> <a href="http://www.w3.org/TR/css3-page/#first-pseudo">5.2.2 First-page pseudo-class: ‘:first’</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s5.2.2.#first"> <!-- 0 tests --> </tbody> <tbody id="s5.2.3"> <tr><th colspan="4" scope="rowgroup"> <a href="#s5.2.3">+</a> <a href="http://www.w3.org/TR/css3-page/#blank-pseudo">5.2.3 Blank-page pseudo-class: ‘:blank’</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s5.2.3.#blank"> <!-- 0 tests --> </tbody> <tbody id="s5.3"> <tr><th colspan="4" scope="rowgroup"> <a href="#s5.3">+</a> <a href="http://www.w3.org/TR/css3-page/#syntax-page-selector">5.3 @page rule grammar</a></th></tr> <!-- 3 tests --> <tr id="page-grammar-001-5.3" class="paged"> <td> <a href="page-grammar-001.xht">page-grammar-001</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page grammar: white space allowed around pseudo <ul class="assert"> <li>White space before and after a pseudo-page selector is allowed.</li> </ul> </td> </tr> <tr id="page-grammar-002-5.3" class="paged"> <td> <a href="page-grammar-002.xht">page-grammar-002</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>@page grammar: white space not required around pseudo <ul class="assert"> <li>White space before and after a pseudo-page selector is not required.</li> </ul> </td> </tr> <tr id="page-name-000-5.3" class="primary invalid paged"> <td><strong> <a href="page-name-000.xht">page-name-000</a></strong></td> <td></td> <td><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Page Selector Grammar - @page auto </td> </tr> </tbody> <tbody id="s5.3.#media"> <!-- 0 tests --> </tbody> <tbody id="s5.3.#page_body"> <!-- 0 tests --> </tbody> <tbody id="s5.3.#page_selector"> <!-- 0 tests --> </tbody> <tbody id="s5.3.#page_selector_list"> <!-- 0 tests --> </tbody> <tbody id="s5.3.#specializatons-of-ATKEYWORD"> <!-- 0 tests --> </tbody> <tbody id="s5.3.#syntax-prod-margin"> <!-- 0 tests --> </tbody> <tbody id="s5.3.#syntax-prod-margin-sym"> <!-- 0 tests --> </tbody> <tbody id="s5.3.#syntax-prod-page"> <!-- 0 tests --> </tbody> <tbody id="s5.3.#syntax-prod-pseudo-page"> <!-- 0 tests --> </tbody> <tbody id="s5.4"> <tr><th colspan="4" scope="rowgroup"> <a href="#s5.4">+</a> <a href="http://www.w3.org/TR/css3-page/#cascading-and-page-context">5.4 Cascading in the page context</a></th></tr> <!-- 3 tests --> <tr id="page-selectors-003-5.4" class="paged"> <td> <a href="page-selectors-003.xht">page-selectors-003</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Page cascade (right/left) <ul class="assert"> <li>Properties specified in a :left or :right @page rule override those specified in an @page rule that has no pseudo-class specified.</li> </ul> </td> </tr> <tr id="page-selectors-004-5.4" class="paged"> <td> <a href="page-selectors-004.xht">page-selectors-004</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Page cascade (first trumps right) <ul class="assert"> <li>Properties specified in a :first @page context override those specified in :right @page contexts.</li> </ul> </td> </tr> <tr id="page-selectors-006-5.4" class="paged"> <td> <a href="page-selectors-006.xht">page-selectors-006</a></td> <td></td> <td><abbr class="paged" title="Only valid for paged media">Paged</abbr></td> <td>Page cascade (first trumps no pseudo-class) <ul class="assert"> <li>Properties specified in a :first @page rule override those specified in an @page rule with no pseudo-class specified.</li> </ul> </td> </tr> </tbody> <tbody id="s5.4.#specificity"> <!-- 0 tests --> </tbody> </table> </body> </html>