block-in-inline-007

Blocks within inlines: Simple

WeasyPrint

This browser

Assertion
When an inline box contains block boxes, the inline box is broken around the blocks.

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: Blocks within inlines: Simple</title>
 5   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
 6   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ib/007.html" type="text/html">
 7   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop">
 8   <meta name="assert" content="When an inline box contains block boxes,     the inline box is broken around the blocks.">
 9   <style type="text/css">
10    .inline { display: inline; }
11    .block { display: block; margin: 1em 0; }
12    td { font: 1em/1 monospace; }
13   </style>
14  </head>
15  <body>
16   <p>The pairs of letters below should be adjacent.</p>
17   <table>
18    <tr>
19     <td>
20      <div class="block">
21       <div class="inline">
22        A
23        <div class="block">
24        B
25        </div>
26        <div class="block">
27        C
28        </div>
29        D
30        <div class="block">
31        E
32        </div>
33        F
34        <div class="block">
35        G
36        </div>
37       </div>
38      </div>
39     </td>
40     <td>
41 <pre>A
42 
43 B
44 
45 C
46 
47 D
48 
49 E
50 
51 F
52 
53 G</pre>
54     </td>
55    </tr>
56   </table>
57  </body>
58 </html>