New issue
Advanced search Search tips

Issue 888532 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

'auto' in 'left' or 'right' resolves to the value of the other one in 'vertical-rl' writing mode

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

Issue description

Chrome Version: 69.0.3497.81
OS: Lubuntu 18.04

What steps will reproduce the problem?
Run this code: http://jsfiddle.net/ew7gfx5d/
```css
#container {
  transform: scale(1);
  writing-mode: vertical-rl;
  border: 1px solid;
  width: 100px;
  height: 100px;
}
#test {
  position: fixed;
  background: blue;
  height: 50px;
  width: 50px;
  top: 10px;
  left: 15px;
}
```
```html
<div id="container">
  <div id="test"></div>
</div>
```
```js
var test = document.getElementById("test");
let {top, bottom, left, right} = getComputedStyle(test);
document.body.append(JSON.stringify({top, bottom, left, right}));
```

What is the expected result?
'left: 15px' resolves to '15px' and 'right: auto' resolves to '35px' (so that left + width + right = 100px).

What happens instead?
'right: auto' resolves to the same value as 'left'.
The opposite also happens, 'left: auto' resolves to the same value as a non-auto 'right'.
This happens when the element has absolute or fixed positioning and the containing block has a 'vertical-rl' writing mode.
The element appears at the correct position, it's just that the resolved value provided by getComputedStyle is wrong.
 
Components: -Blink>Layout Blink>CSS
Status: Available (was: Untriaged)

Sign in to add a comment