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.
<rdar://problem/91698692>
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).