[Webkit-unassigned] [Bug 121366] New: Wrong Column Width in Multicolumn Layout

Sat Sep 14 12:58:43 PDT 2013

https://bugs.webkit.org/show_bug.cgi?id=121366

           Summary: Wrong Column Width in Multicolumn Layout
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Windows 7
            Status: UNCONFIRMED
          Severity: Major
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: cyberhymnal at hotmail.com
                CC: cyberhymnal at hotmail.com

When a multicolumn <div> is enclosed in another <div> with display:table-cell, the column width is too small, causing text truncation. The following HTML illustrates the problem.
____________________________________________________

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Song of Haiawatha</title>
<style type="text/css">
.poem {
    column-count: 2;
    column-gap: 0;
    column-rule: 2px solid gray;

    -moz-column-count: 2;
    -moz-column-gap: 0;
    -moz-column-rule: 2px solid gray;

    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-rule: 2px solid gray;

    padding: 1em 0;
    white-space: nowrap;
    border: 8px ridge silver;
    border-radius: 20px 20px 20px 20px;
}
div p { margin: 0 1em 2ex !important; }
figcaption { text-align:center; }
.cell { display: table-cell; vertical-align: middle; }
.row { display: table-row; }
.tbl { display: table;  margin: auto; }
</style>
</head>

<body>
<p>So far, so good.</p>

<div class="poem">
<p>By the shore of Gitche Gumee,<br />
By the shining Big-Sea-Water,<br />
At the doorway of his wigwam,<br />
In the pleasant Summer morning,<br />
Hiawatha stood and waited.</p>
<p>All the air was full of freshness,<br />
All the earth was bright and joyous,<br />
And before him, through the sunshine,<br />
Westward toward the neighboring forest<br />
Passed in golden swarms the Ahmo,<br />
Passed the bees, the honey-makers,<br />
Burning, singing in the sunshine.</p>
<p>Bright above him shone the heavens,<br />
Level spread the lake before him;<br />
>From its bosom leaped the sturgeon,<br />
Sparkling, flashing in the sunshine;<br />
On its margin the great forest<br />
Stood reflected in the water,<br />
Every tree-top had its shadow,<br />
Motionless beneath the water.</p>
</div>

<br />
<hr />
<p>Here’s where the problem happens: When the text is enclosed in a <code><div></code> with <code>display:table-cell</code>, Chrome truncates the text. Chrome seems to be computing an overall width big enough to hold the longest text line, resulting in a column width that is too narrow.</p>
<p>Firefox 23 & Internet Explorer 10 do not exhibit this problem.</p>

<div class="tbl"><div class="row"><div class="cell"><div class="poem">
<p>By the shore of Gitche Gumee,<br />
By the shining Big-Sea-Water,<br />
At the doorway of his wigwam,<br />
In the pleasant Summer morning,<br />
Hiawatha stood and waited.</p>
<p>All the air was full of freshness,<br />
All the earth was bright and joyous,<br />
And before him, through the sunshine,<br />
Westward toward the neighboring forest<br />
Passed in golden swarms the Ahmo,<br />
Passed the bees, the honey-makers,<br />
Burning, singing in the sunshine.</p>
<p>Bright above him shone the heavens,<br />
Level spread the lake before him;<br />
>From its bosom leaped the sturgeon,<br />
Sparkling, flashing in the sunshine;<br />
On its margin the great forest<br />
Stood reflected in the water,<br />
Every tree-top had its shadow,<br />
Motionless beneath the water.</p>
</div></div></div></div>

</body>
</html>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.