multicol-clip-001

overflowed content inside and outside multicol element

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem
Assertion
This test checks that content in the normal flow can extend into column gap before it reaches its middle. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edge of the multi-column and are therefore rendered thanks to the default 'overflow: visible' declaration.

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: overflowed content inside and outside multicol element</title>
 5   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
 6   <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-24 -->
 7   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements">
 8   <link rel="match" href="reference/multicol-clip-001-ref.htm">
 9   <meta name="flags" content="ahem">
10   <meta name="assert" content="This test checks that content in the normal flow can extend into column gap before it reaches its middle. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edge of the multi-column and are therefore rendered thanks to the default 'overflow: visible' declaration.">
11   <style type="text/css">
12   div
13   {
14   background: white;
15   border: gray solid 1em;
16   color: blue;
17   font: 1.25em/1 Ahem;
18   orphans: 1;
19   widows: 1;
20   width: 11em;
21 
22   column-count: 3;
23   column-gap: 4em;
24   }
25 
26   span {color: black;}
27   </style>
28  </head>
29  <body>
30 
31   <div>
32     <span>
33     bl ac
34     bl ac
35     </span>
36 
37     <span>
38     bl ac
39     </span>
40     bl ue
41   </div>
42 
43  </body>
44 </html>