Re: [csswg-drafts] [cssom] Serialization of a declaration block not idempotent in presence of logical properties. (#3244)

I managed to implement the improvement mentioned in my previous comment. Basically it boils down to (if some condition is satisfied) resuming `Declaration loop` with the interfering declaration from step 6 (the one that is not in `current longhands`) before the current `declaration` (the first declaration of `current longhands`).

  > 6\. If there’s any declaration `interfering` in `declaration block` such that... :
  >  
  >  - It's not in `current longhands`
  >  - It appears after the first longhand in `current longhands`
  >  - It appears before some declaration in `current longhands` whose name belongs to the same logical property group but has a different mapping logic than the name of `interfering`
  >
  > ... then if all declarations in `current longhands` appearing before `interfering` in `declaration block`, are not in the same logical property group or have the same mapping logic than the name of `interfering`, resume the steps labeled `declaration loop` with `interfering`, otherwise resume the steps labeled `shorthand loop`.

Similarly as the obvervation I made in a previous comment, I think either *are not in the same logical property group* or *have the same mapping logic* is required.

**Test cases to recap:**

(Below, *move declarations* would be the result from a round trip)

```js
// Currently resolved: move declarations backward
style.cssText = 'border-top-width: 1px; border-block-start-width: 1px; border-top-style: solid; border-top-color: green'
expect(style.cssText).toBe('border-top: 1px solid green; border-block-start-width: 1px;')
```

```js
// Improvement: move declarations forward
style.cssText = 'border-top-width: 1px; border-block-start-style: none; border-top-style: solid; border-top-color: green'
expect(style.cssText).toBe('border-block-start-style: none; border-top: 1px solid green;')

// Guarded: skip shorthand when declarations cannot be moved backward/forward
let input = 'border-top-width: 1px; border-block-start-width: 1px; border-block-start-style: none; border-top-style: solid; border-top-color: green'
expect(style.cssText).toBe(input)

// More complex cases with moving declarations forward
style.cssText = 'border: 1px solid red; border-block-start-color: orange; border-color: green'
expect(style.cssText).toBe('border-block-start-color: orange; border: 1px solid green;')
style.cssText = 'border-top-width: 1px; border-block-start-width: 1px; border-block-end-width: 1px; border-top-style: solid; border-top-color: green'
expect(style.cssText).toBe('border-top: 1px solid green; border-block-width: 1px;')
```

Let me know what you think.

-- 
GitHub Notification of comment by cdoublev
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3244#issuecomment-1296536306 using your GitHub account


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

Received on Monday, 31 October 2022 04:44:49 UTC