| <!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: Margin Boxes - Top Left Margin Constraints Test</title> | |
| <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> | |
| <link rel="help" href="http://www.w3.org/TR/css3-page/#margin-boxes"/> | |
| <meta name="flags" content="paged" /> | |
| <meta name="assert" content="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"/> | |
| <style type="text/css"><![CDATA[ | |
| @page { | |
| font-size: 9pt; | |
| margin: 0.5in; | |
| size: 8.5in 11in; /* 8.5 - (0.5 + 0.5 (margin)) = 7.5 */ | |
| border: 1pt solid black; | |
| @top-left { | |
| content: "Left box"; | |
| width: 3in; /* 7.5 - 3 = 4.5 */ | |
| border: 0.125in solid black; /* 4.25 */ | |
| margin-left: 0.75in; /* 3.5 */ | |
| margin-right: 0.75in; /* 2.75 */ | |
| } | |
| @top-right { | |
| content: "Right box"; | |
| width: 1.5in; /* 1.25 */ | |
| border: 0.125in solid black; /* 1 */ | |
| } | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ]]></style> | |
| </head> | |
| <body> | |
| <p>There should be two boxes above this text. The box on the left should be 3.25 inches wide, the box on the right should be 1.75 inches wide. The left box should be 0.75 inches from both the left edge of the black page border and the box on the right.</p> | |
| </body> | |
| </html> |