| <!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>CSS Test: page properties: margin boxes and percentage values</title> | |
| <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> | |
| <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> | |
| <meta name="flags" content="paged" /> | |
| <meta name="assert" content="When applied to margin boxes, percentage values are relative to the width of the containing box for the left and right sides, relative to the height of the containing box for the top and bottom sides."/> | |
| <style type="text/css"> | |
| @page { | |
| border: 2pt solid black; | |
| margin: 1in; | |
| } | |
| @page pageOne { | |
| size: portrait; | |
| @top-left { | |
| background: lime; | |
| content: ""; | |
| margin: 0 0 0 50%; | |
| width: 50%; | |
| } | |
| @left-top { | |
| background: lime; | |
| content: ""; | |
| margin: 50% 0 0 0; | |
| height: 50%; | |
| } | |
| } | |
| @page pageTwo { | |
| size: landscape; | |
| @bottom-right { | |
| background: lime; | |
| content: ""; | |
| margin: 0 50% 0 0; | |
| width: 50%; | |
| } | |
| @right-bottom { | |
| background: lime; | |
| content: ""; | |
| margin: 0 0 50% 0; | |
| height: 50%; | |
| } | |
| } | |
| p {page-break-after: always;} | |
| p#first {page: pageOne;} | |
| p#second {page: pageTwo;} | |
| </style> | |
| </head> | |
| <body> | |
| <p id="first">This test requires 2 pages. When printed, the green box above this content should be 1 inch wide and be aligned with the right edge of the black box. The green box to the left of this content should be 2 inches tall and aligned with the bottom of the black box.</p> | |
| <p id="second">When printed, the green box below this content should be 2 inches wide and be aligned with the left edge of the black box. The green box to the right of this content should be 1 inch tall and aligned with the top edge of the black box.</p> | |
| </body> | |
| </html> |