Bug 121493 - [CSS Regions] Percentage width for image in flowed content computed incorrectly
Summary: [CSS Regions] Percentage width for image in flowed content computed incorrectly
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: AdobeTracked
Depends on:
Blocks: 57312
  Show dependency treegraph
 
Reported: 2013-09-17 08:21 PDT by Mihnea Ovidenie
Modified: 2013-10-22 05:07 PDT (History)
2 users (show)

See Also:


Attachments
Test case (616 bytes, text/html)
2013-09-17 08:21 PDT, Mihnea Ovidenie
no flags Details
Image for the test (47.90 KB, image/png)
2013-09-17 08:22 PDT, Mihnea Ovidenie
no flags Details
Test case with the image element (609 bytes, text/html)
2013-09-17 08:25 PDT, Mihnea Ovidenie
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Mihnea Ovidenie 2013-09-17 08:21:49 PDT
Created attachment 211906 [details]
Test case

In the attached test case, the image element has a percentage width that is computed relative to the second region, even if the image completely fits in the first region of the chain. If you remove the second region in the chain, the image is sized properly. If you remove the image, you will see that the #article element, having a percentage width, is sized differently in the 2 regions in which it is flowed.
Comment 1 Mihnea Ovidenie 2013-09-17 08:22:26 PDT
Created attachment 211907 [details]
Image for the test
Comment 2 Mihnea Ovidenie 2013-09-17 08:24:17 PDT
Comment on attachment 211906 [details]
Test case

><!DOCTYPE html>
><html>
>    <head>
>        <style>
>            #article { -webkit-flow-into: flow; width: 50%; height: 400px; background-color: yellow; }
>            #region { -webkit-flow-from: flow; width: 300px; height: 300px; border: 10px solid red; }
>            #region2 { -webkit-flow-from: flow; width: 600px; height: 300px; border: 10px solid green; }
>            #image { width: 100%; }
>        </style>
>    </head>
>    <body>
>        <div id="article">
>            <img id='image' src='lime.png' />
>        </div>
>        <div id="region"></div>
>        <div id="region2"></div>
>    </body>
></html>
Comment 3 Mihnea Ovidenie 2013-09-17 08:24:24 PDT
Comment on attachment 211906 [details]
Test case

><!DOCTYPE html>
><html>
>    <head>
>        <style>
>            #article { -webkit-flow-into: flow; width: 50%; height: 400px; background-color: yellow; }
>            #region { -webkit-flow-from: flow; width: 300px; height: 300px; border: 10px solid red; }
>            #region2 { -webkit-flow-from: flow; width: 600px; height: 300px; border: 10px solid green; }
>            #image { width: 100%; }
>        </style>
>    </head>
>    <body>
>        <div id="article">
>            <img id='image' src='lime.png' />
>        </div>
>        <div id="region"></div>
>        <div id="region2"></div>
>    </body>
></html>
Comment 4 Mihnea Ovidenie 2013-09-17 08:25:30 PDT
Created attachment 211908 [details]
Test case with the image element