multicol-span-all-003

'column-span: all' (basic)

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem
Assertion
This test checks that 'column-span: all' spans across all column boxes and that content in the normal flow (in this test, the '55555 55555 55555 55555') that appears before the element is automatically balanced across all columns before the element appears.

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 Multi-column Layout Test: 'column-span: all' (basic)</title>
 5   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-03 -->
 6   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'">
 7   <link rel="match" href="reference/multicol-count-002-ref.htm">
 8   <meta name="flags" content="ahem">
 9   <meta name="assert" content="This test checks that 'column-span: all' spans across all column boxes and that content in the normal flow (in this test, the '55555 55555 55555 55555') that appears before the element is automatically balanced across all columns before the element appears.">
10 
11   <style type="text/css">
12   html {background-color: white;}
13 
14   body
15   {
16   background-color: black;
17   font: 1.25em/1 Ahem;
18   padding-right: 1em;
19   width: 20em;
20   }
21 
22   div
23   {
24   background-color: yellow;
25   color: black;
26 
27   column-count: 4;
28   column-gap: 0;
29   }
30 
31   h4
32   {
33   background-color: black;
34   column-span: all;
35   color: yellow;
36   font: 1em/1 Ahem;
37   margin: 0em;
38   }
39   </style>
40  </head>
41  <body>
42   <div>
43   55555 55555 55555 55555
44     <h4>&nbsp;4444 4444 4444 4444</h4>
45   1 22&nbsp; 1 22&nbsp; 1&nbsp;&nbsp;&nbsp;&nbsp; 1 333 1 333 1 333 55555 1 22&nbsp; 1 22&nbsp; 1&nbsp;&nbsp;&nbsp;&nbsp; 1 22&nbsp; 1 22&nbsp; 1 22&nbsp; 55555 1 333 1 333 1&nbsp;&nbsp;&nbsp;&nbsp; 4444 4444 1&nbsp;&nbsp;&nbsp;&nbsp; 55555 1 333 1 333 1&nbsp;&nbsp;&nbsp;&nbsp; 4444 4444 1&nbsp;&nbsp;&nbsp;&nbsp; 55555
46   </div>
47  </body>
48 </html>