245105 2022-09-12 16:58:57 -0700 CSS properties set to 'initial' don't roundtrip from CSSOM correctly 2022-09-26 19:33:42 -0700 1 1 1 Unclassified WebKit CSS Safari Technology Preview Unspecified Unspecified RESOLVED DUPLICATE 185953 https://bugs.webkit.org/show_bug.cgi?id=245104 BrowserCompat, InRadar P2 Normal --- 1 ahmad.saleem792 webkit-unassigned ap bfulgham karlcow obrufau rniwa simon.fraser webkit-bug-importer zalan oldest_to_newest 1898074 0 ahmad.saleem792 2022-09-12 16:58:57 -0700 Hi Team, I was going through Chrome MonoRail and came across another test case, where Webkit is different from other browsers: Link - https://jsbin.com/lezefopa/1/edit?html,console,output Chrome Bug - https://bugs.chromium.org/p/chromium/issues/detail?id=358273 ____ *** Safari 16 on macOS 12.6 *** .foo { } *** Safari Technology Preview 153 *** .foo { } *** Chrome Canary 107 *** .foo { background: initial; border: initial; padding: initial; position: initial; opacity: initial; } *** Firefox Nightly 106 *** .foo { background: initial; border: initial; padding: initial; position: initial; opacity: initial; } ______ I think matching with other browsers would be great. If it is duplicate, please mark this as such. Thanks! 1899685 1 webkit-bug-importer 2022-09-19 16:59:18 -0700 <rdar://problem/100147342> 1900344 2 karlcow 2022-09-22 04:43:29 -0700 <style> .foo { background: initial; border: initial; padding: initial; position: initial; opacity: initial; } </style> with document.querySelector('style').sheet.cssRules[0].cssText > The cssText attribute must return a serialization of the CSS rule. On setting the cssText attribute must do nothing. https://drafts.csswg.org/cssom/#serialize-a-css-rule if I comment out this part git diff diff --git a/Source/WebCore/css/StyleProperties.cpp b/Source/WebCore/css/StyleProperties.cpp index 1768f465451d..769da676ae45 100644 --- a/Source/WebCore/css/StyleProperties.cpp +++ b/Source/WebCore/css/StyleProperties.cpp @@ -1750,8 +1750,8 @@ StringBuilder StyleProperties::asTextInternal() const } else value = property.value()->cssText(); - if (propertyID != CSSPropertyCustom && value == "initial"_s && !CSSProperty::isInheritedProperty(propertyID)) - continue; + // if (propertyID != CSSPropertyCustom && value == "initial"_s && !CSSProperty::isInheritedProperty(propertyID)) + // continue; if (numDecls++) result.append(' '); I get for the test result: .foo { background-image: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border: initial; padding: initial; position: initial; opacity: initial; } which almost fixes it except for background shorthand which gets expanded. (that might break other things.) Maybe it needs a function similar to https://searchfox.org/wubkat/rev/abe3878de54ffed9a6eb6de74e246bee9739e209/Source/WebCore/css/StyleProperties.cpp#1135-1157 1900346 3 karlcow 2022-09-22 04:59:52 -0700 ah there's also a different behavior for background with regards to shorthands. .foo { background: green; } and document.querySelector('style').sheet.cssRules[0].cssText will return: in chrome .foo { background: green; } in firefox .foo { background: green; } but in safari .foo { background-color: green; } 1900350 4 karlcow 2022-09-22 05:28:52 -0700 The modification in comment #2 would fix: http://wpt.live/css/cssom/shorthand-serialization.html but is breaking the third test. http://wpt.live/css/cssom/border-shorthand-serialization.html 1900627 5 obrufau 2022-09-23 06:55:32 -0700 *** This bug has been marked as a duplicate of bug 185953 ***