Bug 120546 - [CSS Regions] Region overset is reported incorectly for auto height regions
Summary: [CSS Regions] Region overset is reported incorectly for auto height regions
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Mihnea Ovidenie
URL:
Keywords: AdobeTracked
Depends on:
Blocks: 128165
  Show dependency treegraph
 
Reported: 2013-08-30 12:52 PDT by Alexandru Chiculita
Modified: 2014-03-17 00:48 PDT (History)
2 users (show)

See Also:


Attachments
Test case (1.69 KB, text/html)
2013-08-30 12:52 PDT, Alexandru Chiculita
no flags Details
Alternate test without regions (863 bytes, text/html)
2013-08-31 13:07 PDT, Mihnea Ovidenie
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Alexandru Chiculita 2013-08-30 12:52:54 PDT
Created attachment 210152 [details]
Test case

Open the attached test case. The region is auto-height so it should say fit instead of overset.

It seems like the issue is related to the line-height CSS property.
Comment 1 Mihnea Ovidenie 2013-08-31 13:06:35 PDT
(In reply to comment #0)
> Created an attachment (id=210152) [details]
> Test case
> 
> Open the attached test case. The region is auto-height so it should say fit instead of overset.
> 
> It seems like the issue is related to the line-height CSS property.

It is related to the line-height property. For instance, in the following case:
<div style="font-size: 100px; font-family: Times; width: 200px; border: 1px solid red;">&#x00ce;</div>

the special character will be rendered properly inside the box, which will have a height of 117 (115 from font + 2 from border).

When you are setting the line-height to a certain value, say 1em, you are forcing the height of the div to be 102 (100 + border) and the content will overflow the box.
<div style="font-size: 100px; font-family: Times; width: 200px; border: 1px solid red; line-height: 1em">&#x00ce;</div>

If you flow the above box, with line-height in a region with height: auto, the height of the region will be computed based on the height of the box (102) but since the content overflows the box, it will overflow the region too, causing the overset being reported instead of fit.

In your sample, if you set the line-height: 1.2, which is roughly the value for the default normal value for line-height, the content will not overflow the box and the reported value will be fit.

In my opinion, although the behavior is confusing, it is not a bug. I am attaching a sample without regions in which i played with boxes and line-height and overflow: hidden. Take a look and tell me your opinion about this.
Comment 2 Mihnea Ovidenie 2013-08-31 13:07:48 PDT
Created attachment 210209 [details]
Alternate test without regions
Comment 3 Andrei Bucur 2014-03-17 00:48:31 PDT
This was fixed in https://bugs.webkit.org/show_bug.cgi?id=129032. Closing.