New issue
Advanced search Search tips

Issue 836827 link

Starred by 1 user
Status: Fixed
Owner:
r...@igalia.com
Closed: Apr 2018
Cc:
mstensho@chromium.org
jfernan...@igalia.com
cbiesin...@chromium.org
svil...@igalia.com
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

[css-flex][css-grid] Percentage sizes on elements inside the subitems should take into account the item's scrollbar size

Project Member Reported by r...@igalia.com, Apr 25 2018 
Analyzing one of the TODOs from https://chromium.googlesource.com/chromium/src/+/3594da711b52b5eac14253f3e2a78f55a9fcb608
related to scrollbars I've found this issue.

Check the attached examples, the issue is more noticeable in Grid Layout but it also happens on Flexbox.

The problem is that the items have a child with 100% width and height.
The items also have margin, padding, border and scrollbar.
The scrollbar size is ignored so the items end up being bigger than expected,
causing overflow (so you can actually scroll) when it was supposed to not happen.
flex.html
1.5 KB View Download
grid.html
1.5 KB View Download
Project Member

Comment 1 by bugdroid1@chromium.org, Apr 25 2018 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7c13f644750fbb199287becfb2ca7415121aa3d4

commit 7c13f644750fbb199287becfb2ca7415121aa3d4
Author: Manuel Rego Casasnovas <rego@igalia.com>
Date: Wed Apr 25 22:21:07 2018

Subtract scrollbar in PerpendicularContainingBlockLogicalHeight

This is an issue that happens in Flexbox and Grid Layout
and any other layout method that uses OverrideLogicalHeight.
In LayoutBox::PerpendicularContainingBlockLogicalHeight()
we were returning the OverrideContentLogicalHeight() plus
the scrollbar height.
That caused issue with orthogonal flows between flex/grid items
and their children.

The issue is fixed just following the suggestion in the TODO
and using OverrideContentLogicalHeight()
(which doesn't include the scrollbar height).

BUG= 836827 
TEST=external/wpt/css/css-flexbox/percentage-size-subitems-001.html
TEST=external/wpt/css/css-grid/grid-items/percentage-size-subitems-001.html

Change-Id: I0c7586449067aab78430defc831b2774136e2f0b
Reviewed-on: https://chromium-review.googlesource.com/1028012
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#553790}
[add] https://crrev.com/7c13f644750fbb199287becfb2ca7415121aa3d4/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/percentage-size-subitems-001.html
[add] https://crrev.com/7c13f644750fbb199287becfb2ca7415121aa3d4/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/reference/percentage-size-subitems-001-ref.html
[add] https://crrev.com/7c13f644750fbb199287becfb2ca7415121aa3d4/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/percentage-size-subitems-001-ref.html
[add] https://crrev.com/7c13f644750fbb199287becfb2ca7415121aa3d4/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/percentage-size-subitems-001.html
[modify] https://crrev.com/7c13f644750fbb199287becfb2ca7415121aa3d4/third_party/blink/renderer/core/layout/layout_box.cc

Comment 2 by r...@igalia.com, Apr 26 2018

Status: Fixed (was: Started)
►

Sign in to add a comment