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

Description Oriol Brufau 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.
Comment 1 Radar WebKit Bug Importer 2022-04-13 10:15:15 PDT 
<rdar://problem/91698692>
Comment 2 Ahmad Saleem 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).