Bug 238874

Summary:

[cssom] "set a CSS declaration" is broken for deferred properties

Product:

WebKit

Reporter:

Oriol Brufau <obrufau>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, karlcow, m_dubet, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=226461

Bug Depends on:

238350

Bug Blocks:

Attachments:

Description	Flags
testcase	none

Oriol Brufau

Reported 2022-04-06 10:14:39 PDT

Created attachment 456830 [details] testcase Run this testcase: <!DOCTYPE html> <div id="target"></div> <script> var cs = getComputedStyle(target); target.style.boxShadow = "0 0 0 100px blue"; console.log(target.style.cssText); // box-shadow: blue 0px 0px 0px 100px; console.log(cs.boxShadow); // rgb(0, 0, 255) 0px 0px 0px 100px target.style.webkitBoxShadow = "0 0 0 100px red"; console.log(target.style.cssText); // box-shadow: blue 0px 0px 0px 100px; -webkit-box-shadow: red 0px 0px 0px 100px; console.log(cs.boxShadow); // rgb(255, 0, 0) 0px 0px 0px 100px target.style.boxShadow = "0 0 0 100px green"; console.log(target.style.cssText); // box-shadow: green 0px 0px 0px 100px; -webkit-box-shadow: red 0px 0px 0px 100px; console.log(cs.boxShadow); // rgb(0, 128, 0) 0px 0px 0px 100px </script> Expected: green shadow. Actual: red shadow. box-shadow and -webkit-box-shadow are implemented as longhands that share a computed value. During the CSS cascade, they are deferred and applied in parse order, so that the last one wins. But CSSOM is broken, as seen above. When you set boxShadow="0 0 0 100px green", it just updates the old value in place, without taking into account that it will be overridden by -webkit-box-shadow that appears later. This needs the same fix that bug 226461 did for properties in a logical property group.

Attachments
testcase (737 bytes, text/html) 2022-04-06 10:14 PDT, Oriol Brufau	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2022-04-13 10:15:15 PDT

<rdar://problem/91698692>

Ahmad Saleem

Comment 2 2024-07-23 11:23:53 PDT

It is still broken in Safari Technology Preview 199, while Chrome Canary 128 and Firefox Nightly 130 are matching each other and show 'green' for attached test case instead of 'red' (as in Safari).

Note You need to log in before you can comment on or make changes to this bug.