RESOLVED WONTFIX 121493
[CSS Regions] Percentage width for image in flowed content computed incorrectly
https://bugs.webkit.org/show_bug.cgi?id=121493
Summary [CSS Regions] Percentage width for image in flowed content computed incorrectly
Mihnea Ovidenie
Reported 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.
Attachments
Test case (616 bytes, text/html)
2013-09-17 08:21 PDT, Mihnea Ovidenie
no flags
Image for the test (47.90 KB, image/png)
2013-09-17 08:22 PDT, Mihnea Ovidenie
no flags
Test case with the image element (609 bytes, text/html)
2013-09-17 08:25 PDT, Mihnea Ovidenie
no flags
Mihnea Ovidenie
Comment 1 2013-09-17 08:22:26 PDT
Created attachment 211907 [details] Image for the test
Mihnea Ovidenie
Comment 2 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>
Mihnea Ovidenie
Comment 3 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>
Mihnea Ovidenie
Comment 4 2013-09-17 08:25:30 PDT
Created attachment 211908 [details] Test case with the image element
Brent Fulgham
Comment 5 2022-07-12 17:18:47 PDT
CSS Regions were removed in Bug 174978.
Note You need to log in before you can comment on or make changes to this bug.