inline-box-001

Inline box containing block boxes

WeasyPrint

This browser

Assertion
Inline boxes that contain block boxes will break up the inline content around the block 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: Inline box containing block boxes</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="Inline boxes that contain block boxes will break up the inline content around the block box.">
 9         <style type="text/css">
10             #div1
11             {
12                 border: 2px solid blue;
13                 display: inline;
14             }
15             div div
16             {
17                 background: orange;
18                 width: 2in;
19             }
20         </style>
21     </head>
22     <body>
23         <p>Test passes if there are blue borders around the top, left and bottom but not the right side of the text "First line", and borders around the top, right, bottom but not the left of the text "Last line".</p>
24         <div id="div1">
25             First line
26             <div>Filler Text</div>
27             Last line
28         </div>
29     </body>
30 </html>