| <!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: Creating margin boxes with 'content'</title> | |
| <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> | |
| <link rel="help" href="http://www.w3.org/TR/css3-page/#populating-margin-boxes"/> | |
| <meta name="flags" content="paged" /> | |
| <meta name="assert" content="A margin box is instantiated if the computed value of its 'content' property is not 'normal'"/> | |
| <style type="text/css"><![CDATA[ | |
| @page { | |
| margin: 2cm; | |
| border: 2pt solid black; | |
| @top-center { | |
| background: #ccffcc; | |
| content: "Margin Box Test"; | |
| } | |
| @bottom-left-corner { | |
| background: #ccffcc; | |
| content: ""; | |
| } | |
| /* Bad Boxen */ | |
| @top-left { | |
| background: red; | |
| min-height: 2cm; | |
| } | |
| @top-right { | |
| background: red; | |
| max-height: 2cm; | |
| } | |
| @top-left-corner { | |
| width: 2cm; | |
| background: red; | |
| } | |
| @top-right-corner { | |
| height: 2cm; | |
| background: red; | |
| } | |
| @left-top { | |
| background: red; | |
| min-width: 2cm; | |
| } | |
| @left-middle { | |
| background: red; | |
| max-width: 2cm; | |
| visibility: visible; | |
| } | |
| @left-bottom { | |
| z-index: 100; | |
| background: red; | |
| } | |
| @right-top { | |
| text-transform: uppercase; | |
| background: red; | |
| } | |
| @right-middle { | |
| overflow: visible; | |
| background: red; | |
| } | |
| @right-bottom { | |
| counter-increment: chapter; | |
| background: red; | |
| } | |
| @bottom-left { | |
| font-variant: small-caps; | |
| background: red; | |
| } | |
| @bottom-center { | |
| border: 1px solid red; | |
| background: red; | |
| } | |
| @bottom-right { | |
| background: red url(house-orientation.jpg) 0 0 repeat-x; | |
| } | |
| @bottom-right-corner { | |
| color: #fff; | |
| background: red; | |
| } | |
| } | |
| ]]></style> | |
| </head> | |
| <body> | |
| <div>This page should say "Margin Box Test" in the top center. One green box should appear at the top of the page and one at the bottom. No red boxes should appear.</div> | |
| </body> | |
| </html> |