page-break-margins-004

page break margin handling

WeasyPrint

This browser

Flags
paged
Assertion
When a page break occurs in the vertical margin between sibling block boxes, the used values of the adjoining 'margin-top' property is set to '0'.

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 break margin handling</title>
 5 <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.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/#allowed-pg-brk">
 8 <meta name="assert" content="When a page break occurs in the vertical margin between sibling block boxes, the used values of the adjoining 'margin-top' property is set to '0'.">
 9 <!-- This test targets just the top margin after the break; allowed-breaks-000-a also tests this, using a tight layout.  This test approach using a looser layout shows defects not revealed by allowed-breaks-000-a.
10 -->
11 <meta name="flags" content="paged">
12 <style type="text/css">
13 	div {
14 	    background: yellow;
15 	    border: 1px white solid;
16 	}
17   p.test {
18 		page-break-after: always;
19 		background: white;
20 		margin-top: 0;
21 		margin-bottom: .5in;
22 	}
23 	div.topper {
24         margin: 1in 0 0 0;
25         background: white;
26     }
27 
28 </style>
29 </head>
30 <body>
31 
32 	<p>When displayed in paged media, this test produces two pages of output.</p>
33 
34 	<div>
35 	  <p class="test">There must be a page break after this paragraph.  There may or may not be a yellow background below;
36       however, there must <em>not</em> be a one half inch tall yellow bar below.</p>
37 	  <div class="topper">There must be no yellow on this second page.</div>
38 	</div>
39 
40 </body>
41 </html>