Bug 193656 - [css-grid] abspos inside grid can have negative sizes
Summary: [css-grid] abspos inside grid can have negative sizes
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: 2019-01-21 11:51 PST by Oriol Brufau
Modified: 2019-01-21 11:51 PST (History)
0 users

See Also:


Attachments
testcase (552 bytes, text/html)
2019-01-21 11:51 PST, Oriol Brufau
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Oriol Brufau 2019-01-21 11:51:28 PST
Created attachment 359700 [details]
testcase

Run this code: https://jsfiddle.net/9mjg2fxt/

```css
#grid {
  display: grid;
  grid: 100px / 100px;
  border: solid;
  width: 100px;
  height: 100px;
  position: relative;
}
#abspos {
  position: absolute;
  left: 30px;
  right: 40px;
  grid-column-end: 1;
  color: cyan;
  border: 10px solid blue;
}
```
```html
<div id="log"></div>
<div id="grid">
  <div>
    <div id="abspos"></div>
  </div>
</div>
```
```js
let w = document.getElementById('abspos').offsetWidth;
document.getElementById("log").textContent = "offsetWidth = " + w;
```

Result: the offsetWidth is -70, and no blue border is shown
Expected: It should be 20 instead. And the blue border should be visible.

Chromium and Firefox do it correctly.