[css-logical-1] [css-cascade-3] The all shorthand probably shouldn't set logical properties. #1898
Description
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:
<!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 in current browsers.