[css-logical-1] Order of inheritance vs. mapping in logical properties

[fantasai]

Example from @FremyCompany:

  <div style="margin-left: 10px; margin-inline-start: 20px; direction: rtl">
    <div style="margin-right: inherit; margin-inline-start: inherit; direction: ltr"></div>
  </div>

It's clear that margin-right inherits 20px from the computed margin-right value on the parent. What about margin-inline-start, though? Does it inherit 10px or 20px?

[dbaron]

It might even be clearer with the following two slightly simpler examples:

<div style="margin-left: 10px; margin-right: 20px; direction: rtl">
  <div style="margin-left: inherit /* compat requires 10px */; direction: ltr"></div>
</div>

<div style="margin-left: 10px; margin-right: 20px; direction: rtl">
  <div style="margin-inline-start: inherit /* 10px or 20px? */; direction: ltr"></div>
</div>

In other words, does inherit inherit the computed physical value from the parent (always), or does it inherit from whichever of physical or logical was specified?

I would hope, at least, that those two examples produce the same results (respectively) as these two:

<div style="margin-inline-end: 10px; margin-inline-start: 20px; direction: rtl">
  <div style="margin-left: inherit; direction: ltr"></div>
</div>

<div style="margin-inline-end: 10px; margin-inline-start: 20px; direction: rtl">
  <div style="margin-inline-start: inherit; direction: ltr"></div>
</div>

since the outer div always has the same computed values for all properties (the difference in that in these last two, it got those values through logical properties rather than physical ones).

[fantasai]

Just wanted to note here that the possible solutions to #3030 depend on what happens here.

[fantasai]

I would hope, at least, that those two examples produce the same results (respectively) as these two.

Yes, they would have to: inheritance uses the parent’s computed value, and pairs of corresponding logical/physical properties are required to have the same computed value.

[Loirooriol]

What about margin-inline-start, though? Does it inherit 10px or 20px?

Chromium, WebKit and Firefox are interoperable, it inherits 10px. So if margin-inline-start resolves to margin-left, it inherits the margin-left of the parent, even if that's the margin-inline-end of the parent.

[fantasai]

@Loirooriol Thanks! We should probably check with i18n that it's acceptable behavior, but as long as it is, speccing interop sounds reasonable to me.

[r12a]

fwiw, last Friday i had created about 100 tests for css-logical, including the various directional permutations. It's geek week now, so i may upload the tests with results this week, or it may have to wait until next week. I might be able to add a test for this scenario, too.

[r12a]

So the main body of tests and results is at https://w3c.github.io/i18n-tests/results/css-logical

I didn't yet integrate the tests for inheritance into that page, because i'm not sure about the result. You can find 2 tests at

• https://w3c.github.io/i18n-tests/css-logical/inheritance/inherit-logical-logical.html
• https://w3c.github.io/i18n-tests/css-logical/inheritance/inherit-physical-logical.html

The results are indeed interoperable across Firefox, Chrome, and Safari browsers.

However, i wrote the assertions following the logic that seemed sensible to me: that is that the margin-inline-start for a LTR block (ie. on the left) would inherit the value for the margin on the right (ie. at the start) of a parent RTL block. Under that criterion, all the tests fail.

It seems somewhat illogical, as it were, that what is being inherited by a logical value is not the start (ie. logical) value of the parent. It would mean that a content author has to do some mental gymnastics to decide whether or not to use inherit explicitly.