1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: page-break-before: right</title>
5 <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-break-props">
7 <link rel="help" href="http://www.w3.org/TR/css3-page/#pg-br-before-after">
8 <meta name="flags" content="paged">
9 <meta name="assert" content=" - 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.">
10 <style type="text/css">
11 @page {margin: 7%;}
12 @page :left {
13 margin-right: 50%;
14 }
15 @page :right {
16 margin-left: 50%;
17 }
18 @page :first {
19 @top-center {
20 content: ""
21 }
22 border: 1em solid blue;
23 margin: 7%;
24 }
25 p.spacer {page-break-after: always;}
26 p.goRight {
27 page-break-before: right;
28 }
29 </style>
30 </head>
31 <body>
32 <!-- Right & 1 blank left page -->
33 <p class="spacer">When printed, this test produces 4 or 5 pages of output. The next page may or may not be blank. This content must appear inside a blue box.</p>
34 <!-- Right page -->
35 <p class="goRight spacer">When printed, this content should be on the right side of the third page.</p>
36 <p class="spacer">When printed, this content should be on the left side of the page.</p>
37 <p class="goRight">When printed, this content should appear on the right side of the page.</p>
38 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam diam erat, convallis fermentum, volutpat a, dignissim a, est. Proin vel lacus. Quisque sit amet neque ac quam lacinia varius. In hac habitasse platea dictumst. Phasellus sodales velit vel metus. Ut in tortor dignissim libero elementum mattis. Proin rutrum vehicula lacus. Nunc mi ante, auctor id, vulputate sit amet, lobortis egestas, diam. Phasellus nibh elit, ultricies vitae, dignissim eu, vulputate ut, ante. Praesent interdum, ipsum eget fermentum luctus, enim ligula porttitor erat, id nonummy urna augue non eros. Morbi auctor pharetra tortor. Quisque eu lorem ut ipsum suscipit sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Pellentesque in nisl vitae leo cursus adipiscing. Cras risus nisi, fermentum vulputate, consectetuer a, porttitor et, nibh. Integer vel enim. Donec euismod.</p>
39 </body>
40 </html>