- From: Sam Weinig via GitHub <noreply@w3.org>
- Date: Thu, 03 Jul 2025 16:03:15 +0000
- To: public-css-archive@w3.org
I think I am having trouble with the phrase "properties sharing a computed value", or at least, I don't know why they would need to have the same computed value, as I don't think that applies to other logical property groupings. Indeed, `direction: rtl; background-position-inline: 0%` refers to the right hand side. But I don't understand why that would be a problem. Let's take a different set of properties first, `margin-left`/`margin-right` and `margin-inline-start`/`margin-inline-end`. Starting with default `direction: ltr`: ``` <div id="test1" style="direction: ltr; margin-left: 2px; margin-right: 1px;">...</div> ``` we see the following: ``` assert(document.getElementById("test1").style['margin-left'] == "2px"); assert(document.getElementById("test1").style['margin-right'] == "1px"); assert(document.getElementById("test1").style['margin-inline-start'] == ""); assert(document.getElementById("test1").style['margin-inline-end'] == ""); assert(window.getComputedStyle(document.getElementById("test1"))['margin-left'] == "2px"); assert(window.getComputedStyle(document.getElementById("test1"))['margin-right'] == "1px"); assert(window.getComputedStyle(document.getElementById("test1"))['margin-inline-start'] == "2px"); assert(window.getComputedStyle(document.getElementById("test1"))['margin-inline-end'] == "1px"); ``` That is, the computed values of `margin-left` and `margin-inline-start` are the same values. But, if we change the writing mode, and set `direction: rtl;`: ``` <div id="test1" style="direction: rtl; margin-left: 2px; margin-right: 1px;">...</div> ``` we see the following: ``` assert(document.getElementById("test1").style['margin-left'] == "2px"); assert(document.getElementById("test1").style['margin-right'] == "1px"); assert(document.getElementById("test1").style['margin-inline-start'] == ""); assert(document.getElementById("test1").style['margin-inline-end'] == ""); assert(window.getComputedStyle(document.getElementById("test1"))['margin-left'] == "2px"); assert(window.getComputedStyle(document.getElementById("test1"))['margin-right'] == "1px"); assert(window.getComputedStyle(document.getElementById("test1"))['margin-inline-start'] == "1px"); assert(window.getComputedStyle(document.getElementById("test1"))['margin-inline-end'] == "2px"); ``` Now, the computed values of `margin-left` and `margin-inline-start` are no longer the same value. So, taking your example: ``` <div id="test1" style="direction: rtl; background-position-inline: 0%;">...</div> ``` I would expect the following to hold: ``` assert(document.getElementById("test1").style['background-position-inline'] == "0%"); assert(document.getElementById("test1").style['background-position-x'] == ""); assert(window.getComputedStyle(document.getElementById("test1"))['background-position-inline'] == "0%"); assert(window.getComputedStyle(document.getElementById("test1"))['background-position-x'] == "100%"); ``` @Loirooriol, can you help me understand where this breaks down for you? -- GitHub Notification of comment by weinig Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12132#issuecomment-3032808383 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 3 July 2025 16:03:16 UTC