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.
Created attachment 211907 [details] Image for the test
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>
Created attachment 211908 [details] Test case with the image element
CSS Regions were removed in Bug 174978.