page-container-005

Paged content

WeasyPrint

This browser

Flags
image, paged
Assertion
The page area includes the boxes laid out on that page. The content of the document is flowed into the page area of one or more page sheets.

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: Paged content</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-box">
  7   <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule">
  8   <meta name="flags" content="paged image">
  9   <meta name="assert" content="The page area includes the boxes laid out on that page. The content of the document is flowed into the page area of one or more page sheets. ">
 10   <style type="text/css">
 11     div {   page-break-inside: avoid;
 12         }
 13     html {  border: thick solid orange;
 14         }
 15     table, td, th {
 16             border: thin solid black;
 17         }
 18     #borders-too {
 19             background: #ff9;
 20             padding: 1em;
 21             border: medium purple solid;
 22         }
 23     .left-aligned {
 24             float: left;
 25             border: solid thick maroon;
 26         }
 27     .right-aligned {
 28             float: right;
 29             border: solid thick teal;
 30         }
 31     img {
 32         width: 25%;
 33         vertical-align:baseline;
 34         }
 35     h2 {
 36         clear: both;
 37         }
 38     .full-width {
 39         width: 100%;
 40         }
 41     body { color: gray; }
 42 		.instruct { color: black; }
 43    </style>
 44  </head>
 45  <body>
 46   <p class="instruct">The contents of this document include headings,
 47 	"lorem ipsum" paragraphs with a background and a border, a list with
 48 	bullets, two images, and a table. This test passes if all these items
 49 	appear within an orange border which spans the pages.
 50   </p>
 51   <h2>Lorem Ipsum Text</h2>
 52   <div id="borders-too">
 53 	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
 54 	  hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel,
 55 	  dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet
 56 	  viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam
 57 	  mollis. Ut justo. Suspendisse potenti.</p>
 58 	  <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae
 59 	  luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing,
 60 	  commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit
 61 	  tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices
 62 	  sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl.
 63 	  Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
 64 	  <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a
 65 	  ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero
 66 	  dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius,
 67 	  adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque
 68 	  mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies
 69 	  ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
 70 	  <p>Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit
 71 	  amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis
 72 	  massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis,
 73 	  faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer
 74 	  sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in
 75 	  ante. Vivamus imperdiet nibh feugiat est.</p>
 76 	  <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo,
 77 	  nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum
 78 	  posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque
 79 	  fermentum. Cum sociis natoque penatibus et magnis dis parturient montes,
 80 	  nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut
 81 	  condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor
 82 	  gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc.
 83 	  Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus.
 84 	  Donec metus. Curabitur gravida.</p>
 85   </div>
 86   <div>
 87     <h2>Unordered List</h2>
 88   	<ul>
 89 		  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
 90 		  <li>Aliquam tincidunt mauris eu risus.</li>
 91 		  <li>Vestibulum auctor dapibus neque.</li>
 92 		  <li>Nunc dignissim risus id metus.</li>
 93 		  <li>Cras ornare tristique elit.</li>
 94 		  <li>Vivamus vestibulum nulla nec ante.</li>
 95 		  <li>Praesent placerat risus quis eros.</li>
 96 		  <li>Fusce pellentesque suscipit nibh.</li>
 97 		  <li>Integer vitae libero ac risus egestas placerat.</li>
 98 		  <li>Vestibulum commodo felis quis tortor.</li>
 99 		  <li>Ut aliquam sollicitudin leo.</li>
100 		  <li>Cras iaculis ultricies nulla.</li>
101 		  <li>Donec quis dui at dolor tempor interdum.</li>
102 		  <li>Vivamus molestie gravida turpis.</li>
103 		  <li>Fusce lobortis lorem at ipsum semper sagittis.</li>
104 		  <li>Nam convallis pellentesque nisl.</li>
105 		  <li>Integer malesuada commodo nulla.</li>
106 	  </ul>
107   </div>
108   <h2>Floated images</h2>
109   <div>
110     <span>There is an maroon-boxed cat to the left
111       <img class="left-aligned" alt="FAIL: missing image" src="support/cat.png">and
112       a teal-boxed cat to the right
113       <img class="right-aligned" alt="FAIL: missing image" src="support/cat.png"> of this paragraph.
114     </span>
115   </div>
116   <h2>Table</h2>
117   <table class="full-width">
118     <tr>
119       <th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th>
120     </tr>
121     <tr>
122       <td>Data 100</td><td>Data 200</td><td>Data 300</td><td>Data 400</td>
123     </tr>
124   </table>
125  </body>
126 </html>