[csswg-drafts] [cssom] Resolved value for margins and paddings doesn't reflect reality (#10391)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom] Resolved value for margins and paddings doesn't reflect reality ==
https://drafts.csswg.org/cssom/#resolved-values

> - {block, inline}-size
> - {height, width}
> - {margin, padding}-{block, inline}-{start, end}
> - {margin, padding}-{bottom, left, right, top}
>   If the property applies to the element or pseudo-element and the resolved value of the display property is not none or contents, then the resolved value is the used value. Otherwise the resolved value is the computed value.

For preferred sizes: https://drafts.csswg.org/css-sizing-3/#preferred-size-properties

> [Applies to:](https://www.w3.org/TR/css-cascade/#applies-to)  all elements except [non-replaced](https://drafts.csswg.org/css-display-4/#non-replaced) [inlines](https://drafts.csswg.org/css-display-4/#inline)

For margin properties: https://drafts.csswg.org/css-box-4/#margin-physical

> [Applies to:](https://www.w3.org/TR/css-cascade/#applies-to)  all elements except [internal table elements](https://drafts.csswg.org/css-display-4/#internal-table-element), [ruby base containers](https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box), and [ruby annotation containers](https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box)

For padding properties: https://drafts.csswg.org/css-box-4/#padding-physical

> [Applies to:](https://www.w3.org/TR/css-cascade/#applies-to)  all elements except: [internal table elements](https://drafts.csswg.org/css-display-4/#internal-table-element) other than table cells, [ruby base containers](https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box), and [ruby annotation containers](https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-box)

However, I tried to set them to a percentage:

```html
<!DOCTYPE html>
<div id="target" style="display: X; margin: 25%; padding: 25%; height: 200%; width: 200%">
  <div style="width: 100px; height: 100px"></div>
</div>
<script>
var cs = getComputedStyle(document.querySelector("#target"));
document.body.prepend("margin-top: " + cs.marginTop + "; padding-top: " + cs.paddingTop + "; height: " + cs.height + "; width: " + cs.width)
</script>
```

| Resolved value of `margin-top: 25%` | Spec | Gecko | Blink | WebKit |
| ----------------------------- | - | - | - | - |
| `display: table-row`          | `25%`     | `0px`   | `25px`  | `0px`   |
| `display: table-row-group`    | `25%`     | `0px`   | `25px`  | `0px`   |
| `display: table-header-group` | `25%`     | `0px`   | `25px`  | `0px`   |
| `display: table-footer-group` | `25%`     | `0px`   | `25px`  | `0px`   |
| `display: table-column`       | `25%`     | `0px`   | `0px`   | `0px`   |
| `display: table-column-group` | `25%`     | `0px`   | `0px`   | `0px`   |
| `display: table-cell`         | `25%`     | `0px`   | `0px`   | `0px`   |
| `display: table-caption`      | `<length>`| `1428px`| `25px`  | `25px`  |
| `display: inline`             | `<length>`| `476px` | `25%`   | `25%`   |

| Resolved value of `padding-top: 25%` | Spec | Gecko | Blink | WebKit |
| - | - | - | - | - |
| `display: table-row`          | `25%`     | `0px`   | `25px`  | `25px`  |
| `display: table-row-group`    | `25%`     | `0px`   | `25px`  | `25px`  |
| `display: table-header-group` | `25%`     | `0px`   | `25px`  | `25px`  |
| `display: table-footer-group` | `25%`     | `0px`   | `25px`  | `25px`  |
| `display: table-column`       | `25%`     | `0px`   | `0px`   | `0px`   |
| `display: table-column-group` | `25%`     | `0px`   | `0px`   | `0px`   |
| `display: table-cell`         | `25px`    | `25px`  | `25px`  | `25px`  |
| `display: table-caption`      | `<length>`| `1428px`| `25px`  | `25px`  |
| `display: inline`             | `<length>`| `476px` | `25%`   | `25%`   |

| Resolved value of `height: 200%` | Spec | Gecko | Blink | WebKit |
| - | - | - | - | - |
| `display: table-row`          | `100px` | `100px` | `50px`  | `50px`  |
| `display: table-row-group`    | `100px` | `100px` | `50px`  | `50px`  |
| `display: table-header-group` | `100px` | `100px` | `50px`  | `50px`  |
| `display: table-footer-group` | `100px` | `100px` | `50px`  | `50px`  |
| `display: table-column`       | `0px`   | `0px`   | `0px`   | `0px`   |
| `display: table-column-group` | `0px`   | `0px`   | `0px`   | `0px`   |
| `display: table-cell`         | `100px` | `100px` | `100px` | `100px` |
| `display: table-caption`      | `100px` | `100px` | `100px` | `100px` |
| `display: inline`             | `200%`  | `200%`  | `200%`  | `200%`  |


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10391 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 4 June 2024 15:31:14 UTC