Bug 239579 – [css-cascade] Some legacy properties take precedence over standard ones that appear later

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Oriol Brufau]

Try this code:

    var s = document.body.style;
    var cs = getComputedStyle(document.body);

    s.cssText = "mask-clip: content-box";
    cs.maskClip; // "content-box"
    s.cssText = "-webkit-mask-clip: initial; mask-clip: content-box";
    cs.maskClip; // "border-box"

    s.cssText = "mask-composite: exclude";
    cs.maskComposite; // "exclude"
    s.cssText = "-webkit-mask-composite: initial; mask-composite: exclude";
    cs.maskComposite; // "add"

    s.cssText = "mask-mode: alpha";
    cs.maskMode; // "alpha"
    s.cssText = "-webkit-mask: initial; mask-mode: alpha";
    cs.maskMode; // "match-source"

    s.cssText = "overflow-wrap: anywhere";
    cs.overflowWrap; // "anywhere"
    s.cssText = "word-wrap: initial; overflow-wrap: anywhere";
    cs.overflowWrap; // "normal"

    s.cssText = "text-combine-upright: all";
    cs.textCombineUpright; // "all"
    s.cssText = "-webkit-text-combine: initial; text-combine-upright: all";
    cs.textCombineUpright; // "none"

This should not happen, the legacy properties should be implemented as one of
 - Aliases
 - Shorthands
 - Deferred properties

See https://drafts.csswg.org/css-cascade-4/#aliasing

Then the last used property would take precedence, as such:

    s.cssText = "word-wrap: break-word; overflow-wrap: anywhere";
    cs.wordWrap; // "anywhere" (not "break-word"!!!)
    cs.overflowWrap; // "anywhere" (not "break-word"!!!)
    s.cssText = "overflow-wrap: anywhere; word-wrap: break-word";
    cs.wordWrap; // "break-word"
    cs.overflowWrap; // "break-word"

[Oriol Brufau]

Created attachment 458411 [details]
Patch

[Tim Nguyen (:ntim)]

Comment on attachment 458411 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=458411&action=review

> Source/WebCore/css/CSSProperties.json:3859
>          "overflow-wrap": {
> +            "codegen-properties": {
> +                "related-property": "word-wrap"
> +            },
>              "values": [
>                  "normal",
>                  "break-word"

Can we just make `word-wrap` an alias of `overflow-wrap` like how it's defined in the spec? Then we no longer need this related-property change, and we can remove the "word-wrap" section from CSSProperties.json

> Source/WebCore/css/CSSProperties.json:7315
>                  }
>              ],
>              "codegen-properties": {
> +                "related-property": "transform-style",
>                  "name-for-methods": "TransformStyle3D",
>                  "comment": "Keeping -webkit-transform-style around is how we'll detect legacy content. At that point, we'll have to add a custom builder and a new TransformStyle3D type. FIXME: this never happened."
>              }

The FIXME never happened, so at this point, I'd just remove the `-webkit-transform-style` section and put it as alias for `transform-style`.

[Oriol Brufau]

Created attachment 458465 [details]
Patch

[Radar WebKit Bug Importer]

<rdar://problem/92430427>

[Tim Nguyen (:ntim)]

Comment on attachment 458465 [details]
Patch

r=me if EWS is green

[EWS]

Committed r293602 (250108@main): <https://commits.webkit.org/250108@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 458465 [details].