Re: [csswg-drafts] [css-position] Resolved value of over-constrained percentages in inset properties

In fact what CSSOM says (without taking CSS Position into account) doesn't match any implementation.

<details>
<summary>Consider this code: <a href="https://jsfiddle.net/s6qgo0L3/">https://jsfiddle.net/s6qgo0L3/</a></summary>

```html
<pre id="log"></pre>
<div id="container">
  <div id="relative">
    <div id="static"></div>
  </div>
</div>
```
```css
#container {
  height: 100px;
  width: 100px;
}
#relative {
  position: relative;
  top: 10%;
  left: 20%;
  bottom: 30%;
  right: 40%;  
}
#static {
  top: inherit;
  left: inherit;
  bottom: inherit;
  right: inherit;
}
```
```js
function insets(el) {
  let {top, bottom, left, right} = getComputedStyle(el);
  return JSON.stringify({top, bottom, left, right});
}
log.textContent = insets(relative) + "\n" + insets(static);
```

</details>
<br>

>From https://drafts.csswg.org/cssom/#resolved-value-special-case-property-like-top

> If the property applies to a positioned element and the resolved value of the display property is not none or contents, and the property is not over-constrained, then the resolved value is the used value. Otherwise the resolved value is the computed value.

The relative element is overconstrained, so we should get the computed value. All Firefox, Chromium, WebKit and Edge provide an absolute length and not a percentage:

> {"top":"10px","bottom":"30px","left":"20px","right":"40px"}

The static element uses `inherit`, so the computed values should be the lengths above. And  since it's not positioned, `getComputedStyle` should provide that computed value.

However, all Firefox, Chromium and Blink provide the percentage instead:

> {"top":"10%","bottom":"30%","left":"20%","right":"40%"}

Edge absolutizes the percentages even is static positioning, but they are different this time because they have been resolved with respect to the relative element instead of the container ancestor:

> {"top":"0px","bottom":"0px","left":"20px","right":"40px"}

We can conclude that the computed value of the relative element is the percentage, and `getComputedStyle` doesn't return that percentage.

---

So I think CSSOM should say something like:

> If the element is not positioned or the computed value is a length, then the resolved value is the computed value. Otherwise, if the property is not over-constrained, the resolved value is the used value length. Otherwise, the resolved value is the length that would result from resolving the computed value if there wasn't over-constrainment.

And then in CSS Position

> Computed value: as specified, with lengths made absolute

(which is what [CSS2 says](https://www.w3.org/TR/CSS2/visuren.html#position-props) a bit summarized)

Cc @emilio 

-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3059#issuecomment-424545899 using your GitHub account

Received on Wednesday, 26 September 2018 00:33:06 UTC