[csswg-drafts] [css-logical-1] [css-cascade-3] The all longhand probably shouldn't set logical properties.

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

== [css-logical-1] [css-cascade-3] The all longhand probably shouldn't set logical properties. ==
Or if it should, order of the expansion of `all` should be specified.

>From https://drafts.csswg.org/css-cascade-3/#all-shorthand:

> The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords.

This includes logical properties, and this is a problem because that means that it produces unexpected results when used from CSSOM (where the position a property declaration appears on matters).

In particular, we came across https://bugzilla.mozilla.org/show_bug.cgi?id=1410028, which happens because of the internal order the properties are reset.

In particular, it's not the same if `all` expands to:

```
padding-inline-start: initial;
padding-left: initial;
```

that if it expands the other way around.

i.e., this two pieces of code should be equivalent:

```html
<!doctype html>
<script>
let setStyle = (el, props) => {
  for (prop in props)
    el.style.setProperty(prop, props[prop]);
};

let logical = document.createElement('div');
let physical = document.createElement('div');

setStyle(physical, {
  all: 'initial',
  'background-color': 'blue',
  display: 'block',
  width: '100px',
  height: '100px',
  padding: '10px'
});

setStyle(logical, {
  all: 'initial',
  'background-color': 'blue',
  display: 'block',
  width: '100px',
  height: '100px',
  'padding-inline-start': '10px',
  'padding-inline-end': '10px',
  'padding-block-start': '10px',
  'padding-block-end': '10px'
});

document.documentElement.appendChild(physical);
document.documentElement.appendChild(logical);
</script>
```

But they aren't.

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

Received on Monday, 23 October 2017 05:42:39 UTC