<markdown>
<h2>CSS3 Paged Media Testable Assertions List</h2>
<p>This document contains a table of testable assertions extracted from the <cite> <a href=“ http://www.w3.org/TR/2006/WD-css3-page-20061010”>CSS3 Paged Media Module, W3C Last Call Working Draft 10 October 2006</a> </cite> specification, and, for each assertion, a list of associated tests. </p>
<h3>==== Page Boxes: the @page Rule ====</h3>
<ol> <li class=“assertion”> The content of the document is flowed into one or more page areas within their corresponding page boxes. <blockquote><div>The content of the document is flowed into the page area.</div></blockquote> <blockquote><div>The content area of a page box is called the page area.</div></blockquote> <div class=“tests”> Tests: </div> </li>
<li class=“assertion”>The content edges of the page box on the first page establish the rectangle that is the initial containing block of the document.
<blockquote><div>The content area of a page box is called the page area.</div></blockquote>
<blockquote><div>The edges of the page area on the first page establish the rectangle that is the initial containing block of the document.</div></blockquote>
<div class=“tests”> Tests: page-cb-000.xht, page-abs-pos-000.xht</div> </li> <li class=“assertion”> The properties of a page box are determined by properties declared within the page context. : <blockquote><div>The properties of a page box are determined by properties declared within the page context, which is the declaration block of the @page rule.</div></blockquote>
<div class=“tests”> Tests: </div>
</li>
<li class=“assertion”> The 'width' and 'height' properties do not apply to a page box. : <blockquote><div>Page boxes differ from other boxes in that the 'width' and 'height' properties do not apply to a page box.</div></blockquote>
<div class=“tests”> Tests: </div>
</li>
<li class=“assertion”> The size of the page box is specified using the 'size' property in the page context. SEE [Section] : <blockquote><div>The size of the page box is specified using the 'size' property in the page context.</div></blockquote>
<div class=“tests”> Tests: </div>
<h3 class=“section”>
</h3>
</li>
<li class=“assertion”> Any adjustment to keep content within the printable area must fit constraints in the “Rendering page boxes that do not fit a page sheet” and “Content outside the page box” sections. : <blockquote><div>Printing devices MAY adjust the layout of the document so that content falls within the printable area. How this adjustment is accomplished is device dependent within the constraints expressed in the sections Rendering page boxes that do not fit a page sheet and Content outside the page box.</div></blockquote>
<div class=“tests”> Tests: </div>
</li>
<li class=“assertion”> The top-left-corner margin box's margin edges are defined by a fixed-size box defined by the intersection of the top and left margins of the page box. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li>
<li class=“assertion”> The top-left margin box's margin edges are defined by a variable-width box filling the top page margin between the top-left-corner and top-center margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The top-center margin box's margin edges are defined by a variable-width box centered horizontally between the page's left and right border edges and filling the top page margin between the top-left and top-right margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The top-right margin box's margin edges are defined bya a variable-width box filling the top page margin between the top-center and top-right-corner margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The top-right-corner margin box's margin edges are defined by a a fixed-size box defined by the intersection of the top and right margins of the page box. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The left-top margin box's margin edges are defined by a a variable-height box filling the left page margin between the top-left-corner and left-middle margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The left-middle margin box's margin edges are defined by a a variable-height box centered vertically between the page's top and bottom border edges and filling the left page margin between the left-top and left-bottom margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The left-bottom margin box's margin edges are defined by a variable-height box filling the left page margin between the left-middle and bottom-left-corner margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The right-top margin box's margin edges are defined by a variable-height box filling the right page margin between the top-right-corner and right-middle margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The right-middle margin box's margin edges are defined by a variable-height box centered vertically between the page's top and bottom border edges and filling the right page margin between the right-top and right-bottom margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The right-bottom margin box's margin edges are defined by a variable-height box filling the right page margin between the right-middle and bottom-right-corner margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div> </li>
<li class=“assertion”> The bottom-left-corner margin box's margin edges are defined by a fixed-size box defined by the intersection of the bottom and left margins of the page box. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The bottom-left margin box's margin edges are defined by a variable-width box filling the bottom page margin between the bottom-left-corner and bottom-center margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The bottom-center margin box's margin edges are defined by a variable-width box centered horizontally between the page's left and right border edges and filling the bottom page margin between the bottom-left and bottom-right margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The bottom-right margin box's margin edges are defined by a variable-width box filling the bottom page margin between the bottom-center and bottom-right-corner margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> The bottom-right-corner margin box's margin edges are defined by a fixed-size box defined by the intersection of the bottom and right margins of the page box. : <blockquote><div></div></blockquote> <div class=“tests”> Tests: </div>
<h3>
</h3>
</li> <li class=“assertion”> If the UA supports the 'direction' and 'block-progression' properties from the CSS 3 Text Layout Module, it MUST determine whether the first page is a ':left' or ':right' page by using the values of those properties on the root element. : <blockquote><div></div></blockquote> <div class=“tests”> Tests: </div>
</li> <li class=“assertion”> Page layouts for documents using a left-to-right major writing direction have the earlier of the facing pages on the left. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> Page layouts for documents using a right-to-left major writing direction have the ealier of the facing pages on the right. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
<h3>
</h3>
</li> <li class=“assertion”> The syntax of the 'size' property is <length>{1,2} | auto | [ <page-size> || [ portrait | landscape] ]. : <blockquote><div>Value: <length>{1,2} | auto | [ <page-size> || [ portrait | landscape] ]</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The initial value of the 'size' property is 'auto'. : <blockquote><div>Initial: auto</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'size' value only applies to the page context. : <blockquote><div>Applies to: page context</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'size' value only applies to paged media. : <blockquote><div>Media: paged</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The computed value of the 'size' property is its specified value. : <blockquote><div>Computed value: specified value</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'auto' value of the 'size' property sets the page box to the size and orientation of the page sheet chosen by the UA. : <blockquote><div>auto: The page box will be set to the size and orientation of the page sheet chosen by the UA.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'landscape' value of the 'size' property specifies that the page's content be printed in landscape orientation: the longer sides of the page box are horizontal. : <blockquote><div>landscape: Specifies that the page's content be printed in landscape orientation. The page box is the same size as the page, and the longer sides are horizontal.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'portrait' value of the 'size' property specifies that the page's content be printed in portrait orientation: the shorter sides of the page box are horizontal. : <blockquote><div>Specifies that the page's content be printed in portrait orientation. The page box is the same size as the page, and the shorter sides are horizontal.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
If a preferred output media size is indicated via <length> or <page-size> values for the 'size' property, output must be rendered on the media size indicated if available. : <blockquote><div>When possible, output should be rendered on the media size indicated; if not available, the smallest larger size available should be used; if not available, the contents of the page box should be scaled down to fit the smaller page sheet.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
If a preferred output media size is indicated via <length> or <page-size> values for the 'size' property and the indicated media size is not available, a larger size must be used if available. : <blockquote><div>When possible, output should be rendered on the media size indicated; if not available, a larger size should be used; if not available, the contents of the page box should be scaled down to fit the largest smaller page sheet.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
If a preferred output media size is indicated via <length> or <page-size> values for the 'size' property and neither the indicated media size nor a larger size are available, the contents of the page SHOULD be scaled down to fit the largest smaller page sheet. : <blockquote><div>When possible, output should be rendered on the media size indicated; if not available, a larger size should be used; if not available, the contents of the page box should be scaled down to fit the smaller page sheet.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
A single <length> value for the 'size' property specifies that the page box width and height both be set to the given length. : <blockquote><div><length> The page box will be set to the given absolute length. If only one length value is specified, it sets both the width and height of the page box (i.e., the box is a square).</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
If two <length> values are specified for the 'size' property, the first value sets the width of the page box and the second value sets the height.
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
In <length> values for the 'size' property, the 'em' and 'ex' units refer to the page context's font. : <blockquote><div>Therefore, values in units of 'em' and 'ex' refer to the page context's font.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'A5' value of the 'size' property specifies that the page box's width be 148mm and its height 210mm. : <blockquote><div>A5: The page box SHOULD be set to the size of ISO A5 media: 148mm wide and 210 mm high.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'A4' value of the 'size' property specifies that the page box's width be 210m and its height 297mm. : <blockquote><div>A4: The page box SHOULD be set to the size of ISO A4 media: 210mm wide and 297mm high.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'A3' value of the 'size' property specifies that the page box's width be 297mm and its height 420mm. : <blockquote><div>A3: The page box SHOULD be set to the size of ISO A3 media: 297mm wide and 420mm high.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'B5' value of the 'size' property specifies that the page box's width be 176mm and its height 250mm. : <blockquote><div>B5: The page box SHOULD be set to the size of ISO B3 media: 176mm wide and 250mm high.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'B4' value of the 'size' property specifies that the page box's width be 250mm and its height 353mm. : <blockquote><div>B4: The page box SHOULD be set to the size of ISO B4 media: 250mm wide and 353mm high.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'letter' value of the 'size' property specifies that the page box's width be 8.5in and its height 11in. : <blockquote><div>letter: The page box SHOULD be set to the size of North American letter media: 8.5in wide and 11in high.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'legal' value of the 'size' property specifies that the page box's width be 8.5in and its height 14in. : <blockquote><div>legal: The page box SHOULD be set to the size of North American media: 8.5in wide and 14in high.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'ledger' value of the 'size' property specifies that the page box's width be 11in and its height 17in. : <blockquote><div>ledger: The page box SHOULD be set to the size of North American media: 11in wide and 17in high.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
SSS User agents SHOULD also support Media Size Self-Describing Names as defined in Section 5 of [PWGMSN]. : <blockquote><div>SSS User agents SHOULD also support Media Size Self-Describing Names as defined in Section 5 of [PWGMSN].</div></blockquote> <div class=“tests”> Tests: </div>
<h3>
</h3>
</li> <li class=“assertion”> XXX If a page box does not match the target page sheet dimensions, the user agent must either render the page box at the indicated size on a larger page sheet; or rotate the page box 90° if this will make the page box fit the page sheet; or scale the page box to fit the page sheet; or reformat the page contents, including 'spilling' onto other page sheets; or clip overflowed content. : <blockquote><div>If a page box does not match the target page sheet dimensions, the user agent MAY choose (in order of preference) to:
1. Render the page box at the indicated size on a larger page sheet. 2. Rotate the page box 90° if this will make the page box fit the page sheet. 3. Scale the page box to fit the page sheet. (There is no requirement to maintain the aspect ratio of the page or of any elements on the page when scaling; however, preservation of the aspect ratio is preferred.) 4. Reformat the page contents, including 'spilling' onto other page sheets. 5. Clip overflowed content (least preferred).</div></blockquote>
<div class=“tests”> Tests: </div>
<h3>
</h3>
</li> <li class=“assertion”> SSS If the page box is smaller than the page size the user agent SHOULD either center the page box on the sheet or position the page box in the upper left corner of the page sheet. : <blockquote><div></div></blockquote> <div class=“tests”> Tests: </div>
<h3>
</h3>
</li> <li class=“assertion”> An @page rule consists of the keyword '@page', an OPTIONAL page name followed with no intervening space by an OPTIONAL page pseudo-class and a block of declarations and margin rules (said to be in the page context). : <blockquote><div></div></blockquote> <div class=“tests”> Tests: page-margin-000.xht, page-margin-001.xht, page-margin-002.xht, page-margin-003.xht</div> </li> <li class=“assertion”> XXX Properties declared within the page context (and not within a margin box context) apply to the page box. : <blockquote><div>Properties for the page box are specified within the page context.</div></blockquote>
<div class=“tests”> Tests: </div>
<h3>
</h3>
</li> <li class=“assertion missing”> Assertions about the page grammar go here. <div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The value 'auto' used as a page name must be treated as a syntax error. : <blockquote><div>The value 'auto' may not be used as a page name and MUST be treated as a syntax error.</div></blockquote>
<div class=“tests”> Tests: </div>
<h3>
</h3>
</li> <li class=“assertion”> The specificity of an @page rule is computed by concatenating the numbers f-g-h where f=1 if an @page rule has a named page; g=1 if an @page rule has a ':first' pseudo-class; and h=1 if an @page rule has a ':left' or ':right' pseudo-class. : <blockquote><div>
The specificity of @page rules is computed in an analogous manner to the computations defined in the Selectors module: <ul> <li>if an @page rule has a named page, f=1</li> <li>if an @page rule has a ':first' pseudo-class, g=1</li> <li>if an @page rule has a ':left' or ':right' pseudo-class, h=1</li> </ul> Concatenating the three numbers f-g-h gives the specificity. </div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Page contexts cascade : <blockquote><div>Page contexts cascade</div></blockquote>
<div class=“tests”> Tests: </div>
<h3>
</h3>
</li> <li class=“assertion”> The 'size' property applies to the page box. : <blockquote><div>The following properties can be used in the page context to style the appearance of the page box: … 'size'</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Background properties defined in CSS2.1 apply to the page box. : <blockquote><div>The following properties can be used in the page context to style the appearance of the page box: … <a href=“http://www.w3.org/TR/CSS21/colors.html#background-properties”>background properties</a></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Border properties defined in CSS2.1 apply to the page box. : <blockquote><div>The following properties can be used in the page context to style the appearance of the page box: … <a href=“http://www.w3.org/TR/CSS21/box.html#border-properties”>border properties</a></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Margin properties defined in CSS2.1 apply to the page box. : <blockquote><div>The following properties can be used in the page context to style the appearance of the page box: … <a href=“http://www.w3.org/TR/CSS21/box.html#margin-properties”>margin properties</a></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Padding properties defined in CSS2.1 apply to the page box. : <blockquote><div>The following properties can be used in the page context to style the appearance of the page box: … <a href=“http://www.w3.org/TR/CSS21/box.html#padding-properties”>padding properties</a></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'counter-reset' property applies to the page box. : <blockquote><div>These properties can be used in the page context to set counters: … <a href=“http://www.w3.org/TR/CSS21/generate.html#counters”>counter-reset, counter-increment</a></div></blockquote>
<div class=“tests”> Tests: page-count-001.xht</div>
</li> <li class=“assertion”>
The 'counter-increment' property applies to the page box. : <blockquote><div>These properties can be used in the page context to set counters: … <a href=“http://www.w3.org/TR/CSS21/generate.html#counters”>counter-reset, counter-increment</a></div></blockquote>
<div class=“tests”> Tests: page-count-000.xht</div>
</li> <li class=“assertion”>
The 'color' property specified on the page box inherits to the margin boxes. : <blockquote><div>These properties can be used in the page context to style the content of margin boxes: … <a href=“http://www.w3.org/TR/CSS21/colors.html#propdef-color”>color</a></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Font properties defined in CSS2.1 when specified on the page box inherit to the margin boxes. : <blockquote><div>These properties can be used in the page context to style the content of margin boxes: … <a href=“http://www.w3.org/TR/CSS21/fonts.html”>font properties</a></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Text properties defined in CSS2.1 when specified on the page box inherit to the margin boxes. : <blockquote><div>These properties can be used in the page context to style the content of margin boxes: … <a href=“http://www.w3.org/TR/CSS21/text.html”>text properties</a></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Margin boxes inherit inheritable properties from the page context. : <blockquote><div>That is, when set in the page context, the values become the initial values for the margin boxes.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Properties other than those listed above are invalid within the page context. : <blockquote><div>Properties other than those listed above are invalid within the page context.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Background properties defined in CSS2.1 apply to margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Border properties defined in CSS2.1 apply to margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Margin properties defined in CSS2.1 apply to margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Padding properties defined in CSS2.1 apply to margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'color' property applies to margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Font properties defined in CSS2.1 apply to margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
Text properties defined in CSS2.1 apply to margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'content' property applies to margin boxes. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests:
</div>
</li> <li class=“assertion”>
Other properties are invalid within the margin context. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The normal rules for box properties apply with the following exceptions: : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
XXX When applied to the page box, values in units of 'em' and 'ex' refer to the page context's font. : <blockquote><div>Values in units of 'em' and 'ex' refer to the page context's font.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
XXX When applied to a margin box, values in units of 'em' and 'ex' refer to the margin box's font. : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”> When applied to the page box, percentage values on the margin and padding properties are relative to the dimensions of the page box (defined by the 'size' property). : <blockquote><div>Percentage values on the margin, padding and border properties are relative to the dimensions of the containing box (defined by the 'size' property in the page context).</div></blockquote>
<div class=“tests”> Tests: page-margin-002.xht</div>
</li> <li class=“assertion”>
XXX When applied to a margin boxes, percentage values ???? : <blockquote><div></div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The 'width' and 'height' properties do not apply to the page box. : <blockquote><div>The 'width' and 'height' properties do not apply to the page box</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The page background covers the entire page box, including the page margins. : <blockquote><div>The page background applies to the entire page box, including the page margins.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
A margin-box background is painted over (on top of) the page background. : <blockquote><div>A margin-box background is painted over (on top of) the page background.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
The root element then paints the canvas within the page's padding box. : <blockquote><div>The root element then paints the canvas within the page's
padding box.</div></blockquote>
<div class=“tests”> Tests: page-root-000.xht</div>
</li> <li class=“assertion”>
XXX The page context's background image is positioned and anchored within the page's padding box. : <blockquote><div>The origin of the page background is the upper-left corner of the page area.</div></blockquote>
<div class=“tests”> Tests: </div>
</li> <li class=“assertion”>
When a page break splits a box, the box's margins, borders, and padding have no visual effect where the split occurs. : <blockquote><div>When a page break splits a box, the box's margins, borders, and padding have no visual effect where the split occurs.</div></blockquote>
<div class=“tests”> Tests: </div>
<h3>
</h3>
</li>
<li class=“assertion”> User agents automatically classify all pages into either the ':left' or ':right' pseudo-class. : <blockquote><div>When printing double-sided documents, the page boxes on left and right pages MAY be different.</div></blockquote>
<div class=“tests”> Tests: page-pseudo-000.xht</div>
</li> <li class=“assertion”>
XXX The user agent must honor declarations for ':left' and ':right' even if the user agent does not transfer page boxes to left and right sheets (e.g. a printer that only prints single-sided). HOW? : <blockquote><div>If different declarations have been given for left and right pages, the user agent must honor these declarations even if the user agent does not transfer page boxes to left and right sheets (e.g. a printer that only prints single-sided).</div> </blockquote>
<div class=“tests”> Tests: page-pseudo-000.xht </div>
</li> <li class=“assertion”>
For documents with an inline progression of right to left and a block progression of top to bottom, the first page of a document is a :right page. <blockquote><div style=“color: red”>Add statement to spec.</div></blockquote> <div class=“tests”>Tests: page-pseudo-000.xht</div>
</li> <li class=“assertion”>
Declarations inside a page context defined with the ':first' pseudo-class apply only to the first page of a document. : <blockquote><div>Authors MAY also specify style for the first page of a document with the ':first' pseudo-class:</div></blockquote>
<div class=“tests”> Tests: page-first-000.xht, page-first-001.xht</div>
<h3>
</h3>
</li> <li class=“assertion”> Margin boxes are oriented with respect to the content and are independent of page orientation. : <blockquote><div>Please note that the margin boxes are oriented with respect to the content and are independent of page orientation</div></blockquote>
<div class=“tests”> Tests: margin-boxes-000.xht, margin-boxes-001.xht, margin-boxes-002.xht </div>
<h3>===== At-rules for margin boxes =====</h3> </li> <li class=“assertion”>
A margin at-rule consists of an ATKEYWORD that identifies the margin box (e.g. '@top-left') and a block of declarations (said to be in the margin context). <div class=“tests”>Tests: page-mbox-000.xht, page-mbox-001.xht</div>
<h3>===== Dimension of margin boxes =====</h3>
<h3>==== top row ====</h3>
</li> <li class=“assertion”> The used values of the top-left, top-center, and top-right margin boxes' widths and left and right margins are chosen such that the sum of the squares of their left and right margins is minimized under the constraints below. : <blockquote><div>
<p>The following rules apply to 'top-left', 'top-center' and 'top-right' margin boxes, which are referred to as [1], [2], and [3], respectively, in the expression below.</p>
<p>The UA chooses used values for each box's width, left and right margin, left and right border thickness, and left and right padding. It chooses them in such a way that the value of: left-margin[1]² + left-margin[2]² + left-margin[3]² + right-margin[1]² + right-margin[2]² + right-margin[3]² is as small as possible under the constraints below. ("foo[n]" stands for the used value of property foo of the n'th box and "x²" for the square of x.)</p>
</div></blockquote>
</li> <li class=“assertion”>
The sum of the outer widths of the top-left, top-center, and top-right boxes is equal to the distance between the left page border edge and the right page border edge. : <blockquote><div>The sum of the outer widths of the three boxes is equal to max box width.</div></blockquote>
<blockquote><div>max box width, which is the sum of the width of the page's left padding area, the width of the page area, and the width of the page's right padding area. In other words, it is the distance between the left page border and the right page border.</div></blockquote>
<div class=“tests”>Tests: page-mbox-004.xht</div> </li> <li class=“assertion”>
If the top-center box is not empty or its computed width is not 'auto' then the outer widths of the top-left and top-right boxes are equal. : <blockquote><div>If the center box is not empty or if its computed width is not 'auto', then the outer widths of the other two boxes are equal to each other (i.e., the center box is centered in that case).</div></blockquote> </li> <li class=“assertion”>
If the top-left box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border width are all 0. : <blockquote><div>3. If a box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border are all 0.</div></blockquote> </li>
<li class=“assertion”>
If the top-center box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border width are all 0. : <blockquote><div>3. If a box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border are all 0.</div></blockquote> </li> <li class=“assertion”> If the top-right box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border width are all 0. : <blockquote><div>3. If a box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border are all 0.</div></blockquote> </li> <li class=“assertion”>
The used value of the top-left box's left margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values of the left box's left margin, the center box's left and right margin and the right box's right margin are their respective computed values, unless that computed value is 'auto'.</div></blockquote> </li> <li class=“assertion”>
The used value of the top-center box's left margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values of the left box's left margin, the center box's left and right margin and the right box's right margin are their respective computed values, unless that computed value is 'auto'.</div></blockquote> </li> <li class=“assertion”>
The used value of the top-center box's right margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values of the left box's left margin, the center box's left and right margin and the right box's right margin are their respective computed values, unless that computed value is 'auto'.</div></blockquote> </li> <li class=“assertion”>
The used value of the top-right box's right margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values of the left box's left margin, the center box's left and right margin and the right box's right margin are their respective computed values, unless that computed value is 'auto'.</div></blockquote> </li> <li class=“assertion”>
The used value of the top-left box's right margin is its computed value unless that value is 'auto' or unless honoring both this margin and the top-right box's computed left margin contradicts another constraint. : <blockquote><div>
<p>7. The used values of the left box's right margin and the right box's left margin are their respective computed values, unless that computed value is 'auto'.</p>
<p>If the above constraints are contradictory ("over-constrained"), then constraint 7 is replaced by 7a:</p>
<p>7a. If the computed values of the left box's left and right margins are 'auto and not 'auto', respectively, then the used value of the right margin is its computed value. If the computed values of the right box's left and right margins are not 'auto' and 'auto', respectively, then the used value of the left margin is its computed value. This effectively means that the specified right margin of the left box is ignored if necessary, and ditto for the left margin of the right box.</p>
</div></blockquote>
</li> <li class=“assertion”>
The used value of the top-right box's left margin is its computed value unless that value is 'auto' or unless honoring both this margin and the top-left box's computed right margin contradicts another constraint. : <blockquote><div>
<p>7. The used values of the left box's right margin and the right box's left margin are their respective computed values, unless that computed value is 'auto'.</p>
<p>If the above constraints are contradictory ("over-constrained"), then constraint 7 is replaced by 7a:</p>
<p>7a. If the computed values of the left box's left and right margins are 'auto and not 'auto', respectively, then the used value of the right margin is its computed value. If the computed values of the right box's left and right margins are not 'auto' and 'auto', respectively, then the used value of the left margin is its computed value. This effectively means that the specified right margin of the left box is ignored if necessary, and ditto for the left margin of the right box.</p>
</div></blockquote>
</li> <li class=“assertion”>
If the above constraints are contradictory (“over-constrained”) then the right margin of the top-left box and the left margin of the top-right box are treated as if their computed values were 'auto'. : <blockquote><div></div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
The used values of the bottom-left, bottom-center, and bottom-right margin boxes' widths and left and right margins are chosen such that the sum of the squares of their left and right margins is minimized under the constraints below. : </li> <li class=“assertion”>
The sum of the outer widths of the bottom-left, bottom-center, and bottom-right boxes is equal to the distance between the right page border edge and the right page border edge. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”>
If the bottom-center box is not empty or its computed width is not 'auto' then the outer widths of the bottom-left and bottom-right boxes are equal. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”> If the bottom-left box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border width are all 0. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”> If the bottom-center box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border width are all 0. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”> If the bottom-right box is empty and its computed width is 'auto', then the used values of its left and right padding and left and right border width are all 0. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”>
The used value of the bottom-left box's left margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”>
The used value of the bottom-center box's left margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”>
The used value of the bottom-center box's right margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”>
The used value of the bottom-right box's right margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”>
The used value of the bottom-left box's right margin is its computed value unless that value is 'auto' or unless honoring both this margin and the bottom-right box's computed left margin contradicts another constraint. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”>
The used value of the bottom-right box's left margin is its computed value unless that value is 'auto' or unless honoring both this margin and the bottom-left box's computed right margin contradicts another constraint. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> </li> <li class=“assertion”>
If the above constraints are contradictory (“over-constrained”) then the right margin of the bottom-left box and the left margin of the bottom-right box are treated as if their computed values were 'auto'. : <blockquote><div>The used values for bottom-left, bottom-center and bottom-right are established by the same rules.</div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
The used values of the left-top, left-middle, and left-bottom margin boxes' heights and top and bottom margins are chosen such that the sum of the squares of their top and bottom margins is minimized under the constraints below. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
The sum of the outer heights of the left-top, left-middle, and left-bottom boxes is equal to the distance between the bottom page border edge and the bottom page border edge. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
If the left-middle box is not empty or its computed height is not 'auto' then the outer heights of the left-top and left-bottom boxes are equal. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”> If the left-top box is empty and its computed height is 'auto', then the used values of its top and bottom padding and top and bottom border height are all 0. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”> If the left-middle box is empty and its computed height is 'auto', then the used values of its top and bottom padding and top and bottom border height are all 0. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”> If the left-bottom box is empty and its computed height is 'auto', then the used values of its top and bottom padding and top and bottom border height are all 0. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
The used value of the left-top box's top margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
The used value of the left-middle box's top margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
The used value of the left-middle box's bottom margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
The used value of the left-bottom box's bottom margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
The used value of the left-top box's bottom margin is its computed value unless that value is 'auto' or unless honoring both this margin and the left-bottom box's computed top margin contradicts another constraint. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
The used value of the left-bottom box's top margin is its computed value unless that value is 'auto' or unless honoring both this margin and the left-top box's computed bottom margin contradicts another constraint. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> </li> <li class=“assertion”>
If the above constraints are contradictory (“over-constrained”) then the bottom margin of the left-top box and the top margin of the left-bottom box are treated as if their computed values were 'auto'. : <blockquote><div>The used values for left-top, left-middle and left-bottom boxes are established by the same rules, with “width” replaced by “height”, “left” by “top”, “right” by “bottom” and “center” by “middle”.</div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
The used values of the right-top, right-middle, and right-bottom margin boxes' heights and top and bottom margins are chosen such that the sum of the squares of their top and bottom margins is minimized under the constraints below. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
The sum of the outer heights of the right-top, right-middle, and right-bottom boxes is equal to the distance between the bottom page border edge and the bottom page border edge. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
If the right-middle box is not empty or its computed height is not 'auto' then the outer heights of the right-top and right-bottom boxes are equal. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”> If the right-top box is empty and its computed height is 'auto', then the used values of its top and bottom padding and top and bottom border height are all 0. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”> If the right-middle box is empty and its computed height is 'auto', then the used values of its top and bottom padding and top and bottom border height are all 0. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”> If the right-bottom box is empty and its computed height is 'auto', then the used values of its top and bottom padding and top and bottom border height are all 0. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
The used value of the right-top box's top margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
The used value of the right-middle box's top margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
The used value of the right-middle box's bottom margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
The used value of the right-bottom box's bottom margin is its computed value unless that value is 'auto'. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
The used value of the right-top box's bottom margin is its computed value unless that value is 'auto' or unless honoring both this margin and the right-bottom box's computed top margin contradicts another constraint. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
The used value of the right-bottom box's top margin is its computed value unless that value is 'auto' or unless honoring both this margin and the right-top box's computed bottom margin contradicts another constraint. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> </li> <li class=“assertion”>
If the above constraints are contradictory (“over-constrained”) then the bottom margin of the right-top box and the top margin of the right-bottom box are treated as if their computed values were 'auto'. : <blockquote><div>The used values for right-top, right-middle and right-bottom boxes are established by the same rules as for left-top, left-middle and left-bottom.</div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
XXX When 'vertical-align' is set on margin boxes, it affects the placement of content within the box as for table cells. : <blockquote><div></div></blockquote>
<h3>
</h3> </li> <li class=“assertion”>
XXX A margin box is instantiated if the computed value of its 'content' property is not 'normal'. : <blockquote><div>A margin box is instantiated if a margin context is established and one of the following conditions holds:
<ul> <li>The computed value of 'content' is not 'none'.</li> <li>The properties 'width' and 'height' are set in the margin context.</li> </ul>
</div></blockquote> </li> <li class=“assertion”>
The value of the counter at the beginning of page processing must be used by default. (?) : <blockquote><div>The value of the counter at the beginning of page processing MUST be used by default.</div></blockquote> <div class=“tests”>Tests: </div>
<h3>
</h3> </li> <li class=“assertion”>
The syntax of the 'page-break-before' property is auto | always | avoid | left | right. : <blockquote><div>Value: auto | always | avoid | left | right</div></blockquote> <div class=“tests”>Tests: page-breaki-000.xht</div> </li> <li class=“assertion”>
The initial value of the 'page-break-before' property is 'auto'. : <blockquote><div>Initial: auto</div></blockquote> </li> <li class=“assertion”>
The 'page-break-before' property applies to block-level elements only. : <blockquote><div>Applies to: block-level elements</div></blockquote> </li> <li class=“assertion”>
The 'page-break-before' property is not inherited. : <blockquote><div>Inherited: no</div></blockquote> </li> <li class=“assertion”>
The 'page-break-before' property applies to paged media only. : <blockquote><div>Media: paged</div></blockquote> </li> <li class=“assertion”>
The 'auto' value of the 'page-break-before' property neither forces nor forbids a page break before the box. : <blockquote><div>auto: Neither force nor forbid a page break before (after, inside) the generated box.</div></blockquote> </li> <li class=“assertion”>
The 'always' value of the 'page-break-before' property forces a paage break before the box. : <blockquote><div>always: Always force a page break before (after) the generated box.</div></blockquote> </li> <li class=“assertion”>
The 'left' value of the 'page-break-before' property forces one or two page breaks before the box so that the page after the break is formatted as a left page. : <blockquote><div>left: Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.</div></blockquote> </li> <li class=“assertion”> The 'right' value of the 'page-break-before' property forces one or two page breaks before the box so that the page after the break is formatted as a right page. : <blockquote><div>right: Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.</div></blockquote> </li> <li class=“assertion”>
The 'avoid' value of the 'page-break-before' property prevents a page break before the element when possible. : <blockquote><div>avoid: Avoid a page break before / after / inside the generated box.</div></blockquote> </li> <li class=“assertion”>
The syntax of the 'page-break-after' property is auto | always | avoid | left | right. : <blockquote><div>Value: auto | always | avoid | left | right</div></blockquote> </li> <li class=“assertion”>
The initial value of the 'page-break-after' property is 'auto'. : <blockquote><div>Initial: auto</div></blockquote> </li> <li class=“assertion”>
The 'page-break-after' property applies to block-level elements only. : <blockquote><div>Applies to: block-level elements</div></blockquote> </li> <li class=“assertion”>
The 'page-break-after' property is not inherited. : <blockquote><div>Inherited: no</div></blockquote> </li> <li class=“assertion”>
The 'page-break-after' property applies to paged media only. : <blockquote><div>Media: paged</div></blockquote> </li> <li class=“assertion”>
The 'auto' value of the 'page-break-after' property neither forces nor forbids a page break before the box. : <blockquote><div>auto: Neither force nor forbid a page break before (after, inside) the generated box.</div></blockquote> </li> <li class=“assertion”>
The 'always' value of the 'page-break-after' property forces a paage break before the box. : <blockquote><div>always: Always force a page break before (after) the generated box.</div></blockquote> </li> <li class=“assertion”> The 'left' value of the 'page-break-after' property forces one or two page breaks before the box so that the page after the break is formatted as a left page. : <blockquote><div>left: Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.</div></blockquote> </li> <li class=“assertion”> The 'right' value of the 'page-break-after' property forces one or two page breaks before the box so that the page after the break is formatted as a right page. : <blockquote><div>right: Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.</div></blockquote> </li> <li class=“assertion”>
The 'avoid' value of the 'page-break-after' property inhibits a page break after the element when possible. : <blockquote><div>Avoid a page break before / after / inside the generated box.</div></blockquote> </li> <li class=“assertion”>
The syntax of the 'page-break-inside' property is auto | avoid. : <blockquote><div>Value: auto | avoid</div></blockquote> </li> <li class=“assertion”>
The initial value of the 'page-break-inside' property is 'auto'. : <blockquote><div>Initial: auto</div></blockquote> </li> <li class=“assertion”>
The 'page-break-inside' property applies to block-level elements only. : <blockquote><div>Applies to: block-level elements</div></blockquote> </li> <li class=“assertion”>
The 'page-break-inside' property is not inherited. : <blockquote><div>Inherited: yes</div></blockquote> </li> <li class=“assertion”>
The 'page-break-inside' property applies to paged media only. : <blockquote><div>Media: paged</div></blockquote> </li> <li class=“assertion”>
The 'auto' value of the 'page-break-inside' property neither forces nor forbids a page break inside the box. : <blockquote><div>auto: Neither force nor forbid a page break before (after, inside) the generated box.</div></blockquote> </li> <li class=“assertion”>
The 'avoid' value of the 'page-break-inside' property inhibits a page break inside the block when possible. : <blockquote><div>avoid: Avoid a page break before / after / inside the generated box.</div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
The syntax of the 'page' property is auto | <identifier>. : <blockquote><div>Value: auto | <identifier></div></blockquote> </li> <li class=“assertion”>
The initial value of the 'page' property is 'auto' : <blockquote><div>Initial: auto</div></blockquote> </li> <li class=“assertion”>
The 'page' property only applies to block-level elements : <blockquote><div>Applies to: block-level elements</div></blockquote> </li> <li class=“assertion”>
The 'page' property is inherited. : <blockquote><div>Inherited: yes</div></blockquote> </li> <li class=“assertion”>
If a block box with inline content has a 'page' property that is different from the preceding block box with inline content, then a page break is inserted between them and the boxes after the break are rendered on a page box of the named type. : <blockquote><div>If a block box with inline content has a 'page' property that is different from the preceding block box with inline content, then one or two page breaks are inserted between them, and the boxes after the break are rendered on a page box of the named type.</div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
The syntax of the 'orphans' property is <integer>. : <blockquote><div>Value: <integer></div></blockquote> </li> <li class=“assertion”>
The initial value of the 'orphans' property is 2. : <blockquote><div>Initial: 2</div></blockquote> </li> <li class=“assertion”>
The 'orphans' property applies to block-level elements only. : <blockquote><div>Applies to: block-level elements</div></blockquote> </li> <li class=“assertion”>
The 'orphans' property is inherited. : <blockquote><div>Inherited: yes</div></blockquote> </li> <li class=“assertion”>
The 'orphans' property applies to visual media. : <blockquote><div>Media: visual</div></blockquote> </li> <li class=“assertion”> The 'orphans' property specifies the minimum number of line boxes in a block element that must be left at the bottom of a page when a page break occurs inside the block. : <blockquote><div>The 'orphans' property specifies the minimum number of line boxes in a block element that must be left at the bottom of a page.</div></blockquote> </li> <li class=“assertion”>
The syntax of the 'windows' property is <integer>. : <blockquote><div>Value: <integer></div></blockquote> </li> <li class=“assertion”>
The initial value of the 'windows' property is 2. : <blockquote><div>Initial: 2</div></blockquote> </li> <li class=“assertion”>
The 'windows' property applies to block-level elements only. : <blockquote><div>Applies to: block-level elements</div></blockquote> </li> <li class=“assertion”>
The 'windows' property is inherited. : <blockquote><div>Inherited: yes</div></blockquote> </li> <li class=“assertion”>
The 'widows' property applies to visual media. : <blockquote><div>Media: visual</div></blockquote> </li>
<li class=“assertion”>
The 'widows' property specifies the minimum number of line boxes of a block that must be left at the top of a page when a page break occurs inside the block. : <blockquote><div>The 'windows' property specifies the minimum number of line boxes of a block that must be left at the top of a page.</div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
Page breaks may occur in the vertical margin between sibling block boxes (or rows in a table) subject to the following rules. : <blockquote><div>In the normal flow, page breaks may occur at the following places: 1. In the vertical margin between block boxes (or rows in a table). … These breaks are subject to the following rules:</div></blockquote> </li> <li class=“assertion”>
When a page break occurs in the vertical margin between sibling block boxes (or rows in a table), the used values of the adjoining ‘margin-bottom’ and ‘margin-top’ properties are set to ‘0’ : <blockquote><div>In the vertical margin between block boxes (or rows in a table). When a page break occurs here, the computed values of the relevant 'margin-top' and 'margin-bottom' properties are set to '0'.</div></blockquote> </li> <li class=“assertion”>
Page breaks may occur between line boxes inside a block box subject to the following rules. : <blockquote><div>In the normal flow, page breaks may occur at the following places: … 2. Between line boxes inside a block box. These breaks are subject to the following rules:</div></blockquote> </li> <li class=“assertion”>
Breaking in the vertical margin between block boxes (or rows in a table) is allowed only if the 'page-break-after' and 'page-break-before' properties of all the elements generating boxes that meet at this margin allow it, which is when at least one of them has the value 'always', 'left', or 'right', or when all of them are 'auto' and the nearest common ancestor of all the elements does not have a 'page-break-inside value of 'avoid'. : <blockquote><div>Rule A: Breaking at (1) is allowed only if the 'page-break-after' and 'page-break-before' properties of all the elements generating boxes that meet at this margin allow it, which is when at least one of them has the value 'always', 'left', or 'right', or when all of them are 'auto'.</div></blockquote>
<blockquote><div>Rule B: However, if all of them are 'auto' and the nearest common ancestor of all the elements has a 'page-break-inside' value of 'avoid', then breaking here is not allowed.</div></blockquote>
</li> <li class=“assertion”>
Breaking between line boxes is allowed only if the number of line boxes between the break and the start of the enclosing block box is the value of 'orphans' or more, and the number of line boxes between the break and the end of the box is the value of 'widows' or more and the value of the 'page-break-inside' property is 'auto'. : <blockquote><div>Rule C: Breaking at (2) is allowed only if the number of line boxes between the break and the start of the enclosing block box is the value of 'orphans' or more, and the number of line boxes between the break and the end of the box is the value of 'widows' or more.</div></blockquote>
<blockquote><div>Rule D: breaking at (2) is allowed only if the 'page-break-inside' property is 'auto'.</div></blockquote>
</li> <li class=“assertion”>
If the above doesn't provide enough break points to keep content from overflowing the page boxes, then the restrictions imposed by 'avoid' on the 'page-break-*' properties are dropped. : <blockquote><div>If the above doesn't provide enough break points to keep content from overflowing the page boxes, then rules A, B and D are dropped in order to find additional breakpoints.</div></blockquote> </li> <li class=“assertion”>
If even after dropping the restrictions due to 'avoid' values on 'page-break-*' there aren't enough break points to keep content from overflowing the page boxes, then the restrictions due to 'windows' and 'orphans' are dropped as well. : <blockquote><div>If that still does not lead to sufficient break points, rule C is dropped as well, to find still more break points.</div></blockquote>
<h3>
</h3> </li> <li class=“assertion”>
A page break MUST occur in the vertical margin between block boxes (or rows in a table) if, among the 'page-break-after' and 'page-break-before' properties of all the elements generating boxes that meet at this margin, there is at least one with the value 'always', 'left', or 'right'. : <blockquote><div>A page break MUST occur at (1) if, among the 'page-break-after' and 'page-break-before' properties of all the elements generating boxes that meet at this margin, there is at least one with the value 'always', 'left', or 'right'.</div></blockquote> </li> <li class=“assertion”>
When multiple 'page-break-before' and/or 'page-break-after' properties with values of “always”, “left” or “right” apply at a margin, only one of them generates page breaks. : <blockquote><div>When multiple 'page-break-before' and/or 'page-break-after' properties with values of “always”, “left” or “right” apply at a margin, only one of them should generate page breaks. That is, no Content-empty pages are generated by page-break properties, except for at most one Content-empty page as may be required by :right and :left values to position ensuing content on a right- or left-facing page.</div></blockquote> </li> <li class=“assertion”>
A page break MUST occur in the vertical margin between block boxes (or rows in a table) if the last line box above this margin and the first one below it do not have the same value for 'page'. : <blockquote><div>A page break MUST also occur at (1) if the last line box above this margin and the first one below it do not have the same value for 'page'.</div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
The syntax of the image-orientation property is intrinsic | <angle>. : <blockquote><div>Value: auto | intrinsic | <angle></div></blockquote> <div class=“tests”>Tests: page-img-orient-000.xht, page-img-orient-001.xht</div> </li> <li class=“assertion”>
The initial value of the image-orientation property is '0deg'. : <blockquote><div>Initial: auto</div></blockquote> </li> <li class=“assertion”>
The image-orientation property is not inherited. : <blockquote><div>Inherited:N/A</div></blockquote> </li> <li class=“assertion”>
The image-orientation property applies to all visual media. : <blockquote><div>Media: visual</div></blockquote> </li> <li class=“assertion”>
The computed value of the image-orientation property is 'intrinsic' as specified or the angle modulo the full circle angle. : <blockquote><div>Computed value: specified value modulo full circle value</div></blockquote> </li> <li class=“assertion”>
CSS layout processing applies to the image after rotation. : <blockquote><div>
<p>CSS layout processing applies to the image after rotation. This implies, for example:</p>
<ul>
<li>The intrinsic height and width are derived from the rotated rather than the original image dimensions</li>
<li>The height (width) property applies to the vertical (horizontal) dimension of the image, after rotation.</li>
</ul>
</div></blockquote>
<div class="tests">Tests: page-img-orient-000.xht, page-img-orient-001.xht</div>
</li> <li class=“assertion”>
The '0deg' value of 'image-orientation' sets the image to the orientation of the page. : <blockquote><div>auto: The image will be set to the orientation of the page</div></blockquote> </li> <li class=“assertion”>
The 'intrinsic' value of 'image-orientation' orients the image according to orientation metadata contained within the image source data, if any. : <blockquote><div>intrinsic: The image will be oriented according to orientation metadata contained within the image source data.</div></blockquote> </li> <li class=“assertion”>
The 'intrinsic' value of 'image-orientation' orients the image as for '0deg' if no orientation metadata is found within the image source data. : <blockquote><div>If no such metadata is found, the image is oriented as for 'auto'.</div></blockquote> </li> <li class=“assertion”>
A value of '0deg' for 'image-orientation' orients the image as for 'auto'. : <blockquote><div>A value of '0deg' orients the image as for 'auto'.</div></blockquote> </li> <li class=“assertion”>
A positive value for 'image-orientation' rotates the image to the right (in a clockwise direction) by the given number of degrees. : <blockquote><div>A positive value rotates the image to the right (in a clockwise direction) by the given number of degrees.</div></blockquote> <div class=“tests”>Tests: page-img-orient-000.xht, page-img-orient-001.xht</div> </li> <li class=“assertion”>
A negative value for 'image-orientation' rotates the image to the left (in a counter-clockwise direction) by the given number of degrees. : <blockquote><div>Negative values rotate to the left or in a counter-clockwise direction.</div></blockquote> <h3>
</h3> </li> <li class=“assertion”>
The syntax of the 'image-fit' property is fill | contain | cover. : <blockquote><div>Value: fill | contain | cover</div></blockquote> </li> <li class=“assertion”>
The initial value of the 'image-fit' property is 'fill'. : <blockquote><div>Initial: fill</div></blockquote> </li> <li class=“assertion”>
The 'image-fit' property applies to replaced elements only. : <blockquote><div>Applies to: replaced elements</div></blockquote> </li> <li class=“assertion”>
The 'image-fit' property is inherited. : <blockquote><div>Inherited: yes</div></blockquote> </li> <li class=“assertion”>
The 'image-fit' property applies to visual media. : <blockquote><div>Media: visual</div></blockquote> </li> <li class=“assertion”>
The 'fill' value of the 'image-fit' property does not affect the usual calculation of the used 'height' and 'width. : <blockquote><div>fill: Determine the used 'height' and 'width' as usual.</div></blockquote> </li> <li class=“assertion”>
The 'fill' value of the 'image-fit' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'. : <blockquote><div>fill: Scale the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'.</div></blockquote>
</li> <li class=“assertion”>
The 'contain' value of the 'image-fit' property does not affect the usual calculation of the used 'height' and 'width' except if both 'height' and 'width' are 'auto', and the used value of at least one of 'max-width' and 'max-height' is not 'none', in which case the element's used width and used height are calculated as though the intrinsic dimensions of the contents were infinitely large numbers whose ratio is the actual intrinsic ratio of the contents. : <blockquote><div>contain: Determine the used 'height' and 'width' as usual, except if both 'height' and 'width' are 'auto', and the used value of at least one of 'max-width' and 'max-height' is not 'none', then compute the element's used width and used height as though the intrinsic dimensions of the contents were infinitely large numbers whose ratio is the actual intrinsic ratio of the contents.</div></blockquote> </li> <li class=“assertion”>
The 'contain' value of the 'image-fit' property scales the contents of the element, preserving their aspect ratio, to the largest size such that the width of the contents is less than or equal to the used width of the box and the height of the contents is less than or equal to the used height of the box. : <blockquote><div>contain: Scale the contents of the element, preserving their aspect ratio, to the largest size such that the width of the contents is less than or equal to the used width of the box and the height of the contents is less than or equal to the used height of the box.</div></blockquote> </li> <li class=“assertion”>
The 'cover' value of the 'image-fit' property does not affect the usual calculation of the used height and width except if both 'height' and 'width' are 'auto', and the used value of at least one of 'min-width' and 'min-height' is not '0', in which case the used width and used height of the element are calculated as though the intrinsic dimensions of the contents were infinitesimally small numbers whose ratio is the actual intrinsic ratio of the contents. : <blockquote><div>Determine the used 'height' and 'width' as usual, except if both 'height' and 'width' are 'auto', and the used value of at least one of 'min-width' and 'min-height' is not '0', then compute the used width and used height of the element as though the intrinsic dimensions of the contents were infinitesimally small numbers whose ratio is the actual intrinsic ratio of the contents.</div></blockquote> </li> <li class=“assertion”>
The 'cover' value of the 'image-fit' property scales the contents of the element, preserving their aspect ratio, to the smallest size such that the width of the contents is greater than or equal to the used width of the box and the height of the contents is greater than or equal to the height of the box. : <blockquote><div>Scale the contents of the element, preserving their aspect ratio, to the smallest size such that the width of the contents is greater than or equal to the used width of the box and the height of the contents is greater than or equal to the height of the box.</div></blockquote> </li> <li class=“assertion”>
The 'overflow' property determines how to render parts of the replaced element's content that extend beyond the edges of its box. : <blockquote><div>The 'overflow' property determines how to render parts of the replaced element's content that extend beyond the edges of its box.</div></blockquote> </li> <li class=“assertion”>
The syntax of the 'image-position' property is [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | auto. : <blockquote><div>Value: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | auto</div></blockquote> </li> <li class=“assertion”>
The initial value of the 'image-position' property is 50% 50%. : <blockquote><div>Initial: 50% 50%</div></blockquote> </li> <li class=“assertion”>
The 'image-position' property applies to replaced elements. : <blockquote><div>Applies to: replaced elements</div></blockquote> </li> <li class=“assertion”>
The 'image-position' property is inherited. : <blockquote><div>Inherited: yes</div></blockquote> </li> <li class=“assertion”>
The 'image-position' property applies to visual media. : <blockquote><div>Media: visual</div></blockquote> </li> <li class=“assertion”>
When two values are given for 'image-position' and at least one of them is not a keyword, the first value represents alignment in the horizontal dimension and the second represents alignment in the vertical. : <blockquote><div>See background-position for a detailed description of values other than 'auto'.</div></blockquote>
<blockquote><div>If two values are given, the horizontal position comes first. (CSS2.1:14.2.1)</div></blockquote>
</li> <li class=“assertion”>
When a single value is given for 'image-position' and that value is not a keyword, that value represents alignment in the horizontal dimension and alignment in the vertical dimension is treated as 50%. : <blockquote><div>See background-position for a detailed description of values other than 'auto'.</div></blockquote>
<blockquote><div>If only one percentage or length value is given, it sets the horizontal position only, and the vertical position will be 50%. (CSS2.1:14.2.1)</div></blockquote>
</li> <li class=“assertion”>
When the first value of 'image-position' is a percentage X, the point X% across the image from its left edge must be aligned with the point X% across the padding box of the element. : <blockquote><div>With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.</div></blockquote> </li> <li class=“assertion”>
When the second value of 'image-position' is a percentage Y, the point Y% down the image from its top edge must be aligned with the point Y% down the padding box of the element. : <blockquote><div>With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.</div></blockquote> </li> <li class=“assertion”>
When the first value of 'image-position' is a length L, the left edge of the image is placed L to the right of the left edge of the padding box of the element. : <blockquote><div>With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area.</div></blockquote> </li> <li class=“assertion”>
When the second value of 'image-position' is a length L, the top edge of the image is placed L below the top edge of the padding box of the element. : <blockquote><div>With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area.</div></blockquote> </li> <li class=“assertion”>
The 'top' value of 'image-position' is the same as 0% for the vertical alignment value. : <blockquote><div>'top left', 'left top': Same as '0% 0%'. 'top', 'top center', 'center top': Same as '50% 0%'. 'right top', 'top right': Same as '100% 0%'.</div></blockquote> </li> <li class=“assertion”>
The 'left' value of 'image-position' is the same as 0% for the horizontal alignment value. : <blockquote><div>'top left', 'left top': Same as '0% 0%'. 'left', 'left center', 'center left': Same as '0% 50%'. 'bottom left', 'left bottom': Same as '0% 100%'.</div></blockquote> </li> <li class=“assertion”>
The 'center' value of 'image-position' is the same as 50% for either the horizontal alignment value (if it is not otherwise given) or the vertical alignment value (if it is not otherwise given). : <blockquote><div>'top', 'top center', 'center top': Same as '50% 0%'. 'left', 'left center', 'center left': Same as '0% 50%'. 'center', 'center center': Same as '50% 50%'. 'center', 'center center': Same as '50% 50%'. 'bottom', 'bottom center', 'center bottom': Same as '50% 100%'.</div></blockquote> </li>
</ol>
</body> </html> </markdown>