page-margin-001

@page margins on top and right using percentages

WeasyPrint

This browser

Flags
paged
Assertion
A percentage right margin in the @page context applies to the page box and is relative to the width of the page box. A percentage top margin in the @page context applies to the page box and is relative to the height of the page box.

Source

 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 margins on top and right using percentages</title>
 5   <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com">
 6   <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/">
 7   <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins">
 8   <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties">
 9   <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule">
10   <meta name="flags" content="paged">
11   <meta name="assert" content="A percentage right margin in the @page context applies to the page box and is relative to the width of the page box. A percentage top margin in the @page context applies to the page box and is relative to the height of the page box.">
12   <style type="text/css">
13    @page  {
14 		margin-top: 50%;
15 		margin-right: 50%;
16 	}
17 	html, body {background: #ccc;}
18   </style>
19  </head>
20  <body>
21   <div>This paragraph must appear inside a grey box. The box should appear in the lower-left quadrant of the page. The top edge of the box should be exactly halfway down the page, and the right edge of the box should be exactly half way across the page (You can test this by folding the page in half).</div>
22  </body>
23 </html>