New issue
Advanced search Search tips

Issue 883585 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Sep 26
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Percentage in 'top' or 'bottom' properties of fixed positioning ignores padding of the containing block

Project Member Reported by obru...@igalia.com, Sep 13

Issue description

Chrome Version: (copy from 68.0.3440.106)
OS: Lubuntu 18.04

What steps will reproduce the problem?

Run this code: http://jsfiddle.net/kjxvr7he/

```css
#container {
  transform: scale(1);
  padding: 100px;
  border: 5px solid;
}
#test {
  position: fixed;
  top: 50%;
}
```
```html
<div id="container">
  <div id="test"></div>
</div>
```
```js
var test = document.getElementById("test");
test.textContent = getComputedStyle(test).top;
```

What is the expected result?

The containing block of the fixed element should be the padding area of the #container element, which is '200px' tall due to the top and bottom paddings.

The #test element has 'top: 50%', it should resolve to '100px'.

What happens instead?

The percentage is resolved as if the containing block was the content area, which is '0px' tall.

The element appears at the correct position, it's just that the resolved value provided by getComputedStyle is wrong.
 
Components: Blink>Layout
Cc: ikilpatrick@chromium.org cbiesinger@google.com
Status: Available (was: Untriaged)
Owner: obru...@igalia.com
Status: Started (was: Available)
Summary: Percentage in 'top' or 'bottom' properties of fixed positioning ignores padding of the containing block (was: Percentage in inset property of fixed positioning ignores padding of the containing block)
In fact only 'top' and 'bottom' properties are affected.
Hi Oriol,

Thanks for working on this.

Are you also able to ensure that any additional tests you pass in the current layout system also pass in LayoutNG?

(we are getting close to shipping, which will mean that if you perform some fixes, they may not end up working if you just use the existing layout system).

Thanks,
Ian
Cc: -cbiesinger@google.com cbiesin...@chromium.org
getComputedStyle-insets-fixed.html has different expectations for LayoutNG, so I already checked it when updating expectations. BTW, how can I tell run_web_tests.py to enable LayoutNG?
I think LayoutNG was passing a few more (~12?) of those tests so kojii@ rebased them. You need to use:

--additional-driver-flag=--enable-blink-features=LayoutNG

Ian
Project Member

Comment 8 by bugdroid1@chromium.org, Sep 25

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

commit a8172de1e6bda6b7f09cbfc825631bdf5ea13d7c
Author: Oriol Brufau <obrufau@igalia.com>
Date: Tue Sep 25 22:59:25 2018

Use the padding area to resolve percentages in fixed positioning

Currently only 'position: absolute' uses the padding area of the
containing block in 'top' and 'bottom' properties, 'position: fixed'
uses the content area instead.

The change only affects the value returned by getComputedStyle, the used
value was already correct.

BUG= 883585 

TEST=external/wpt/css/cssom/getComputedStyle-insets-fixed.html

The test still has some failures due to  http://crbug.com/883582 ,
http://crbug.com/883574 and http://crbug.com/888532.

Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_layout_ng
Change-Id: I91a07472026f50cb60e0225a4e8edd515c04ec6a
Reviewed-on: https://chromium-review.googlesource.com/1240124
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#594137}
[rename] https://crrev.com/a8172de1e6bda6b7f09cbfc825631bdf5ea13d7c/third_party/WebKit/LayoutTests/external/wpt/css/cssom/getComputedStyle-insets-fixed-expected.txt
[modify] https://crrev.com/a8172de1e6bda6b7f09cbfc825631bdf5ea13d7c/third_party/WebKit/LayoutTests/flag-specific/enable-blink-features=LayoutNG/external/wpt/css/cssom/getComputedStyle-insets-fixed-expected.txt
[delete] https://crrev.com/e1cf45a6c67e0dbaa9312919520deff878d63a17/third_party/WebKit/LayoutTests/platform/mac/external/wpt/css/cssom/getComputedStyle-insets-fixed-expected.txt
[delete] https://crrev.com/e1cf45a6c67e0dbaa9312919520deff878d63a17/third_party/WebKit/LayoutTests/platform/win/external/wpt/css/cssom/getComputedStyle-insets-fixed-expected.txt
[modify] https://crrev.com/a8172de1e6bda6b7f09cbfc825631bdf5ea13d7c/third_party/blink/renderer/core/layout/layout_box.cc

Status: Fixed (was: Started)

Sign in to add a comment