New issue
Advanced search Search tips

Issue 681816 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug



Sign in to add a comment

CSS: padding bottom percentage incorrectly calculated when using vertical writing mode

Reported by oliverj...@gmail.com, Jan 17 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2979.0 Safari/537.36

Steps to reproduce the problem:
1. See http://output.jsbin.com/mizaliq/3

What is the expected behavior?
I expect the same behaviour here regardless of the writing mode. The padding-bottom set on .child is 100%, which is a proportion of the container element's width. 

What went wrong?
When using vertical writing mode, the 100% (as a proportion of the container element's width) is not honoured.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 57.0.2979.0  Channel: dev
OS Version: OS X 10.12.2
Flash Version: 

If you toggle the writing mode style off and on in dev tools, it seems to fix the problem.
 
Components: Blink>Layout

Comment 2 by e...@chromium.org, Jan 17 2017

Owner: kojii@chromium.org
Status: Assigned (was: Unconfirmed)
Is this intentional kojii?

Comment 3 by kojii@chromium.org, Jan 18 2017

Labels: -Pri-2 -OS-Mac OS-All Pri-3
> I expect the same behaviour here regardless of the writing mode.

It's not possible due to the way CSS computes layout.

Edge and Gecko computes the padding-bottom: 100% relative to ICB (the window height,) this looks compliant to the spec.

https://drafts.csswg.org/css-writing-modes-3/#dimension-mapping
As a corollary, percentages on the margin and padding properties, which are always calculated with respect to the containing block width in CSS2.1, are calculated with respect to the inline size of the containing block in CSS3.

In this case, height is not defined, so we should refer to the following section
https://drafts.csswg.org/css-writing-modes-3/#orthogonal-auto
a percentage of the containing block’s inline size cannot be defined, and inline axis computations cannot be resolved. In these cases, the initial containing block’s size is used as a fallback variable in place of the available inline space for calculations that require a definite available inline size.

Edge and Gecko conforms to this spec, while Blink (computes to zero) and WebKit (percent to physical width) don't.

Comment 4 by kojii@chromium.org, Jan 29 2017

Components: -Blink>Layout Blink>Layout>WritingMode

Sign in to add a comment