Bug 189513 - Wrong static position for out-of-flow positioned element with different writing-mode than its containing block
Summary: Wrong static position for out-of-flow positioned element with different writi...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-09-11 12:09 PDT by Oriol Brufau
Modified: 2020-03-23 18:42 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Oriol Brufau 2018-09-11 12:09:43 PDT
Run this code: http://jsfiddle.net/4pqcexn5/

```css
#container {
  position: relative;
  border: 5px solid;
  padding-left: 100px;
}
#container > * {
  writing-mode: vertical-lr;
}
#abspos {
  position: absolute;
}
```
```html
<div id="container">
  <div id="abspos">abspos</div>
  <div id="static">static</div>
</div>
```

The abspos element has all 'top', 'left', 'bottom' and 'right' properties set to 'auto', so it should appear at the static position.
However, instead, of being shifted 100px to the right due to padding-left, it's shifted 100px downwards.
The text 'abspos' should overlap 'static'.

This happens when an absolutely (or fixed) positioned element has a different writing mode than its containing block.
Chromium is also affected, Firefox does it right.
Comment 1 Carlos Alberto Lopez Perez 2020-03-23 18:42:55 PDT
Chromium was fixed in M76 according to http://crbug.com/883574

This is tested by the following WPT tests:
 css/css-grid/abspos/positioned-grid-descendants-???.html
 css/css-grid/abspos/orthogonal-positioned-grid-descendants-???.html