page-props-102.xht (1910B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Right and Left Pages (page area equal)</title> 5 <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> 7 <meta name="flags" content="paged" /> 8 <meta name="assert" content="The right and left pages of a document may use differing margin styles that yield different page area widths, but the UA may adjust the margins such that the page area widths are the same. " /> 9 <style type="text/css"> 10 11 @page :first { 12 margin: 7%; 13 } 14 @page :left { 15 margin-left: 50%; 16 margin-right: 7%; 17 } 18 @page :right { 19 margin-right: 33%; 20 margin-left: 7%; 21 } 22 div { 23 margin-bottom: 2em; 24 width: 98% 25 } 26 .edged { 27 border: medium solid blue; 28 background: #ececff; 29 padding: 1%; 30 page-break-after: always; 31 } 32 33 .style1 { 34 background-color: #ececff; 35 } 36 37 </style> 38 </head> 39 <body> 40 <div> 41 This test produces three pages on paged media. 42 </div> 43 <div class="edged"> 44 This page should have typical right and left margins. This content is completely enclosed by a blue border and has a pale blue background. A page break follows. 45 </div> 46 <div class="edged"> 47 This content should be entirely on the right side of the page (but might instead 48 have margins like the first page). It is completely enclosed by a blue border and has a pale blue background. A page break follows. 49 </div> 50 <div class="edged"> 51 This page should have a wide right margin and narrow left margin (but might 52 instead have margins like the first page). This content has a blue border on all sides and a pale blue background. 53 </div> 54 </body> 55 </html>