CSS properties set to 'initial' don't roundtrip from CSSOM correctly

[Ahmad Saleem]

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!

[Radar WebKit Bug Importer]

<rdar://problem/100147342>

[Karl Dubost]

  <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

[Karl Dubost]

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; }

[Karl Dubost]

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

[Oriol Brufau]

*** This bug has been marked as a duplicate of bug 185953 ***