Bug 268742 – cssText wrong escaping

• Component: CSS
• Status: NEW

[Jozef]

Run this code in safari and see that the cssText is wrongly escaped

const style = document.createElement('style')
document.body.append(style)
style.sheet.insertRule(`h6 {
    background: url(/my-image.png), var(--my-image);
}`)
console.log(style.sheet.cssRules[0].cssText)

Output:
h6 { background: url(\/my-image\.png), var(--my-image); }

Chrome and Firefox outputs:
h6 { background: url(/my-image.png), var(--my-image); }

[Ahmad Saleem]

*** Safari Technology Preview 187 ***

"h6 { background: url(\/my-image\.png), var(--my-image); }"

*** Chrome Canary 123 ***

"h6 { background: url(/my-image.png), var(--my-image); }"

*** Firefox Nightly 124 ***

"h6 { background: url(/my-image.png), var(--my-image); }"

___

Just wanted to share as of today result. I will share Minibrowesr (WebKit ToT) results later.

[Ahmad Saleem]

WebKit ToT (274096@main) same as STP187.

[Sam Sneddon [:gsnedders]]

I will note that both outputs are semantically equivalent; have you had this serialisation difference cause problems anywhere?

[Sam Sneddon [:gsnedders]]

See also https://github.com/w3c/csswg-drafts/issues/9913 for the spec not matching any existing major browser.

[Jozef]

@Sam Sneddon, I don't believe it carries the same semantic meaning. There are actually two backslashes.

The raw form is `h6 { background: url(\\/my-image\\.png), var(--my-image); }`.

which is not equal to:
`h6 { background: url(\/my-image\.png), var(--my-image); }`
or
`h6 { background: url(/my-image.png), var(--my-image); }`

[Radar WebKit Bug Importer]

<rdar://problem/122796093>