[css-grid] Replaced elements don't properly resolve percentage heights |
||||||||||||||||
Issue descriptionReplaced elements use LayoutBoxModelObject::hasAutoHeightOrContainingBlockWithAutoHeight() to check if they can resolve their percentage heights. We've some grid related ifs in LayoutBox::computePercentageLogicalHeight() but they're not preset in LayoutBoxModelObject::hasAutoHeightOrContainingBlockWithAutoHeight(). Similar issues have been fixed on Flexbox (see bug #499766 ): * https://codereview.chromium.org/2070823002/ * https://codereview.chromium.org/2086083002/ Attached example showing the issue (in a grid item and a child of a grid item), check it live at: http://jsbin.com/saziwo/1/edit?html,css,output
,
Jul 13 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/7886bec673ccae048c0ef5726ceb21c8fcbd86e0 commit 7886bec673ccae048c0ef5726ceb21c8fcbd86e0 Author: rego <rego@igalia.com> Date: Wed Jul 13 02:14:17 2016 [css-grid] Fix percentage height resolution for replaced elements The percentage heights for replaced elements were not working as expected in grid items. The patch fixes the different issues to make it work as expected. If a replaced item is a grid item, it needs to resolve the percentage height against its grid area. When the replaced item is a child of a grid item, and the grid item is stretched, it needs to use that size to resolve the percentage height too. BUG= 624716 TEST=fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html Review-Url: https://codereview.chromium.org/2121173002 Cr-Commit-Position: refs/heads/master@{#404896} [add] https://crrev.com/7886bec673ccae048c0ef5726ceb21c8fcbd86e0/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html [modify] https://crrev.com/7886bec673ccae048c0ef5726ceb21c8fcbd86e0/third_party/WebKit/Source/core/layout/LayoutBox.cpp [modify] https://crrev.com/7886bec673ccae048c0ef5726ceb21c8fcbd86e0/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.cpp [modify] https://crrev.com/7886bec673ccae048c0ef5726ceb21c8fcbd86e0/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.h
,
Jul 13 2016
,
Aug 16 2016
There're still more issues with replaced elements. If the image has a 100% height and the item has a percentage height too, the height of the image is not properly resolved. Check the attached example or live at: http://jsbin.com/yeqobemofu/1/edit?html,css,output
,
Oct 28 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c4dc5e50ffa3ca4bef23a105ae8dc8304926b312 commit c4dc5e50ffa3ca4bef23a105ae8dc8304926b312 Author: rego <rego@igalia.com> Date: Fri Oct 28 22:08:15 2016 [css-grid] Fix percentage height resolution on replaced elements More fixes on percentage heights for replaced elements. The problem now was when you have a replaced element inside a grid item, and both the replaced and the item have a percentage height. The item has a definite height as its percentage can be resolved against its grid area. So the replaced element percentage should be resolved against the height of the item. Current code was getting confused about this particular case, now we reuse hasDefiniteLogicalHeight() to detect it properly. Added new case to existent test. BUG= 624716 TEST=fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html Review-Url: https://codereview.chromium.org/2458023002 Cr-Commit-Position: refs/heads/master@{#428512} [modify] https://crrev.com/c4dc5e50ffa3ca4bef23a105ae8dc8304926b312/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html [modify] https://crrev.com/c4dc5e50ffa3ca4bef23a105ae8dc8304926b312/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.cpp [modify] https://crrev.com/c4dc5e50ffa3ca4bef23a105ae8dc8304926b312/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.h
,
Oct 29 2016
|
||||||||||||||||
►
Sign in to add a comment |
||||||||||||||||
Comment 1 by r...@igalia.com
, Jul 1 2016Status: Started (was: Available)