Bug 238874

Summary: [cssom] "set a CSS declaration" is broken for deferred properties
Product: WebKit Reporter: Oriol Brufau <obrufau>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, karlcow, m_dubet, webkit-bug-importer
Priority: P2 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.